URL エンコード/デコード

URL encode/decode とコンポーネント変換

URL encode/decode とコンポーネント変換
?
入力
出力

ツール説明

URL エンコード/デコードについて

URL Encoder/Decoder は、URL で安全に使えない文字や予約文字をパーセントエンコードし、エンコード済みの文字列を読みやすいテキストへ戻します。

クエリパラメータ、英語以外のパス、コールバック URL、ログからコピーした URL 断片の確認に使え、変換はすべてブラウザー内で行われます。

URL Encoder/Decoder の使い方

  1. 完全な URL、クエリパラメータの値、またはエンコードしたいテキストを貼り付けます。
  2. 「Encode」を押し、空白、英語以外の文字、記号を安全なパーセントエンコードへ変換します。
  3. 「Decode」を押し、%E4%B8%AD%E6%96%87 のような文字列を元の読みやすいテキストへ戻します。
  4. 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 へ直接入れず、プロトコルの許可リストと出力エスケープを適用してください。