URLセーフについて理解する

目次

1. URL Safeとは
2. URL Safeにする方法

1. URL Safeとは

URLにおいて特別な意味のある文字がある状態で適当にサーバに与えると意図しないことが起きたりしますし危険です。

What does "URL-safe" mean?

This, combined with the RFC not specifying some other meaning explicitly, suggests it means simply "safe to put in a URL" (e.g., doesn't have unencoded / or ? or & characters, etc.).

URLに入れても安全

• エンコードされていない / や ? 、& 文字などがない
  これらはURLにおいてGETパラメータのセパレータとして機能します。
  • / forward slash,ウェブサーバ上のリソースの階層的なパスの区切り、プロトコルの区切る為に使用される
  • ? question mark,クエリー可能なオブジェクトのURIと、そのオブジェクトに対するクエリーを表現するために使用される単語のセットとの境界
  • & ampersand,クエリー文字列を区切る為に使用される

その他URL Safeではないもの

• 予約語
  dollar ("$")
  plus sign ("+")
  comma (",")
  colon (":")
  semi-colon (";")
  equals ("=")
  'At' symbol ("@")
  pound ("#").

• 一般的に安全でないと考えられているもの
  space (" ")
  less than and greater than ("<>")
  open and close brackets ("[]")
  open and close braces ("{}")
  pipe ("|")
  backslash ("")
  caret ("^")
  percent ("%")

2. URL Safeにする方法

HTML URL Encoding Reference

• 先ほど述べたURL Safeではない文字を"%"に続く2桁の16進数で置き換えます。
• 有効なASCIIフォーマットに変換します。
• URLにスペースを含めることはできません。
• URLエンコーディングは通常、スペースをプラス（+）記号または%20に置き換えます。

JavaScriptだとencodeURIComponentがあります。
以下のようにurlが変換されているのが分かります。

const rawUrl = 'https://qiita.com/drafts/sample/edit';
const encodedUrl = encodeURIComponent(rawUrl);
encodedUrl;
//'https%3A%2F%2Fqiita.com%2Fdrafts%2Fsample%2Fedit'

参考

• URL Safeとは
• What is the meaning of ? (question mark) in a URL string? [duplicate]
• Basic Syntax
• What do "?" and "#" mean in a URL?
• What are the safe characters for making URLs?
  -ASCII文字

参考になる記事を書いて下さった皆様に感謝致します!