クエリ文字列に1 時間1 回失いました サードパーティのWebフックが送信していました filter[status]=open&filter[assignee]=me、ハンドラーが読んでいた filter フラットな文字列として、そしてなぜすべてのリクエストがフィルターなしで通過したのかを解明できませんでした 生のURLをクエリ文字列パーサーに貼り付けて、それがネストされたオブジェクトに解決されたのを見た瞬間、バグは明らかでした: 送信者はブラケット表記を使用し、私のパーサーは使用する方法をカバーしています クエリー 文字列 パーサー Toolz.dev では、クエリ文字列の実際のトリッキーな部分は何か、また同じキーが 2 つの異なる方法でエンコードされている理由が、静かに統合を中断する可能性があります。
tl;dr: クエリ文字列は、疑問符の後の URL のうち、パラメータをキーと値のペアとして運ぶ部分です。 クエリ文字列パーサーは、それを構造化 JSON に変換し、パーセントエンコーディングをデコードし、繰り返されるキーとブラケット配列を処理し、正しくエンコードされたクエリ文字列を JSON からビルドバックできます クエリー 文字列 パーサー ブラウザで両方向を実行するため、ページを離れることなく、乱雑な URL を検査したり、クリーンな URL を組み立てたりできます。
クエリ文字列とは何ですか?
クエリ文字列は、URLの最初の疑問符の後に始まり、フラグメント、ハッシュの後の部分で終わるセクションです。 としてパラメータを運びます key=value アンパサンドで結合されたペア ?q=json&page=2 2 つのパラメータを渡します。 servers と client code read those to filter a search, track a campaign, paginate a list, or carry state between pages. そのコンポーネントで合法であるものと合法ではないものの一般的なルールは、から来る RFC 3986、URI標準、およびブラウザがフォームスタイルのパラメーターに対して従う特定のルールは、から来る 何という URL 標準。
落とし穴は、RFC 3986 はクエリコンポーネントの構文を定義しているが、その意味を定義していないということです。 どの文字が許可されているか、どのようにパーセントエンコードする必要があるかについては述べていますが、どのようにすればよいかについては何も述べていません key=value ペアはデータ構造にマッピングされます。その解釈は HTML フォームの送信から継承されており、プラットフォームが異なれば互換性のない方法で拡張されました。これが、同じクエリ文字列が PHP バックエンド、Rails コントローラ、JavaScript フロントエンドに対してわずかに異なる意味を持つ理由であり、パーサーがその規約を明示する必要がある理由です。
クエリ文字列内のすべてのキーと値は、予約文字が生き残るように URL エンコードされます。スペースになります %20 またはプラス記号、値内のアンパサンドになります %26 したがって、セパレータと間違われることはなく、スラッシュになります %2F.解析とはペアを分割してから各辺をデコードすること、構築とは各辺をエンコードしてペアを結合すること、どちらの方向でもエンコードを間違えると値がサイレントに壊れる。
クエリ文字列パーサーは実際に何をしますか?
パーサーはURLまたは裸のクエリ文字列を取り出し 構造化された読み取り可能なデータに変えます 途中で疑問符まで全てを剥ぎ取り ハッシュ後の断片を無視し ペアを分割し 各キーと値をデコードし 繰り返されるキーと括弧で囲まれたキーの 出力は読み取りとコピーが可能な JSON オブジェクトに デコードされたすべてのペアのフラットテーブルを追加して 重複して空の値が明らかなようにします。
Toolz.dev では、ツールは 2 方向に実行されます。解析モードでは、完全な URL またはそのクエリ文字列のみを貼り付けて、JSON とパラメータ テーブルを取得します。ビルド モードでは、配列の表現方法を選択して、JSON オブジェクトを貼り付けて、正しくエンコードされたクエリ文字列を取得します。サンプルをロードすると、フラグメント、繰り返しスタイルの配列、エンコードされたスペースを含む実際の URL がクリーンな JSON に解決され、再構築されるのを見ることができます。
URLを目視するのではなく専用のパーサーを使う理由は、クエリ文字列がその構造を非表示にするためである。 エンコードされた文字、繰り返しキー、ブラケット表記を含む長いURLは、スキャンすることで正しく読み取ることはほぼ不可能であり、最も読みにくい部分であるエンコーディングと重複は、まさにバグを引き起こす部分である。 JSONの横にあるデコードされたテーブルを見ると、推測は削除される。
繰り返しキーはどのように処理されますか?
のように、同じキーがクエリ文字列に合法的に複数回出現する可能性があります tags=react&tags=laravelと、それを解釈する唯一の正しい方法はない、これが多くの混乱の根源である。システムが異なれば重複の解決方法も異なるため、パーサーは選択させる必要がある。
最も一般的な規則、そして Toolz.dev ツールのデフォルトは、繰り返されるキーを配列に収集することです tags=react&tags=laravel なる {"tags":["react","laravel"]}。 これは、browser's の所有方法と一致します URLSearchParams.getAll 値とほとんどの最新のバックエンドの動作を公開します。しかし、一部のフレームワークは最初の出現のみを保持し、一部のフレームワークは最後の出現のみを保持するため、ツールは keep-first および keep-last オプションも提供します。統合をデバッグしているとき、URL を生成または消費したシステムに parser's の動作を照合することが、JSON を意味のあるものにします。
この曖昧さは学術的なものではありません。 HTTPパラメータ汚染と呼ばれる古典的なセキュリティと正確性の問題は、リクエストパス内の2 つのシステムが解決できるからこそ存在します 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 |
1 つの文字列を分割します | 一部の API、コンパクトな URL |
ツールを使用してクエリ文字列を構築すると、これらのうちどれを放出するかを選択するため、出力は受信システムが期待するものと一致します。解析すると、ツールはキーとブラケット表記を繰り返すことを検出し、カンマが区切り文字であるかデータの一部であるかだけを知っているため、カンマ結合値は単一の文字列として残ります。
プラス記号がスペースに変わるのはなぜですか?
URL のクエリ文字列では、リテラル空間がプラス記号としてエンコードされることがよくあります %20。 から継承されたルールである application/x-www-form-urlencoded HTML フォームが使用する形式と 何という URL 標準 それを成文化します。フォームエンコードされたデータを解析するとき、a + は空間にデコードされます. ですから. q=json+parser に解析する必要があります json parserと設定し、 Toolz.dev ツールはデフォルトでこれを行います。
微妙な点は、このルールがパスではなくクエリ コンポーネントに適用されることです。 A + パスセグメントでは、リテラルプラスです そして時折、あなたのデータは、電話番号や検索など、保存されるべきプラス記号を本物に含まれています C++.それらの場合ツールはplus-as-spaceをオフにするスイッチを持っているので、プラスは往復を生き残る これは汎用的な種類の詳細です URLエンコーダ クエリを見ているのかパスを見ているのかわからないため、あなたに代わって決定することはありません。
これを正しく行うことは、構築する際にも重要です。ツールが値をエンコードする場合、予約文字をパーセントエンコードし、デフォルトではフォームエンコードスタイルのスペースにプラスを使用するため、ツールが生成する文字列は、ブラウザーとバックエンドが意図したとおりにデコードする文字列になります。
これはフル URL パーサーとどう違うのですか?
クエリ文字列パーサーとフル URL パーサーは重複していますが、異なる質問に答え、適切なものを使用するとステップが保存されます。 URL パーサーは、コンポーネント、スキーム、ホスト、ポート、パス、クエリ、およびフラグメントへの完全なリンクを切断します。これは、リクエストの移動先や、リダイレクトや CORS チェックが奇妙な動作をする理由をデバッグするときに必要なものです。クエリ文字列パーサーはクエリのみに焦点を当て、それを配列やネストされたキーを含む構造化された編集可能な JSON に変換し、クエリをビルドバックできます。
ザ・ URL パーサー on Toolz.dev is the tool for anatomy: give it a link and it shows you the host versus origin distinction, the default port, and the pieces of the path.クエリ文字列パーサーはパラメータを操作するためのツールです:同じリンクを与え、編集できるJSONとしてパラメータを与え、その後、編集からクエリ文字列を再構築します 実際には、私はそれらを一緒に使用します, リンクを理解するためのURLパーサーとそのパラメータを変更するためのクエリ文字列パーサー, そして、私はキャンペーンリンクを組み立てている場合、私はのために到達します UTM ビルダー 代わりに、これは分析タグに特化したクエリ文字列ビルダーです。
実際にこれに手を伸ばすのはいつですか?
正直な答えは、URLがページを指す以上のことをしているときはいつでもです。 私は、パラメータがペイロード全体を運び、誤ってエンコードされた1 つの値がフローを壊すWebhookとOAuthリダイレクトをデバッグするために使用します。 私は、キャンペーンが通過していることを正確に確認できるように、マーケティングリンク上の追跡パラメータを読み取るために使用します。 私は、チャットに貼り付けられた同僚がクエリ文字列をJSONに変換するために使用します 私はテストフィクスチャにドロップすることができます、そして、その逆を行うために、小さなオブジェクトをクエリ文字列に変換して、簡単な手動リクエストを行います。
うまくいった例を見れば、ペイオフが具体的になります。 OAuth プロバイダーは、次のようなものでアプリにリダイレクトし直します ?code=abc123&state=xyz789&scope=read%20write&error=。 pasted into the parser, that resolves to a clean object: (パーサに貼り付け、クリーンなオブジェクトに解決します): code あんど state それらのリテラル値として、 scope に復号化 read write なぜなら %20 は空間であり、かつ error 欠落しているキーではなく空の文字列として、プロバイダーがパラメータを送信したが空白のままにしたことを示します。 raw URL から目でそれを読み取る場合、エンコードされたスペースが見逃される可能性があります scope そして空っぽのものを読み間違えた error、そして、それらの両方が、コールバックハンドラが正しく分岐するかどうかを決定する詳細です。 decodedテーブルを見ることで曖昧さが解消され、その後リクエストを再現する必要がある場合は、ビルドモードを使用すると、編集したオブジェクトが1 つのステップで有効なコールバックURLに戻ります。
その作業の多くは、トークン、署名付き値、および追跡識別子を運ぶURLを含むため、ブラウザで完全に実行されるツールでそれを行うことは重要です。 貼り付けるものは送信、ログ、または保存されず、ツールはネットワークとの作業を継続するため、サニタイズされたコピーではなく、実稼働環境から署名付きコールバックURLを安全に検査できるように、この種の作業をクライアント側に保つためのより広範な主張をします オンライン ツールのデータ プライバシー ガイド。このパーサーは、で説明されている他のリンクおよびテキスト ユーティリティと並んでいます Web 開発者ツールキット。ジョブの一部が、乱雑な入力をクリーンな slugs と識別子に変換している場合、 Slug ジェネレーター URL 作業の出力側の自然な相棒です。
よくある質問
クエリ文字列とは何ですか?
クエリ文字列は、疑問符の後の URL の部分で、?q=json&page=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、フォーム ライブラリでは一般的であるため、パーサーはそれをマッチング構造に展開し、それをオフにしてリテラル キーを保持できます。
プラス記号が空間になるのはなぜですか?
URL のクエリ文字列では、リテラル空間がプラス記号としてエンコードされることがよくあります。これは、HTML フォームの送信から継承されたルールであるため、パーサーはデフォルトで + を空間に変換します。 C++ や電話番号など、保持する必要がある実際のプラス記号がデータに含まれている場合は、plus-as-space オプションをオフにして、プラスが保持されます。
JSONからクエリ文字列を構築できますか?
はい。 build mode に切り替えて、key-value ペアの JSON オブジェクトを貼り付けます。ツールは各キーと値をパーセントエンコードしてアンパサンドで結合し、配列のエンコード方法を選択できます。つまり、繰り返しキー、空の括弧、インデックス付き括弧、またはカンマ区切りリストです。そのため、出力は受信システムが期待するものと一致します。
これとフルURLパーサの違いは何ですか?
完全な URL パーサーは URL 全体をスキーム、ホスト、ポート、パス、クエリ、およびフラグメントに分割します。クエリ文字列パーサーはクエリのみに焦点を当て、配列やネストされたキーを含む構造化された編集可能な JSON に変換し、クエリをビルドバックできます。 URL パーサーを使用してリンクを検査し、このツールを使用してパラメータを読み取りまたは変更します。
完全な URL を処理しますか、それともクエリ部分のみを処理しますか?
両方です。 full URLを貼り付けると、パーサーは疑問符まで全てをドロップし、ハッシュの後のフラグメントを無視するので、パラメーターだけを取得します。 疑問符のない裸のクエリ文字列を貼り付けると、そのまま解析されるため、パラメーターのみをコピーしたときに便利です。
私のURLはどこかに送信されますか?
いいえ 解析、デコード、エンコードはすべてブラウザで JavaScript として実行されるため、何も送信、ログ記録、保存されません。 URL を解析しているときにネットワーク タブを表示するか、インターネットから切断することで確認できます。これは、ページが読み込まれるとツールがオフラインで動作し続けるためです。
無料のパラメータを検査または組み立てます クエリー 文字列 パーサー。 URL を JSON に解析し、クエリ文字列をビルドバックし、繰り返しキー、ブラケット配列、エンコーディングを完全にブラウザで処理します。
