有一次我因為查詢字串而損失了一個小時。正在發送第三方網路掛鉤 filter[status]=open&filter[assignee]=me()我的經紀人正在讀書 filter 作為一個扁平字串,我無法弄清楚為什麼每個請求都未經過濾。當我將原始 URL 貼到查詢字串解析器中並看到它解析到嵌套物件時,錯誤就很明顯:發送者使用括號表示法,而我的解析器沒有。本指南介紹了我如何使用該指南 查詢字串解析器 在 toolz。dev 上,查詢字串的棘手部分實際上是什麼,以及為什麼相同的金鑰編碼兩種不同的方式可以悄悄破壞整合。
TL;DR: 查詢字串是問號後面 URL 中將參數作為鍵值對攜帶的部分。查詢字串解析器將其轉換為結構化 JSON,解碼百分比編碼並處理重複的鍵和括號數組,並可以從 JSON 建立正確編碼的查詢字串。這 查詢字串解析器 在瀏覽器中執行兩個方向,因此您可以在不離開頁面的情況下檢查混亂的 URL 或組裝乾淨的 URL。
什麼是查詢字串?
查詢字串是 URL 中從第一個問號之後開始到片段(雜湊值之後的部分)結束的部分。它攜帶參數 as key=value 成對由&符號連接,所以 ?q=json&page=2 透過兩個參數。伺服器和客戶端程式碼讀取這些程式碼來過濾搜尋、追蹤活動、分頁清單或在頁面之間攜帶狀態。該元件中合法和不合法的通用規則來自 RFC 3986uri標準以及瀏覽器遵循的表單樣式參數的具體規則均來自 WHATWG URL 標準.
問題是 RFC 3986 定義了查詢元件的語法,但沒有定義其意義。它說明了允許哪些字元以及如何對它們進行百分比編碼,但沒有說明如何編碼 key=value 對映射到資料結構。這種解釋是從 HTML 表單提交繼承而來的,不同的平台以不相容的方式擴展它。這就是為什麼相同的查詢字串對於 PHP 後端、Rails 控制器和 JavaScript 前端來說可能意味著略有不同的東西,以及為什麼解析器必須明確其約定。
查詢字串中的每個鍵和值都經過 URL 編碼,以便保留的字元能夠存活。一個空間變成了 %20 或加號,值內的&號變為 %26 所以它沒有被誤認為是分隔符,斜線變成了 %2F. 解析意味著分割對,然後解碼每一側,建構意味著對每一側進行編碼並連接對。任一方向的編碼都錯誤,並且值會默默損壞。
查詢字串解析器實際上做什麼?
解析器採用 URL 或裸查詢字串並將其轉換為結構化、可讀的資料。在剝離所有內容(包括問號)的過程中,忽略雜湊後的片段,分割對,解碼每個鍵和值,並決定如何表示重複鍵和括號鍵。輸出是一個 JSON 對象,您可以讀取和複製,加上每個解碼對的平面表,因此重複和空值是顯而易見的。
在 toolz。dev 上,該工具在兩個方向上運行。在解析模式下,您貼上完整的 URL 或僅貼上其查詢字串,然後取得 JSON 和參數表。在建置模式下,您貼上 JSON 物件並取得正確編碼的查詢字串,並選擇如何表示陣列。載入樣本,您可以將帶有片段、重複樣式數組和編碼空間的真實 URL 解析為乾淨的 JSON,然後重建它。
使用專用解析器而不是關注 URL 的原因是查詢字串隱藏了它們的結構。掃描編碼字元、重複鍵和括號表示法的長 URL 幾乎不可能正確讀取,而最難讀取的部分、編碼和重複項正是導致錯誤的部分。查看 JSON 旁邊的解碼表可以消除猜測。
如何處理重複的按鍵?
相同的鍵可以合法地在查詢字串中出現多次,如下所示 tags=react&tags=laravel,沒有單一正確的方法來解釋這一點,這是許多混亂的根源。不同的系統以不同的方式解決重複項,因此解析器必須讓您選擇。
最常見的約定,也是 toolz。dev 工具中的預設約定,是將重複的鍵收集到數組中,因此 tags=react&tags=laravel 成為 {"tags":["react","laravel"]}. 這與瀏覽器的方式相符'自己的 URLSearchParams.getAll 公開這些值以及大多數現代後端的行為方式。但有些框架只保留第一次出現,有些框架只保留最後一次出現,因此該工具還提供保持優先和保持最後選項。當您調試整合時,將解析器與#39;產生或消耗 URL 的系統的行為使 JSON 變得有意義。
這種歧義不是學術性的。一個稱為 HTTP 參數污染的經典安全性和正確性問題之所以存在,正是因為請求路徑中的兩個系統可以解決 id=1&id=2 不同的是,人們看到了 1 另一個人看到了 2. 能夠明確地看到給定的解析器如何解析重複項是推理此類錯誤的最快方法。
標籤[]或過濾[顏色]等括號是什麼意思?
括號表示法是對平面查詢字串內的數組和嵌套物件進行編碼的約定,也是解析器最不同意的地方。後面的空括號標記數組,所以 tags[]=react&tags[]=laravel 建構 {"tags":["react","laravel"]}. 命名括號標記嵌套對象,因此 filter[color]=red&filter[size]=l 建構 {"filter":{"color":"red","size":"l"}}. 支架可以嵌套,所以 a[b][c]=1 建構 {"a":{"b":{"c":"1"}}}.
這種語法來自 PHP 和 Ruby on Rails 序列化表單資料的方式,以及許多 JavaScript 函式庫,例如 qs 遵循它。它不是任何核心 URL 標準的一部分,這正是普通的原因 URLSearchParams 在瀏覽器中不會擴展它,從而為您提供文字鍵 tags[] 而不是數組。 toolz。dev 解析器了解約定並將其擴展為匹配結構,當您需要文字鍵時,它可以讓您關閉該行為。
以下是主要約定在解析和建構時的排列方式:
| 數組樣式 | 編碼為 | 帕爾斯到 | 常見於 |
|---|---|---|---|
| 重複鍵 | tags=a&tags=b |
["a","b"] |
瀏覽器,大多數後端 |
| 空支架 | tags[]=a&tags[]=b |
["a","b"] |
PHP、Rails、qs 庫 |
| 索引括號 | tags[0]=a&tags[1]=b |
["a","b"] |
qs 庫,有序資料 |
| 逗號連接 | tags=a,b |
一根繩子要分開 | 一些 API,緊湊的 URL |
當您使用該工具建立查詢字串時,您會選擇要發出哪些查詢字串,以便輸出與接收系統期望的任何內容相符。當您解析時,工具會偵測到重複的鍵和括號表示法,並且逗號連接的值將保留為單一字串,因為只有您知道逗號是分隔符號還是資料的一部分。
為什麼加號會變成空格?
在 URL 的查詢字串中,文字空間通常被編碼為加號而不是 %20.這是繼承自的規則 application/x-www-form-urlencoded HTML 表單使用的格式,以及 WHATWG URL 標準 編碼它:解析形式編碼資料時,a + 被解碼為一個空間。所以 q=json+parser 應該解析為 json parser,toolz。dev 工具預設會執行此操作。
微妙之處在於,該規則適用於查詢元件,而不是路徑。 A + 在路徑段中是一個字面加號。有時,您的資料確實包含應保留的加號,例如電話號碼或搜尋 C++. 對於這些情況,該工具有一個開關可以關閉加號作為空格,因此加號可以在往返中倖存下來。這是通用用途的細節 網址編碼器 不會為您做出決定,因為它不知道它正在查看查詢還是路徑。
建構時,正確理解這一點也很重要。當工具對值進行編碼時,它會對保留的字元進行百分比編碼,並且預設情況下,會對表單編碼風格的空格使用加號,因此它產生的字串是瀏覽器和後端將按照您想要的方式解碼的字串。
這與完整的 URL 解析器有何不同?
查詢字串解析器和完整 URL 解析器重疊,但回答不同的問題,使用右側解析器可儲存一個步驟。 URL 解析器將完整的連結分解為其元件、方案、主機、連接埠、路徑、查詢和片段,並且當您調試請求的去向或重定向或 CORS 檢查的行為為何時,這就是您想要的奇怪。查詢字串解析器僅關注查詢並將其轉換為結構化、可編輯的 JSON,包括數組和嵌套金鑰,並且可以建立回查詢。
的 網址解析器 toolz。dev 是解剖學工具:給它一個鏈接,它向您顯示主機與來源的區別、預設端口以及路徑的各個部分。查詢字串解析器是處理參數的工具:給它相同的鏈接,它給你可以編輯的 JSON 參數,然後從你的編輯中重建查詢字串。實際上,我將它們一起使用,URL 解析器用於理解鏈接,查詢字串解析器用於更改其參數,如果我要組裝活動鏈接,我會聯繫到 utm 建設者 相反,它是一個專門用於分析標籤的查詢字串產生器。
我什麼時候才能真正做到這一點?
誠實的答案是每當 URL 所做的不僅僅是指向頁面時。我用它來調試 webhooks 和 OAuth 重定向,其中參數攜帶整個有效負載,並且一個錯誤編碼的值會破壞流程。我用它來讀取行銷連結上的追蹤參數,這樣我就可以準確地看到活動正在傳遞的內容。我用它將同事貼在聊天中的查詢字串轉換為 JSON,我可以將其放入測試夾具中,然後執行相反操作,將小物件轉換為查詢字串,以獲得快速手動請求。
一個有效的例子使回報變得具體。 OAuth 提供者使用類似的東西重新導向回您的應用程式 ?code=abc123&state=xyz789&scope=read%20write&error=. 貼到解析器中,解析為乾淨的物件: code 和 state 作為他們的字面值, scope 解碼至 read write 因為 %20 是一個空間,並且 error 作為一個空字串而不是缺少的鍵,它告訴您提供者發送了參數但將其留空。透過眼睛從原始 URL 讀取該訊息,您可能會錯過其中的編碼空間 scope 並誤讀空 error,這兩個細節正是決定您的回呼處理程序是否正確分支的細節。查看解碼後的表可以消除歧義,如果您需要重現請求,建置模式會一步將編輯後的物件變回有效的回呼 URL。
因為大部分工作涉及攜帶令牌、簽名值和追蹤識別碼的 URL,在完全在瀏覽器中運行的工具中進行操作很重要。您貼上的任何內容都不會被傳輸、記錄或存儲,並且該工具會繼續關閉網絡,因此您可以安全地檢查生產中簽署的回調 URL,而不是經過清理的副本。我提出了更廣泛的案例來保留這種工作客戶端 線上工具中的資料隱私 指南,這個解析器位於我在 中描述的其他連結和文字實用程式旁邊 web 開發人員工具包. 如果您的工作之一是將混亂的輸入轉換為乾淨的slugs 和標識符,則 Slug 產生器 是 URL 工作輸出端的天然伴侶。
常見問題
什麼是查詢字串?
查詢字串是問號後面 URL 的一部分,它攜帶參數作為鍵值對,並透過 & 符號連接,例如?q=json&頁=2。伺服器和用戶端程式碼讀取它以過濾結果、追蹤活動或傳遞狀態。每個鍵和值都經過 URL 編碼,以便空格和保留字元得以保留,而雜湊後的片段不屬於其中。
解析時如何處理重複鍵?
預設情況下,出現多次的鍵會組合成數組,因此 tags=react&tags=laravel 解析為 {"tags":["react","laravel"]}。您可以切換為僅保留第一個值或僅保留最後一個值,因為不同的後端對重複項的解析方式不同,並且您希望 JSON 與您所針對的系統相符。
標籤[]或過濾[顏色]等括號是什麼意思?
括號符號對平面查詢字串內的數組和巢狀物件進行編碼。 tags []=react&tags[]=laravel 建立一個數組,filter[color]=red&filter[size]=l 建構巢狀物件{"filter":{"color":"red","size":"l"}}。它在 PHP、Rails 和 form 庫中很常見,因此解析器將其擴展為匹配結構,您可以將其關閉以保留文字鍵。
為什麼加號變成空格?
在 URL 的查詢字串中,文字空間通常被編碼為加號,這是從 HTML 表單提交繼承的規則,因此解析器預設將 + 轉換回空格。如果您的資料包含必須保留的真實加號,例如 C++ 或電話號碼,請關閉加號作為空格選項並保留加號。
我可以從 JSON 建立查詢字串嗎?
是的。切換到建立模式並貼上鍵值對的 JSON 物件。工具百分比對每個鍵和值進行編碼,並用&符號將它們連接起來,您可以選擇陣列的編碼方式:重複鍵、空括號、索引括號或逗號分隔列表,因此輸出與接收系統期望的任何內容相符。
這與完整的 URL 解析器有什麼不同?
完整的 URL 解析器將整個 URL 分解為方案、主機、連接埠、路徑、查詢和片段。查詢字串解析器單獨關注查詢,將其轉換為包含數組和嵌套鍵的結構化可編輯 JSON,並且可以建立回查詢。使用 URL 解析器檢查鏈接,並使用此工具讀取或更改其參數。
它處理的是完整的 URL 還是僅處理查詢部分?
兩者。如果您貼上完整的 URL,解析器會刪除所有內容(包括問號)並忽略雜湊後的片段,因此您只能得到參數。如果您貼上沒有問號的裸查詢字串,則按原樣解析,這僅在複製參數時很方便。
我的 URL 發送到任何地方嗎?
否 解析、解碼和編碼在瀏覽器中均以 JavaScript 運行,因此不會傳輸、記錄或儲存任何內容。您可以在解析 URL 時查看網路選項卡或與 Internet 斷開連接來確認它,因為一旦頁面載入,工具就會保持離線工作。
使用空閒項檢查或組裝參數 查詢字串解析器. 它將 URL 解析為 JSON 並建立查詢字串,完全在瀏覽器中處理重複的鍵、括號數組和編碼。
