寫(xiě)在前面

此系列來(lái)源于開(kāi)源項(xiàng)目：前端 100 問(wèn)：能搞懂 80%的請(qǐng)把簡(jiǎn)歷給我
為了備戰(zhàn) 2021 春招
每天一題，督促自己
從多方面多角度總結(jié)答案，豐富知識(shí)
介紹下前端加密的常見(jiàn)場(chǎng)景和方法
簡(jiǎn)書(shū)整合地址：前端 100 問(wèn)

正文回答

首先，加密的目的，簡(jiǎn)而言之就是將明文轉(zhuǎn)換為密文、甚至轉(zhuǎn)換為其他的東西，用來(lái)隱藏明文內(nèi)容本身，防止其他人直接獲取到敏感明文信息、或者提高其他人獲取到明文信息的難度。

通常我們提到加密會(huì)想到密碼加密、HTTPS 等關(guān)鍵詞，這里從場(chǎng)景和方法分別提一些我的個(gè)人見(jiàn)解。

場(chǎng)景-密碼傳輸

前端密碼傳輸過(guò)程中如果不加密，在日志中就可以拿到用戶的明文密碼，對(duì)用戶安全不太負(fù)責(zé)。

這種加密其實(shí)相對(duì)比較簡(jiǎn)單，可以使用 PlanA-前端加密、后端解密后計(jì)算密碼字符串的 MD5/MD6 存入數(shù)據(jù)庫(kù)；也可以 PlanB-直接前端使用一種穩(wěn)定算法加密成唯一值、后端直接將加密結(jié)果進(jìn)行 MD5/MD6，全程密碼明文不出現(xiàn)在程序中。

• PlanA：使用 Base64 / Unicode+1 等方式加密成非明文，后端解開(kāi)之后再存它的 MD5/MD6 。
• PlanB：直接使用 MD5/MD6 之類的方式取 Hash ，讓后端存 Hash 的 Hash 。

場(chǎng)景-數(shù)據(jù)包加密

應(yīng)該大家有遇到過(guò)：打開(kāi)一個(gè)正經(jīng)網(wǎng)站，網(wǎng)站底下蹦出個(gè)不正經(jīng)廣告——比如 X 通的流量浮層，X 信的插入式廣告……（我沒(méi)有針對(duì)誰(shuí)）

但是這幾年，我們會(huì)發(fā)現(xiàn)這種廣告逐漸變少了，其原因就是大家都開(kāi)始采用 HTTPS 了。

被人插入這種廣告的方法其實(shí)很好理解：你的網(wǎng)頁(yè)數(shù)據(jù)包被抓取->在數(shù)據(jù)包到達(dá)你手機(jī)之前被篡改->你得到了帶網(wǎng)頁(yè)廣告的數(shù)據(jù)包->渲染到你手機(jī)屏幕。

而 HTTPS 進(jìn)行了包加密，就解決了這個(gè)問(wèn)題。嚴(yán)格來(lái)說(shuō)我認(rèn)為從手段上來(lái)看，它不算是一種前端加密場(chǎng)景；但是從解決問(wèn)題的角度來(lái)看，這確實(shí)是前端需要知道的事情。

場(chǎng)景-展示成果加密

經(jīng)常有人開(kāi)發(fā)網(wǎng)頁(yè)爬蟲(chóng)爬取大家辛辛苦苦一點(diǎn)一點(diǎn)發(fā)布的數(shù)據(jù)成果，有些會(huì)影響你的競(jìng)爭(zhēng)力，有些會(huì)降低你的知名度，甚至有些出于惡意爬取你的公開(kāi)數(shù)據(jù)后進(jìn)行全量公開(kāi)……比如有些食譜網(wǎng)站被爬掉所有食譜，站點(diǎn)被克隆；有些求職網(wǎng)站被爬掉所有職位，被拿去賣信息；甚至有些小說(shuō)漫畫(huà)網(wǎng)站賴以生存的內(nèi)容也很容易被爬取。

將文本內(nèi)容進(jìn)行展示層加密，利用字體的引用特點(diǎn)，把拿給爬蟲(chóng)的數(shù)據(jù)變成“亂碼”。

舉個(gè)栗子：正常來(lái)講，當(dāng)我們擁有一串?dāng)?shù)字“12345”并將其放在網(wǎng)站頁(yè)面上的時(shí)候，其實(shí)網(wǎng)站頁(yè)面上顯示的并不是簡(jiǎn)單的數(shù)字，而是數(shù)字對(duì)應(yīng)的字體的“12345”。這時(shí)我們打亂一下字體中圖形和字碼的對(duì)應(yīng)關(guān)系，比如我們搞成這樣：

圖形：1 2 3 4 5
字碼：2 3 1 5 4

這時(shí)，如果你想讓用戶看到“12345”，你在頁(yè)面中渲染的數(shù)字就應(yīng)該是“23154”。這種手段也可以算作一種加密。