Base64 解碼器

Base64 是什麼？#

Base64 是一種用 64 個 ASCII 字元（A–Z、a–z、0–9，再加上 + 和 /）把二進位資料表示成純文字的方法。它讓圖片、金鑰、電郵附件這類二進位資料，能安全地通過為文字而設計的系統。它是編碼，不是加密。

Base64 使用一組固定的 64 個字元的字母表。0 到 63 之間的每個值都恰好對應其中一個字元，任何 3 個位元組的二進位資料也因此變成 4 個可讀的字元：

你幾乎一定已經見過它了。只要二進位資料需要藏在文字裡傳遞，Base64 就會出現：

• 把小圖片或圖示直接內嵌到 HTML 或 CSS 中
• 在 JSON API 回應中夾帶二進位資料
• 編碼電郵附件（MIME）
• 把金鑰與憑證存進 PEM 檔案

那個 data URI 技巧長這樣，這串長字串就是整張圖片：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Base64 為什麼存在？#

早期的網路協定是為文字、而非原始位元組設計的。ASCII 使用 7 個位元、128 個字元，用於英文綽綽有餘，但對二進位卻不行。有些系統會破壞控制字元，或改寫換行（把 LF 改成 CR + LF），在傳輸途中悄悄損壞圖片與音訊。

Base64 只輸出每個系統早已共同認可的字元，藉此避開了上述所有問題。Base16 與 Base32 用更小的字母表做同樣的事，但 Base64 在保持安全的同時，每個字元能塞進更多資料。這正是它勝出的原因。

Base64 編碼的運作原理#

整套方法就是一個想法的重複：取 3 個位元組（24 個位元），把它們重新切成 4 組各 6 個位元，再用字母表查出每一組對應的字元。我們用 "Logto" 這個字手動編碼一次。

1. 用每個字元的 ASCII 碼，把它寫成 8 位元的二進位。
2. 一次取 3 個位元組，這就是 24 個位元。
3. 把同樣的 24 個位元重新切成 4 組各 6 個位元。
4. 把每組 6 個位元當成 0 到 63 的數字來讀。
5. 用這個數字查字母表，得到一個字元。
6. 若最後一段位元組不足 3 個，就用 0 補滿剩下的位元，並加上 "="，讓每個區塊都維持 4 個字元。

步驟 1. 把每個字元變成 8 位元的二進位：

步驟 2. 取前 3 個位元組 "Log"，把這同樣的 24 個位元重新切成 4 組各 6 個位元：

步驟 3. 把每組 6 個位元當成數字來讀，再用這個數字查字母表：

"Logto" 有 5 個位元組，不是 3 的倍數。最後兩個位元組 "to" 會切成 6 + 6 + 4。把最後 4 個位元用 0 補成一組 6 個位元，再加上一個 "="，補齊這個 4 字元的區塊：

把各區塊拼起來：

"Logto"  →  TG9ndG8=

每種語言都內建了它。在 Node.js 中：

const text = 'Logto';
const base64 = Buffer.from(text).toString('base64');
console.log(base64); // TG9ndG8=

從這個過程會得出三條值得記住的規則：

• 進 3 出 4: 輸出長度是把輸入無條件進位到 4 個字元的倍數，所以編碼後的資料總是大約大 33%。
• "=" 代表填充: 只有在輸入不是 3 個位元組的倍數時才會出現。
• 填充透露了餘數: 沒有 "=" 代表是 3 個位元組的倍數，一個 "=" 代表剩 2 個位元組，兩個 "=" 代表剩 1 個位元組。

你什麼時候該用 Base64？#

當二進位資料必須通過只能處理文字的通道時，就用 Base64：

• 內嵌資源: 把小圖片或字型內嵌到 HTML/CSS，省下一次請求。
• 純文字傳輸: 把二進位放進 JSON、XML，或 URL 查詢參數裡。
• 受限字元: 讓資料通過那些會被控制位元組卡住的系統。

你得到的回報：

• 到處都能用: 任何支援 ASCII 的系統都能讀，不需要協商字元集。
• 不會損壞任何東西: 在原始位元組會被破壞的通道上，輸出也能原封不動地留存。

URL 安全的 Base64（Base64URL）#

標準的 Base64 依賴三個會跟 URL、查詢字串、檔名運作方式相衝突的字元：+、/，以及 = 填充。把一般的 Base64 字串直接放進連結，它可能會以不易察覺的方式出錯：

• + 會變成空格。在查詢字串中，許多伺服器會把 + 讀成空格。於是 ?data=ab+cd 會悄悄變成 "ab cd"，位元組就錯了。
• / 是路徑分隔符。值裡的 / 可能被當成新的路徑片段，而大多數檔案系統也根本不允許它出現在檔名裡。
• = 同樣是保留字元。它在查詢字串中用來分隔鍵與值，所以結尾的 = 填充會被去掉或誤讀。

你可以對它們做百分比編碼（+ 變成 %2B、/ 變成 %2F、= 變成 %3D），但這會讓字串變長，也很容易不小心重複編碼。

Base64URL（RFC 4648 §5）從根源解決了這個問題：把 + 換成 -、把 / 換成 _，並去掉 = 填充。這樣的結果可以直接放進 URL、查詢參數或檔名，完全不用轉義。你會在 URL、檔名，以及許多 Web API 中看到它。

const base64 = 'TG9ndG8=';
const urlSafe = base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
console.log(urlSafe); // TG9ndG8

限制（以及一個大誤解）#

Base64 只是一種表示方式，不是天上掉下來的好處。請記住三件事：

• 大約大 33%: 3 個位元組變成 4 個字元，所以編碼後的資料大約膨脹三分之一。
• 會耗用 CPU: 在大量處理或大型負載時，編碼與解碼並不是免費的。
• 無法閱讀: 不透明的字串會讓記錄檔與除錯更加困難。

常見問題#