前端加密的常見場景和方法

首先，加密的目的，簡而言之就是将明文轉換為密文、甚至轉換為其他的東西， 用來隐藏明文内容本身，防止其他人直接擷取到敏感明文資訊、或者提高其他 人擷取到明文資訊的難度。通常我們提到加密會想到密碼加密、HTTPS等關鍵 詞，這裡從場景和方法分别提一些我的個人見解。

場景-密碼傳輸

• 前端密碼傳輸過程中如果不加密，在日志中就可以拿到使用者的明文密碼，對用 戶安全不太負責。這種加密其實相對比較簡單，可以使用PlanA-前端加密、後 端解密後計算密碼字元串的 MD5/MD6 存入資料庫；也可以 PlanB-直接前端使 用一種穩定算法加密成唯一值、後端直接将加密結果進行 MD5/MD6，全程密 碼明文不出現在程式中。
• PlanA 使用 Base64 / Unicode+1 等方式加密成非明文，後端解開之後再存它的 MD5/MD6 。
• PlanB 直接使用 MD5/MD6 之類的方式取 Hash ，讓後端存 Hash 的 Hash 。

場景-資料包加密

• 應該大家有遇到過：打開一個正經網站，網站底下蹦出個不正經廣告——比如 X 通的流量浮層，X 信的插入式廣告……（我沒有針對誰）但是這幾年，我們會 發現這種廣告逐漸變少了，其原因就是大家都開始采用 HTTPS 了。被人插入 這種廣告的方法其實很好了解：你的網頁資料包被抓取->在資料包到達你手機 之前被篡改->你得到了帶網頁廣告的資料包->渲染到你手機螢幕。而 HTTPS 進 行了包加密，就解決了這個問題。嚴格來說我認為從手段上來看，它不算是一種前端加密場景；但是從解決問題的角度來看，這确實是前端需要知道的事情。 Plan 全面采用 HTTPS。

場景-展示成果加密

• 經常有人開發網頁爬蟲爬取大家辛辛苦苦一點一點釋出的資料成果，有些會影 響你的競争力，有些會降低你的知名度，甚至有些出于惡意爬取你的公開資料 後進行全量公開……比如有些食譜網站被爬掉所有食譜，站點被克隆；有些求職網站被爬掉所有職位，被拿去賣資訊；甚至有些小說漫畫網站賴以生存的内容 也很容易被爬取。
• Plan 将文本内容進行展示層加密，利用字型的引用特點，把拿給爬蟲的資料變 成“亂碼”。