WEB - 關於URL編碼與常用編碼方法

---

目錄

• 主要參考：
• URL為何需要編碼
• URL如何進行編碼
• JavaScript中encodeURI()與encodeURIComponent()的區別（escape()不推薦使用）
• 特例：表單提交中的空格編碼問題

---

主要參考：

• URL編碼與解碼 - 大氣象 - 博客園
• 空格URL編碼的正確使用姿勢 - 沐風 - 開源中國

---

URL為何需要編碼

• URL采用ASCII編碼，則其他非ASCII字符（如中文等）將無法表示，需要進行編碼；RFC3986文檔規定了允許出現在URL中的所有可打印字符（不一定安全）：

  • 英文字符（a-zA-Z）；
  • 數字（0-9）；
  • -_.~ 4個特殊字符；
  • 保留字符：!*'();😡&=+$,/?#[]

• 一些不安全字符，如果出現在URL中，可能引起解析歧義，因此需要編碼：

  • 空格：在URL傳輸或用戶排版過程中，都可能直接增減空格，因此需對有意義的空格進行編碼；
  • 引號以及尖括號：常用於在普通文本中分隔URL，獨立使用時需編碼；
  • #：常用於表示書簽或錨點，獨立使用時需編碼；
  • %：作為對不安全字符進行編碼時使用的特殊字符，獨立使用時需要編碼；
  • {}|^[]`~：某些網關或傳輸代理可能會有自定義處理方式，為避免混亂需提前編碼

URL如何進行編碼

• URL編碼的原則：使用安全字符（沒有特殊用戶或特殊意義的可打印字符）來表示那些不安全字符；

• URL編碼也被稱為百分號編碼，使用百分號%接兩個十六進制字符代表一個字節。推薦使用UTF-8編碼字符后再對每個字節添加百分號處理，例如：

  • “中文”兩個字符經過UTF-8編碼后分別為0xE4B8AD、0xE69687；
  • 再經過URL編碼后得到%E4%B8%AD%E6%96%87

JavaScript中encodeURI()與encodeURIComponent()的區別（escape()不推薦使用）

• 主要區別： 安全字符不同（即不對這些字符進行編碼）

  encodeURI（82個安全字符） > encodeURIComponent（71個安全字符）

• 應用場景：

  • encodeURI()：用於對完整URI進行編碼，安全字符中包含了用於分隔URI各組件的保留字符，不會進行編碼；
  • encodeURIComponent()：用於對URI中的單個組件進行編碼，如果用於編碼整個URI，會導致組件混亂

• 解碼方法：

  • encodeURI() -> decodeURI()；
  • encodeURIComponent() -> decodeURIComponent()

特例：表單提交中的空格編碼問題

• 直觀表現：

  • 正常使用上文URL編碼時，空格被編碼為%20；
  • POST表單提交時，空格被編碼為“+”，而“+”本身被編碼為%2B

• 原因分析：

  • 表單編碼采用application/x-www-form-urlencoded，是按照HTML4規范將空格編碼為“+”；
  • 上文所述為RFC-3986采用的統一編碼方式

---