常見編碼方式比較：Base64、URL Encoding、HTML Entities
在 Web 開發中，「編碼」是一個經常出現的概念。但不同的編碼方式有著截然不同的目的和使用場景。本文將比較三種最常見的編碼方式：Base64、URL Encoding 和 HTML Entities。
三種編碼方式概覽
| 編碼方式 | 主要目的 | 輸入 | 輸出 |
|---|---|---|---|
| Base64 | 將二進位轉為文字 | 任意二進位資料 | A-Z, a-z, 0-9, +, / |
| URL Encoding | 在 URL 中安全傳輸 | 文字字串 | %XX 格式 |
| HTML Entities | 在 HTML 中安全顯示 | 特殊字元 | &name; 或 &#num; |
Base64 編碼
Base64 將二進位資料轉換為由 64 個可列印 ASCII 字元組成的字串。它的主要用途是在只能處理文字的環境中傳輸二進位資料。
- 典型場景：電子郵件附件、Data URI、JWT token
- 大小影響：增加約 33%
- 可逆性：完全可逆，無損編碼
URL Encoding（百分號編碼）
URL Encoding（也稱為 Percent-Encoding）將 URL 中的特殊字元轉換為 %XX 格式，其中 XX 是字元的十六進位 ASCII 值。這是由 RFC 3986 定義的標準。
- 典型場景：查詢參數、表單提交、URL 中的特殊字元
- 需要編碼的字元：空格、&、=、?、#、中文等
- 安全字元：A-Z, a-z, 0-9, -, _, ., ~ 不需要編碼
HTML Entities（HTML 實體）
HTML Entities 用來在 HTML 中表示特殊字元，防止瀏覽器將其解析為 HTML 標記。由 W3C 的 HTML 規範定義。
- 典型場景：防止 XSS 攻擊、顯示 HTML 特殊字元
- 常見實體：
<（<）、>（>）、&（&）、"（"） - 數字實體：
<（<）、<（< 十六進位）
詳細比較
| 特性 | Base64 | URL Encoding | HTML Entities |
|---|---|---|---|
| 標準 | RFC 4648 | RFC 3986 | W3C HTML Spec |
| 處理對象 | 二進位資料 | URL 特殊字元 | HTML 特殊字元 |
| 大小變化 | 增加 ~33% | 每個字元最多 3 倍 | 每個字元最多 8 倍 |
| 安全用途 | 否（僅編碼） | 防止 URL 解析錯誤 | 防止 XSS 攻擊 |
| JavaScript API | btoa()/atob() | encodeURIComponent() | 手動或 DOM API |
關鍵區別：三種編碼方式的目的完全不同。Base64 處理二進位轉文字，URL Encoding 處理 URL 安全性，HTML Entities 處理 HTML 安全性。它們不能互相替代。
常見的編碼錯誤
1. 混用編碼方式
在 URL 中使用 Base64 而不是 URL Encoding，或在 HTML 中使用 URL Encoding 而不是 HTML Entities，都會導致問題。
2. 重複編碼
對已經編碼的字串再次編碼（雙重編碼）是一個常見錯誤，例如將 %20 再次編碼為 %2520。
3. 忽略字元編碼
在進行 Base64 或 URL Encoding 之前，必須確認原始字串的字元編碼（通常是 UTF-8）。
使用工具快速編碼
需要快速進行 Base64 編碼或解碼？使用我們的免費線上工具：
立即使用 Base64 編碼/解碼工具 →結語
了解不同編碼方式的目的和使用場景，是每個 Web 開發者的基本功。選擇正確的編碼方式不僅能確保資料正確傳輸，還能防止安全漏洞。
參考文獻
- Josefsson, S. "The Base16, Base32, and Base64 Data Encodings." IETF RFC 4648, 2006. https://datatracker.ietf.org/doc/html/rfc4648
- Berners-Lee, T. et al. "Uniform Resource Identifier (URI): Generic Syntax." IETF RFC 3986, 2005. https://datatracker.ietf.org/doc/html/rfc3986
- W3C. "HTML Standard — Named character references." WHATWG HTML Living Standard. https://html.spec.whatwg.org/multipage/named-characters.html
- Mozilla Developer Network. "encodeURIComponent()." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent