URL Encoder
Encode a full URL or a single nested component with the right boundary, then copy a clean result for redirects, query parameters, and callback links.
Encoded Output
Generated with encodeURIComponent-style rules.
https%3A%2F%2Fapp.aistacker.dev%2Fcallback%3Fplan%3Dpro%20plus%26from%3Dpricingよくある問題
redirect_uri を正しくエンコードするには？
リダイレクト先を一つのネストされた値として扱い、外側のURLに付加する前に「単一コンポーネント」としてエンコードします。これにより、内側の記号が外側のURLに影響を与えるのを防ぎます。
URL全体とクエリ値、どちらをエンコードすべきですか？
それが最終的にアクセスするURLなら「全体」を、別のURLのパラメータになるなら「クエリ値（コンポーネント）」を選びます。
ワークフロー
URL エンコーダー とは？
URLエンコーダーは、リダイレクトリンク、コールバックURL、またはクエリ文字列に値を付加する前に、適切な境界でエンコードを行うためのツールです。重要なのは単なるパーセントエンコードではなく、対象が「構造を維持すべきURL全体」なのか、それとも「単一の安全なコンポーネントとして扱うべき値」なのかを正しく判断することです。
この区別は、`redirect_uri`、トラッキングパラメータ、ディープリンク、署名付きURLなどを扱う際に非常に重要です。間違ったエンコードを行うと、セパレータが露出したり、ネストされたターゲットが破損したり、二重エンコードのバグを引き起こす原因となります。
URL エンコーダー の使い方
入力フィールドに完全なURL、またはネストしたい値を貼り付けます。「URL全体（Entire URL）」を選択すると、`/` `?` `&` `=` などのセパレータを維持したままエンコードします。「単一コンポーネント（Single Component）」を選択すると、値全体が一つのエンコードされたユニットとなり、`redirect_uri` やクエリ値として安全に挿入できる形式になります。
結果を確認し、ヒントや警告パネルを見て、既にエンコード済みの値やネストされたURLを誤って二重にエンコードしていないか確認してください。
使用例
入力値:
https://app.aistacker.dev/callback?plan=pro plus&from=pricing
URL全体 出力:
https://app.aistacker.dev/callback?plan=pro%20plus&from=pricing
単一コンポーネント 出力:
https%3A%2F%2Fapp.aistacker.dev%2Fcallback%3Fplan%3Dpro%20plus%26from%3Dpricing活用例
1. OAuthやログインURLに付加する `redirect_uri` をエンコードする。
2. スペース、`&`、`=` を含むクエリパラメータの値をエンコードする。
3. コールバック先がURL全体としてエンコードされているか、コンポーネントとしてされているかを確認する。
4. 本番環境のバグを防ぐために `encodeURI` と `encodeURIComponent` の出力の違いを比較する。
よくある質問
URL全体と単一コンポーネント、どちらでエンコードすべきですか？
文字列を読み取り可能なURLとして維持し、自身のセパレータを保持したい場合は「URL全体」を使用します。その値を別のURLの一部（パラメータ値など）として埋め込みたい場合は「単一コンポーネント」を使用します。
なぜ redirect_uri にはコンポーネントエンコードが必要なのですか？
リダイレクト先は通常、別のURLのクエリ文字列の中に配置されるためです。その中の `?` `&` `=` がそのまま残っていると、外側のURLがそれらを自身のパラメータとして誤認してしまいます。
「過剰なエンコード（Over-encoding）」とは何ですか？
既にパーセントエンコードされている値に対して、さらにエンコードを重ねてしまうことです。`%25` というパターンが繰り返されたり、URLが正しく機能しなくなったりします。