URLをブラウザ内で分解する
長いURLを入力すると、URLへアクセスせず、構成要素、Path Segment、Query ParameterのEncoded値とDecoded値を確認できます。
URLを解析する結論：Queryを順序付きのPairとして表示し、EncodedとDecodedを比較する
https://example.com/search?q=%E6%9D%B1%E4%BA%AC&page=2では、q=東京、page=2として確認します。Objectへ単純変換せず、同名Keyが複数ある場合も各行を残します。
Decodedだけでは元の%XXや+が見えず、Encodedだけでは実際の文字が読みにくくなります。両方を同じ行で確認してください。
入力URLを残したまま、正規化URLと各Componentを比較し、QueryとFragmentを別々に確認してください。
Query Parameterを壊さず一覧化する
Queryは&でParameterを区切り、最初の=をKeyとValueの境界として扱います。ただしValue内の&や=はPercent-Encodingされている必要があります。
現行ツールはEncoded Key・ValueとDecoded Key・Valueを入力順で表示します。専用のSortや削除は行わず、Original Orderを保持します。
| 確認対象 | 見る内容 | 判断 |
|---|---|---|
| Raw Query | ?以降から#前 | 元表現を保持 |
| Key / Value | 最初の= | 行単位で確認 |
| Decode | %XXと+ | 表示差を比較 |
| 重複 | 同名Keyの全行 | 上書きしない |
URL解析ツールで確認する手順
- 完成URLを入力します。
- 構成要素の「クエリ」でRaw Queryを確認します。
- 一覧のEncoded Key・ValueとDecoded Key・Valueを行ごとに比較します。
- 必要な行のKey・Value、またはQuery JSONをCopyします。
Query JSONも配列形式のため、同名Keyの順序と複数Valueを保持できます。
結果が想定と違う場合の切り分け
期待するParameterが見えない場合は、?、&、=、#の順序とValueのEncodingを確認します。
Value内の&が未Encodeなら別Parameterに分割されます。#以降に置かれた文字列はFragmentであり、Query一覧へは入りません。
- ?がQuery開始位置にあるか
- &がValue内に残っていないか
- #より前にParameterがあるか
- 同名Keyを1件だけ見ていないか
現行のURL解析ツールで確認できる範囲
DevelopToolsは入力URLへアクセスせず、ブラウザ標準のURLクラスで文字列だけを解析します。絶対URLと、基準URLを指定した相対URLに対応し、入力URL・正規化URL・protocol・origin・username・host・hostname・port・pathname・search・hash・HTTPS判定を分けて表示します。パス区切りとクエリパラメーターは入力順を保ち、Encoded値とDecoded値を並べて確認できます。
| 確認対象 | 現行ツールの動作 |
|---|---|
| URL構成要素 | 入力URLと正規化URL、Protocol、Origin、Host、Hostname、Port、Path、Query、Fragmentを表示 |
| 相対URL | 基準URLを入力した場合にURLクラスで絶対URLへ解決 |
| Path | Slash単位のSegmentをEncoded・Decodedの両方で表示 |
| Query | 順序、重複Key、空Valueを失わず、Encoded Key・ValueとDecoded Key・Valueを表示 |
| 安全上の注意 | HTTP、認証情報、Active Scheme、非標準Port、Punycode、長いURL、機密情報らしいKey等を補助表示 |
| 出力 | 正規化URL、Query JSON、解析結果JSON、個別の値をClipboardへCopy |
UTM専用分類、Nested URLの再帰解析、Parameter削除、URL到達確認、HTTP Status、Redirect追跡、Downloadは行いません。UTMやredirect_uriは通常のParameter行として確認し、必要なら値をCopyしてURL Encoder / DecoderまたはURL解析ツールへ段階的に入力します。
URL解析と安全性判定を混同しない
URLをScheme・Host・Path・Queryへ分解できても、そのWebsiteが安全か、PhishingやMalwareではないか、接続先が存在するかは判断できません。現行ツールはconnect-srcを無効にし、入力したURLへHTTP Request、DNS確認、Redirect追跡を行いません。
URLにはAccess Token、OAuth Code、JWT、Email、User ID、Internal Host、検索語が含まれる場合があります。URLはBrowser History、Access Log、Referer、Analytics、画面共有へ残り得るため、実データを記事のSampleへ貼らず、共有前に値を削除またはDummyへ置き換えます。入力URLは保存せず、LocalStorageへ保存するのはTheme設定だけです。
URL解析は通信や安全確認ではありません。SecretをURLへ入れてよい根拠にもならないため、公開前にOriginal URLとCopy内容を目視してください。
URLの仕様とWeb APIは一次資料で確認する
BrowserのURL解析・正規化・SerializeはWHATWG URL Standard、一般的なURI構文はRFC 3986、JavaScriptのURLとURLSearchParamsはMDNを基準に確認します。UTM ParameterはGoogle Analytics公式資料を優先し、個別Frameworkの挙動はその公式Documentと実際の受信値で検証します。
具体例：検索URLの3件のParameterを一覧化する
https://example.com/search?q=%E6%9D%B1%E4%BA%AC&page=2&sort=dateを解析します。
q、page、sortの3行が入力順に表示され、qのEncoded ValueとDecoded Value「東京」を比較できます。
- URLを解析する
- Queryが3件と確認する
- qのEncodedとDecodedを比べる
- pageとsortをCopyする
本番Tokenや個人情報を含むURLではなく、Dummy値で操作を確認してください。
よくある質問
- URLを解析するとリンク先へアクセスしますか？
- いいえ。入力文字列をブラウザ標準のURLクラスで分解するだけで、対象URLへのFetch、DNS確認、Redirect追跡は行いません。
- URL解析ツールでWebsiteの安全性も確認できますか？
- できません。Schemeや機密情報らしいKey等の注意は表示しますが、Phishing、Malware、証明書、接続先の正当性を判定する機能ではありません。