RevealTheme logo

URLエンコーダー&デコーダー

テキストをURLセーフなエンコード(パーセントエンコーディング)に変換したり、その逆を行ったりします。クエリ文字列、リダイレクト、OAuthフローに役立ちます。

URLエンコーディングとは何か、そしてどんなときに必要か?

URLエンコーディング(「パーセントエンコーディング」とも呼ばれ、RFC 3986で規定されています)とは、URL内で特別な意味を持つ文字、あるいはそもそもURLでは安全でない文字を、16進数のエスケープシーケンス「%XX」に変換する処理のことです。URL仕様では、構造上の意味を持つ特定の文字が予約されています。「?」はクエリ文字列を開始し、「#」はフラグメントを開始し、「&」はクエリパラメータを区切り、「/」はパスのセグメントを区切る、といった具合です。ユーザー入力にこれらの文字が含まれていて、それをそのままURLに埋め込むと、パーサーが誤って解釈してしまいます。URLエンコーディングは、予約文字や安全でない文字を、それぞれ「%」を先頭に付けたバイトの16進数表現に置き換えることで、これを防ぎます。スペースは%20に、「&」は%26に、「=」は%3Dになります。非ASCII文字(キリル文字、中国語、絵文字)はマルチバイトのUTF-8シーケンスに変換され、各バイトがパーセントエンコードされます。リンクをクリックしたときはブラウザが自動的に処理してくれますが、コードでURLを構築するとき、すなわち検索クエリ、リダイレクト先、OAuthのコールバック、Webhookの署名などを作成するときには、ユーザーから提供された値を必ず先にエンコードする必要があります。このツールは、あなたのJavaScriptコードが使うのと同じencodeURIComponent / decodeURIComponent関数を使用しているため、動作は本番環境と完全に一致します。

よくある活用例

  • 検索URLに追加する前に、ユーザーの検索語をエンコードする(?q=ユーザー+入力)。

  • OAuthのredirect_uriパラメータを認可サーバーへ安全に渡す。

  • クエリ文字列にエンコードされたJSONペイロードを含むWebhook URLを構築する。

  • 「returnTo」URLをエンコードして、他のURLを経由しても壊れないようにする。

  • フォーム送信後にアドレスバーに表示されるエンコードされた値をデコードする。

  • 不正な形式のURLがどのように解析されるかをテストする。特殊文字をエンコードして、何が起こるかを観察する。

よくある質問

いつURLをエンコードすべきですか?
ユーザーから提供された値をURLに入れる前には、クエリパラメータ、パスのセグメント、フラグメントのいずれであっても、必ずエンコードしてください。エンコードを怠ることは、見つけにくいバグの最も一般的な原因の一つです。値「猫 & 犬」は、「猫%20%26%20犬」とエンコードされるまでクエリ文字列を壊してしまいます。
encodeURIとencodeURIComponentの違いは何ですか?
encodeURIはURL全体を対象とします。「/」「?」「&」「=」のような構造上の文字は、URL内で意味を持つためそのまま残します。encodeURIComponentはURLの一部分(クエリの値、パスのセグメント)を対象とし、英数字以外のすべてをエンコードします。個々のクエリの値にはencodeURIComponentを使ってください。ユーザーから提供されたクエリの値にencodeURIを使ってはいけません(「&」がエスケープされず、クエリ文字列が壊れてしまいます)。
URLセーフなBase64とURLエンコーディングの違いは何ですか?
これらは別の概念です。URLエンコーディング(このツール)は、特殊文字を文字単位で置き換えます。URLセーフなBase64は、Base64の一種で、「+」と「/」の代わりに「-」と「_」を使うため、追加のエンコードなしで結果がすでにURLセーフになっています。
なぜ「+」が空白としてデコードされることがあるのですか?
application/x-www-form-urlencoded(フォーム送信)では、「+」は空白の省略表記です。ほとんどのデコーダーはこれを維持します。最新のURI解析では、「%20」が空白の正しいエンコードです。decodeURIComponentは「+」をそのままリテラルの「+」として扱います。「+」を空白に変換するには、decodeURIまたはフォーム用のデコーダーを使ってください。
非ASCII文字はどのようにエンコードされますか?
まずUTF-8のバイト列に変換され、次に各バイトがパーセントエンコードされます。そのため「café」は「caf%C3%A9」になります。「é」は2バイトのUTF-8(0xC3 0xA9)です。このツールはUTF-8を正しく処理します。一部の古いツールはLatin-1を使ってエンコードするため、異なる出力になります。
URLエンコーディングはHTMLエンティティのエンコーディングと同じですか?
いいえ。URLエンコーディング(%XX)は、URL用に文字をエスケープします。HTMLエンティティのエンコーディング(&、<)は、HTMLマークアップ用に文字をエスケープします。コンテキストが異なり、一方のコンテキストでもう一方のエンコーディングを行うことは、よくあるXSSのバグです。

関連ツール