ツール説明
URL エンコード/デコードについて
URL Encoder/Decoder は、URL で安全に使えない文字や予約文字をパーセントエンコードし、エンコード済みの文字列を読みやすいテキストへ戻します。
クエリパラメータ、英語以外のパス、コールバック URL、ログからコピーした URL 断片の確認に使え、変換はすべてブラウザー内で行われます。
URL Encoder/Decoder の使い方
- 完全な URL、クエリパラメータの値、またはエンコードしたいテキストを貼り付けます。
- 「Encode」を押し、空白、英語以外の文字、記号を安全なパーセントエンコードへ変換します。
- 「Decode」を押し、%E4%B8%AD%E6%96%87 のような文字列を元の読みやすいテキストへ戻します。
- 1 つのパラメータだけを処理する場合は、クエリ文字列全体ではなく値をエンコードし、& と = の構造を残します。
よくある利用場面
- 検索語、コールバック URL、リダイレクト用パラメータを URL に入れる前にエンコードし、&、?、# で値が途切れないようにする。
- API ログにあるパーセントエンコード済みのパスやクエリ文字列を、読みやすいテキストへデコードする。
- OAuth の redirect_uri、Webhook のコールバック、共有リンクにある二重エンコードを調べる。
- フロントエンドの encodeURIComponent 出力と、バックエンドが実際に受け取った値を比較する。
パーセントエンコード、クエリパラメータ、よくある落とし穴
URL の ?、&、=、#、/ などには構造上の意味があります。パーセントエンコードはバイトを %HH として表し、これらの文字を URL 構造ではなくデータとして送れるようにします。
- 空白: 通常は %20 を使います。フォームエンコードでは + になることもあります。
- 英語以外の文字と絵文字: まず UTF-8 のバイト列へ変換され、その後パーセント表記になります。
- encodeURI と encodeURIComponent: 前者は URL の構造文字を残し、後者は単一のパラメータ値に適しています。
- 二重エンコード: %25E4 は、既存のパーセント記号がもう一度エンコードされた可能性を示します。
URL エンコード/デコードのよくある質問
- URL 全体と 1 つのパラメータのどちらをエンコードすべきですか?
- 多くの場合はパラメータ値だけをエンコードします。URL 全体を処理すると :、/、?、& などの構造文字までエスケープされ、正しく解析されないことがあります。
- 空白が %20 と + のどちらにもなるのはなぜですか?
- %20 は一般的なパーセントエンコードです。+ は application/x-www-form-urlencoded のフォーム規則でよく使われます。
- デコード後もパーセント記号が残るのはなぜですか?
- 二重エンコードされているか、元の値にパーセント記号そのものが含まれている可能性があります。二重エンコードだと確認できた場合だけ、もう一度デコードしてください。
- URL-safe Base64 にも URL エンコードは必要ですか?
- + と / を使わないため必要性は下がります。ただし、クエリ文字列へ入れる前に = のパディングやほかの特殊文字を確認してください。
- 入力はアップロードされますか?
- いいえ。エンコードとデコードはブラウザー内で実行され、入力は wetool.site へ送信されません。
URL エンコードと Base64 の違い
URL エンコードは、文字を URL 内で安全に扱うためのものです。Base64 はバイト列をテキストで表すためのものです。トークン、画像、バイナリデータでは両方が現れることがありますが、目的は異なります。
encodeURI と encodeURIComponent の対照
URL エンコードの多くの不具合は、「完全な URL」と「単一のパラメータ値」を同じように扱うことから起きます。
- 完全な URL: encodeURI は : / ? & = # を構造文字として残すため、すでに組み立てたリンクに向きます。
- パラメータ値: encodeURIComponent は &、=、?、# をエンコードするため、search、redirect_uri、callback などの値に向きます。
- フォーム規則: application/x-www-form-urlencoded では空白が + になることがあり、一般的なパーセントエンコードでは通常 %20 を使います。
URL エンコードのデバッグチェック
バックエンドが誤った URL パラメータを受け取る場合は、ブラウザー、フロントエンド、ゲートウェイ、バックエンドの各層で何回エンコードまたはデコードされたか確認します。
- %25 は既存のパーセント記号がもう一度エンコードされた可能性を示すため、二重エンコードを疑う手掛かりになります。
- redirect_uri が独自のクエリ文字列を含む場合、内側の ?、&、= はデータとしてエンコードする必要があります。
- デコード済みのユーザー入力を HTML やリダイレクト URL へ直接入れず、プロトコルの許可リストと出力エスケープを適用してください。