前言

上篇文章有涉及到Base64編碼的內(nèi)容，今天我們?cè)賮碓敿?xì)了解一下Base64的編碼原理以及應(yīng)用場(chǎng)景。

通過這篇文章你能夠?qū)W習(xí)到：

• 什么是Base64，為什么需要Base64？
• Base64的編碼原理
• Base64的應(yīng)用場(chǎng)景

什么是Base64？

Base64是一種用于傳輸8bit字節(jié)數(shù)據(jù)的編碼方式，Base64 的字符集包含 64 個(gè)字符（A-Z、a-z、0-9、+、/）以及補(bǔ)位的=

??需要注意的是它只是一種編碼方式，并不是加密方式?。?！因?yàn)閷?duì)于Base64來講，它沒有密鑰的概念，這意味著任何人都能輕松地將Base64編碼的數(shù)據(jù)還原為原始字符。

盡管如此，不少人仍誤將其當(dāng)作加密工具來使用，這在具備基本技術(shù)知識(shí)的人眼中，無異于未加密處理...

為什么需要Base64編碼？

Base64編碼最初主要應(yīng)用于郵件傳輸協(xié)議中，由于這些協(xié)議僅支持ASCII字符的傳遞，導(dǎo)致直接傳輸二進(jìn)制文件（如圖片、視頻等）成為不可能。為了解決這一問題，Base64被設(shè)計(jì)出來，它能夠?qū)⒍M(jìn)制文件內(nèi)容轉(zhuǎn)換成僅包含ASCII字符的編碼形式，從而實(shí)現(xiàn)在郵件傳輸協(xié)議中安全、有效地傳遞二進(jìn)制數(shù)據(jù)。

編碼原理

Base64 編碼的核心原理是將輸入數(shù)據(jù)（多為二進(jìn)制形式）轉(zhuǎn)換成特定字符序列。具體步驟為：首先將輸入數(shù)據(jù)分割成每三個(gè)字節(jié)（共24位）一組，接著將這24位分割為四個(gè)6位的塊（因?yàn)锽ase64中每個(gè)字符代表6位二進(jìn)制數(shù)據(jù)）。最后，通過查找表將這些6位塊映射為相應(yīng)的Base64字符。

base64字符集

上面我們提到標(biāo)準(zhǔn)的Base64一般包含64個(gè)字符再加一個(gè)補(bǔ)位的=

• 大寫字母：A-Z（26 個(gè)字符）
• 小寫字母：a-z（26 個(gè)字符）
• 數(shù)字：0-9（10 個(gè)字符）
• 特殊字符：+ 和 /（2 個(gè)字符）
• 補(bǔ)位字符：=

編碼步驟

1. 分組：將輸入數(shù)據(jù)按每三個(gè)字節(jié)一組進(jìn)行劃分，每組組成一個(gè)24位的二進(jìn)制數(shù)據(jù)塊。
2. 分割：將每個(gè)24位的數(shù)據(jù)塊進(jìn)一步分割成四個(gè)6位的數(shù)據(jù)塊。
3. 字符映射：通過查找字符集，將每個(gè)6位數(shù)據(jù)塊映射為字符集中的對(duì)應(yīng)字符。
4. 填充處理：若輸入數(shù)據(jù)的字節(jié)數(shù)非3的倍數(shù)，則在數(shù)據(jù)末尾添加=字符作為填充，以確保編碼結(jié)果的長(zhǎng)度符合Base64規(guī)范。

怎么理解這些步驟？

以南玖的南拼音為例

首先將字符對(duì)應(yīng)的二進(jìn)制位表示出來

圖片

剛好nan是3個(gè)字節(jié)，它們的二進(jìn)制位正好組成了一個(gè)24位的二進(jìn)制塊

接著把這個(gè)二進(jìn)制塊分割成4個(gè)6位的數(shù)據(jù)塊

圖片

最后通過查找Base64編碼對(duì)照表，找到每個(gè)6位數(shù)據(jù)塊對(duì)應(yīng)的字符

圖片

最終nan編碼為bmFu

由于nan的字節(jié)數(shù)正好是3的倍數(shù)，所以它不需要補(bǔ)位，編碼后也就不會(huì)出現(xiàn)=

補(bǔ)位

如果字節(jié)數(shù)不是3的倍數(shù)，那么余數(shù)可能是1或2，所以補(bǔ)位也需要分兩種情況。

• 余數(shù)為1，二進(jìn)制末尾補(bǔ)4個(gè)0，最后多出來的這個(gè)字符會(huì)編碼成2個(gè)base64字符，最后再補(bǔ)兩個(gè)=

比如宋的拼音song，余數(shù)為1

圖片

在這基礎(chǔ)上最后還得補(bǔ)上2個(gè)=，最終song編碼為c29uZw==

• 余數(shù)為2，二進(jìn)制末尾補(bǔ)2個(gè)0，編碼后末尾再補(bǔ)1個(gè)=

比如ab，余數(shù)為2

圖片

最終ab編碼為YWI=

驗(yàn)證

在javaScript中可以調(diào)用btoa來進(jìn)行base64編碼

圖片

動(dòng)手實(shí)現(xiàn)一下Base64編解碼

base64編碼

