寫在前面
此系列來源于開源項目：前端 100 問：能搞懂 80%的請把簡歷給我
為了備戰(zhàn) 2021 春招
每天一題虾攻，督促自己
從多方面多角度總結(jié)答案潜腻，豐富知識
介紹下前端加密的常見場景和方法
簡書整合地址：前端 100 問
正文回答
首先，加密的目的挂脑，簡而言之就是將明文轉(zhuǎn)換為密文、甚至轉(zhuǎn)換為其他的東西漩绵，用來隱藏明文內(nèi)容本身左胞，防止其他人直接獲取到敏感明文信息、或者提高其他人獲取到明文信息的難度橱赠。
通常我們提到加密會想到密碼加密、HTTPS 等關(guān)鍵詞箫津，這里從場景和方法分別提一些我的個人見解狭姨。
場景-密碼傳輸
前端密碼傳輸過程中如果不加密宰啦，在日志中就可以拿到用戶的明文密碼，對用戶安全不太負(fù)責(zé)饼拍。
這種加密其實相對比較簡單赡模，可以使用 PlanA-前端加密、后端解密后計算密碼字符串的 MD5/MD6 存入數(shù)據(jù)庫师抄；也可以 PlanB-直接前端使用一種穩(wěn)定算法加密成唯一值漓柑、后端直接將加密結(jié)果進(jìn)行 MD5/MD6，全程密碼明文不出現(xiàn)在程序中叨吮。
- PlanA：使用 Base64 / Unicode+1 等方式加密成非明文欺缘，后端解開之后再存它的 MD5/MD6 。
- PlanB：直接使用 MD5/MD6 之類的方式取 Hash 挤安，讓后端存 Hash 的 Hash 。
場景-數(shù)據(jù)包加密
應(yīng)該大家有遇到過：打開一個正經(jīng)網(wǎng)站丧鸯，網(wǎng)站底下蹦出個不正經(jīng)廣告——比如 X 通的流量浮層蛤铜，X 信的插入式廣告……（我沒有針對誰）
但是這幾年，我們會發(fā)現(xiàn)這種廣告逐漸變少了丛肢，其原因就是大家都開始采用 HTTPS 了围肥。
被人插入這種廣告的方法其實很好理解：你的網(wǎng)頁數(shù)據(jù)包被抓取->在數(shù)據(jù)包到達(dá)你手機(jī)之前被篡改->你得到了帶網(wǎng)頁廣告的數(shù)據(jù)包->渲染到你手機(jī)屏幕。
而 HTTPS 進(jìn)行了包加密蜂怎，就解決了這個問題穆刻。嚴(yán)格來說我認(rèn)為從手段上來看，它不算是一種前端加密場景杠步；但是從解決問題的角度來看氢伟，這確實是前端需要知道的事情。
場景-展示成果加密
經(jīng)常有人開發(fā)網(wǎng)頁爬蟲爬取大家辛辛苦苦一點一點發(fā)布的數(shù)據(jù)成果幽歼，有些會影響你的競爭力朵锣，有些會降低你的知名度，甚至有些出于惡意爬取你的公開數(shù)據(jù)后進(jìn)行全量公開……比如有些食譜網(wǎng)站被爬掉所有食譜甸私，站點被克鲁闲；有些求職網(wǎng)站被爬掉所有職位皇型，被拿去賣信息诬烹；甚至有些小說漫畫網(wǎng)站賴以生存的內(nèi)容也很容易被爬取。
將文本內(nèi)容進(jìn)行展示層加密弃鸦，利用字體的引用特點绞吁，把拿給爬蟲的數(shù)據(jù)變成“亂碼”。
舉個栗子：正常來講寡键，當(dāng)我們擁有一串?dāng)?shù)字“12345”并將其放在網(wǎng)站頁面上的時候掀泳，其實網(wǎng)站頁面上顯示的并不是簡單的數(shù)字雪隧，而是數(shù)字對應(yīng)的字體的“12345”。這時我們打亂一下字體中圖形和字碼的對應(yīng)關(guān)系员舵，比如我們搞成這樣：
圖形：1 2 3 4 5
字碼：2 3 1 5 4
這時脑沿，如果你想讓用戶看到“12345”，你在頁面中渲染的數(shù)字就應(yīng)該是“23154”马僻。這種手段也可以算作一種加密庄拇。