// 自定義base64編碼
const customEncrypt = (str: string) => {
    // base64字符集
    const base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
    // 將字符串轉(zhuǎn)中的每個(gè)字符轉(zhuǎn)換成8位二進(jìn)制
    const binaryStr = str.split('').map(char => {
        const binary = char.charCodeAt(0).toString(2)
        return binary.padStart(8, '0')
    }).join('')

    // 將二進(jìn)制字符串按6位分割
    const binaryArr = binaryStr.match(/.{1,6}/g) || []

    // 如果最后一組不是6位的倍數(shù)，后面補(bǔ)0
    const last = binaryArr[binaryArr.length - 1]
    if(last?.length % 6 !== 0) {
        binaryArr[binaryArr.length - 1] = last.padEnd(6, '0')
    }

    // 將6位的二進(jìn)制轉(zhuǎn)換成10進(jìn)制
    const decimalArr = binaryArr.map(binary =>parseInt(binary, 2))

    // 根據(jù)10進(jìn)制的值獲取base64字符
    let base64Str = decimalArr.map(decimal => base64Chars[decimal]).join('')

    // 補(bǔ)位
    while(base64Str.length % 4 !== 0) {
        base64Str += '='
    }
    return base64Str
}

基本按照上面的編碼步驟實(shí)現(xiàn)即可

驗(yàn)證

console.log('btoa', btoa('song'))
console.log('自定義加密', customEncrypt('song'))

圖片

base64解碼

解碼的過程基本就是與編碼反過來

// 自定義base64解碼
const customDecrypt = (str: string) => {
    // base64字符集
    const base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
    // 將base64字符轉(zhuǎn)換成10進(jìn)制
    const decimalArr = str.split('').map(char => base64Chars.indexOf(char))

    // 將10進(jìn)制轉(zhuǎn)換成6位二進(jìn)制
    const binaryArr = decimalArr.map(decimal => decimal.toString(2).padStart(6, '0'))

    // 將6位的二進(jìn)制拼接
    const binaryStr = binaryArr.join('')

    // 將8位的二進(jìn)制轉(zhuǎn)換成字符
    const charArr = binaryStr.match(/.{1,8}/g) || []
    return charArr.map(binary =>String.fromCharCode(parseInt(binary, 2))).join('')
}

驗(yàn)證

console.log('atob', atob('c29uZw=='))
console.log('自定義解碼', customDecrypt('c29uZw=='))

圖片

思考??

按照這個(gè)思路我們是不是可以實(shí)現(xiàn)一個(gè)比Base64更安全的偽加密方法

比如：

• 更換字符集
• 更換二進(jìn)制分割手段

應(yīng)用場(chǎng)景

數(shù)據(jù)傳輸

Base64編碼是一種在HTTP文本協(xié)議中傳輸二進(jìn)制數(shù)據(jù)的常用方法。由于HTTP協(xié)議本質(zhì)上是基于文本的，它限制了只能傳輸可打印的ASCII字符（范圍從32到126），這包括字母、數(shù)字、標(biāo)點(diǎn)符號(hào)和一些特殊符號(hào)。然而，二進(jìn)制數(shù)據(jù)包含許多不在這個(gè)范圍內(nèi)的字符，因此無法直接通過HTTP協(xié)議進(jìn)行傳輸。Base64編碼不僅解決了在HTTP協(xié)議中傳輸二進(jìn)制數(shù)據(jù)的問題，還確保了數(shù)據(jù)的完整性和可讀性。

數(shù)據(jù)存儲(chǔ)

Base64 編碼常用于存儲(chǔ)二進(jìn)制數(shù)據(jù)，如數(shù)據(jù)庫(kù)中的圖像、文件等，因?yàn)樗鼘?shù)據(jù)轉(zhuǎn)換為可打印字符，避免了二進(jìn)制數(shù)據(jù)在存儲(chǔ)過程中可能出現(xiàn)的問題。

在前端頁(yè)面實(shí)現(xiàn)中，為了提高加載效率，簡(jiǎn)單圖片通常會(huì)選擇直接內(nèi)嵌而非加載外部資源。然而，圖片是二進(jìn)制數(shù)據(jù)，直接嵌入并不簡(jiǎn)單。幸運(yùn)的是，現(xiàn)代瀏覽器普遍支持Data URLs功能，該功能通過Base64編碼將圖片或其他文件的二進(jìn)制數(shù)據(jù)轉(zhuǎn)換為文本字符串，從而可以方便地嵌入到網(wǎng)頁(yè)中。這樣，就無需進(jìn)行額外的外部資源加載，有助于減少頁(yè)面加載時(shí)間。

協(xié)議編碼

Base64編碼最初主要應(yīng)用于郵件傳輸協(xié)議中，由于這些協(xié)議僅支持ASCII字符的傳遞，導(dǎo)致直接傳輸二進(jìn)制文件（如圖片、視頻等）成為不可能。為了解決這一問題，Base64被設(shè)計(jì)出來，它能夠?qū)⒍M(jìn)制文件內(nèi)容轉(zhuǎn)換成僅包含ASCII字符的編碼形式，從而實(shí)現(xiàn)在郵件傳輸協(xié)議中安全、有效地傳遞二進(jìn)制數(shù)據(jù)。

總結(jié)

Base64編碼是一種廣泛應(yīng)用的編碼方法，它將二進(jìn)制數(shù)據(jù)轉(zhuǎn)換為可打印的ASCII字符集，特別適用于數(shù)據(jù)傳輸和存儲(chǔ)場(chǎng)景。然而，重要的是要認(rèn)識(shí)到，Base64編碼本身并不具備數(shù)據(jù)加密或安全保護(hù)的功能。在需要處理敏感信息時(shí)，僅憑Base64編碼是遠(yuǎn)遠(yuǎn)不夠的，必須結(jié)合適當(dāng)?shù)募用芗夹g(shù)和安全傳輸協(xié)議（如HTTPS）來確保信息的安全性和隱私性。