作者：vivo 互聯(lián)網(wǎng)安全團隊- Luo Bingsong

前端代碼都是公開的，為了提高代碼的破解成本、保證JS代碼里的一些重要邏輯不被居心叵測的人利用，需要使用一些加密和混淆的防護手段。

一、概念解析

1.1 什么是接口加密

如今這個時代，數(shù)據(jù)已經(jīng)變得越來越重要，網(wǎng)頁和APP是主流的數(shù)據(jù)載體，如果獲取數(shù)據(jù)的接口沒有設(shè)置任何的保護措施的話，數(shù)據(jù)就會被輕易地竊取或篡改。

除了數(shù)據(jù)泄露外，一些重要功能的接口如果沒有做好保護措施也會被惡意調(diào)用造成DDoS、條件競爭等攻擊效果，比如如下幾個場景：

一些營銷活動類的Web頁面，領(lǐng)紅包、領(lǐng)券、投票、抽獎等活動方式很常見。此類活動對于普通用戶來說應(yīng)該是“拼手氣”，而對于非正常用戶來說，可以通過直接刷活動API接口的這種“作弊”方式來提升“手氣”。這樣對普通用戶來說就很不公平。

所以對重要接口都會采用加密驗簽的方式進行保護，而驗簽的加密邏輯大多數(shù)都通過JS代碼實現(xiàn)，所以保護JS代碼不被攻擊者竊取尤為重要。

1.2 為什么要保護JS代碼

JavaScript代碼運行于客戶端

JavaScript代碼是公開透明的

由于這兩個原因，致使JavaScript代碼是不安全的，任何人都可以讀、分析、復(fù)制、盜用甚至篡改。

1.3 應(yīng)用場景

以下場景就通過特定的防護措施提高了攻擊成本：

某些網(wǎng)站會在頁面中使用JavaScript對數(shù)據(jù)進行加密，以保護數(shù)據(jù)的安全性和隱私性，在爬取時需要通過解密JavaScript代碼才能獲取到數(shù)據(jù)。

某些網(wǎng)站的URL會有某個參數(shù)帶有一些看不太懂的長串加密參數(shù)，攻擊者要爬取的話就必須要知道這些參數(shù)是怎么構(gòu)造的，否則無法正確地訪問該URL。

翻看網(wǎng)站的JavaScript源代碼，可以發(fā)現(xiàn)很多壓縮了或者看不太懂的字符，比如JavaScript文件名被編碼，JavaScript的文件內(nèi)容都壓縮成幾行，JavaScript變量也被修改成單個字符或者一些十六進制的字符，所以我們不能輕易地根據(jù)JavaScript找出某些接口的加密邏輯。

1.4 涉及的技術(shù)

這些場景都是網(wǎng)站為了保護數(shù)據(jù)不被輕易抓取采取的措施，運用的技術(shù)主要有：

接口加密技術(shù)

JavaScript壓縮、混淆和加密技術(shù)

二、技術(shù)原理

2.1 接口加密技術(shù)

數(shù)據(jù)和功能一般是通過服務(wù)器提供的接口來實現(xiàn)，為了提升接口的安全性，客戶端會和服務(wù)端約定一種接口檢驗方式，通常是各種加密和編碼算法，如Base64、Hex、MD5、AES、DES、RSA等。

常用的數(shù)據(jù)接口都會攜帶一個sign參數(shù)用于權(quán)限管控：

① 客戶端和服務(wù)端約定一種接口校驗邏輯，客戶端在每次請求服務(wù)端接口的時候附帶一個sign參數(shù)。
② sign參數(shù)的邏輯自定義，可以由當(dāng)前時間戳信息、設(shè)備ID、日期、雙方約定好的秘鑰經(jīng)過一些加密算法構(gòu)造而成。
③ 客戶端根據(jù)約定的加密算法構(gòu)造sign，每次請求服務(wù)器的時候附帶上sign數(shù)。
④ 服務(wù)端根據(jù)約定的加密算法和請求的數(shù)據(jù)對sign進行校驗，如果檢驗通過，才返回數(shù)據(jù)，否則拒絕響應(yīng)。

這就是一個比較簡單的接口參數(shù)加密的實現(xiàn)，如果有人想要調(diào)用這個接口的話，必須要破解sign的生成邏輯，否則是無法正常調(diào)用接口的。

當(dāng)然上面的實現(xiàn)思路比較簡單，還可以增加一些時間戳信息和訪問頻次來增加時效性判斷，或使用非對稱加密提高加密的復(fù)雜程度。

實現(xiàn)接口參數(shù)加密需要用到一些加密算法，客戶端和服務(wù)器都有對應(yīng)的SDK來實現(xiàn)這些加密算法，如JavaScript的crypto-js、Python的hashlib、Crypto等等。如果是網(wǎng)頁且客戶端的加密邏輯是用JavaScript來實現(xiàn)的話，其源代碼對用戶是完全可見的，所以我們需要用壓縮、混淆、加密的方式來對JavaScript代碼進行一定程度的保護。

2.2 什么是壓縮

去除JavaScript代碼中不必要的空格、換行等內(nèi)容，使源碼都壓縮為幾行內(nèi)容，降低代碼可讀性，同時可提高網(wǎng)站的加載速度。

如果僅僅是去除空格換行這樣的壓縮方式，幾乎沒有任何防護作用，這種壓縮方式僅僅是降低了代碼的直接可讀性，可以用IDE、在線工具或Chrome輕松將JavaScript代碼變得易讀。

所以JavaScript壓縮技術(shù)只能在很小的程度上起到防護作用，想提高防護的效果還得依靠JavaScript混淆和加密技術(shù)。

2.3 什么是混淆

使用變量混淆、字符串混淆、屬性加密、控制流平坦化、調(diào)試保護、多態(tài)變異等手段，使代碼變得難以閱讀和分析，同時不影響代碼原有功能，是一種理想且實用的JS保護方案。

變量混淆：將變量名、方法名、常量名隨機變?yōu)闊o意義的亂碼字符串，降低代碼可讀性，如轉(zhuǎn)成單個字符或十六進制字符串。

字符串混淆：將字符串陣列化集中放置，并進行MD5或Base64編碼存儲，使代碼中不出現(xiàn)明文字符串，可以避免使用全局搜索字符串的方式定位到入口點。

屬性加密：針對JavaScript對象的屬性進行加密轉(zhuǎn)化，隱藏代碼之間的調(diào)用關(guān)系，把key-value的映射關(guān)系混淆掉。

控制流平坦化：打亂函數(shù)原有代碼執(zhí)行流程及函數(shù)調(diào)用關(guān)系，使代碼邏輯變得混亂無序。

調(diào)試保護：基于調(diào)試器特性，加入一些強制調(diào)試debug語句，無限debug、定時debug、debug關(guān)鍵字，使其在調(diào)試模式下難以順利執(zhí)行JavaScript代碼。

多態(tài)變異：JavaScript代碼每次被調(diào)用時，代碼自身立刻自動發(fā)生變異，變化為與之前完全不同的代碼，避免代碼被動態(tài)分析調(diào)試。

2.4 什么是加密

JavaScript加密是對JavaScript混淆技術(shù)防護的進一步升級，基本思路是將一些核心邏輯用C/C++語言來編寫，并通過JavaScript調(diào)用執(zhí)行，從而起到二進制級別的防護作用，加密的方式主要有Emscripten和WebAssembly等。

1. Emscripten

Emscripten編譯器可以將C/C++代碼編譯成asm.js的JavaScript變體，再由JavaScript調(diào)用執(zhí)行，因此某些JavaScript的核心功能可以使用C/C++語言實現(xiàn)。

2.WebAssembly

WebAssembly也能將C/C++代碼轉(zhuǎn)成JavaScript引擎可以運行的代碼，但轉(zhuǎn)出來的代碼是二進制字節(jié)碼，而asm.js是文本，因此運行速度更快、體積更小，得到的字節(jié)碼具有和JavaScript相同的功能，在語法上完全脫離JavaScript，同時具有沙盒化的執(zhí)行環(huán)境，利用WebAssembly技術(shù)，可以將一些核心的功能用C/C++語言實現(xiàn)，形成瀏覽器字節(jié)碼的形式，然后在JavaScript中通過類似如下的方式調(diào)用：

這種加密方式更加安全，想要逆向或破解需要逆向WebAssembly，難度極大。

2.5 工具介紹

2.5.1 壓縮混淆工具

Uglifyjs（開源）：

用NodeJS編寫的JavaScript壓縮工具，是目前最流行的JS壓縮工具，JQuery就是使用此工具壓縮，UglifyJS壓縮率高，壓縮選項多，并且具有優(yōu)化代碼，格式化代碼功能。

jshaman：

jshaman是一個商業(yè)級工具，看了很多社區(qū)的評論，這個目前是最好的，可以在線免費使用，也可以購買商業(yè)版。

jsfuck：

開源的js混淆工具，原理比較簡單，通過特定的字符串加上下標(biāo)定位字符，再由這些字符替換源代碼，從而實現(xiàn)混淆。

YUI Compressor：

業(yè)界巨頭yahoo提供的一個前端壓縮工具，通過java庫編譯css或js文件進行壓縮

2.5.2 反混淆工具

jsbeautifier：

jsbeautifier是一個為前端開發(fā)人員制作的Chrome擴展，能夠直接查看經(jīng)過壓縮的Javascript代碼。

UnuglifyJS：

壓縮工具uglify對應(yīng)的解混淆工具。

jspacker：

用PHP編寫的壓縮工具，可以混淆代碼保護知識產(chǎn)權(quán)，產(chǎn)生的代碼兼容IE、FireFox等常用瀏覽器，國內(nèi)大部分在線工具網(wǎng)站都采用這種算法壓縮。

三、前端安全對抗

3.1 前端調(diào)試手法

3.1.1 Elements

Elements 面板會顯示目前網(wǎng)頁中的 DOM、CSS 狀態(tài)，且可以修改頁面上的 DOM 和 CSS，即時看到結(jié)果，省去了在編輯器修改、儲存、瀏覽器查看結(jié)果的流程。

有時候一些dom節(jié)點會嵌套很深，導(dǎo)致我們很難利用Element面板html代碼來找到對應(yīng)的節(jié)點。inspect(dom元素)可以讓我們快速跳轉(zhuǎn)到對應(yīng)的dom節(jié)點的html代碼上。

3.1.2 Console

Console對象提供了瀏覽器控制臺調(diào)試的接口，Console是一個對象，上面有很多方便的方法。

console.log( )：最常用的語句，可以將變量輸出到瀏覽器的控制臺中，方便開發(fā)者調(diào)用JS代碼

console.table( )：可用于打印obj/arr成表格

console.trace( )：可用于debugger堆棧調(diào)試，方便查看代碼的執(zhí)行邏輯，看一些庫的源碼

console.count( )：打印標(biāo)簽被執(zhí)行了幾次，預(yù)設(shè)值是default，可用在快速計數(shù)

console.countReset( )：用來重置，可用在計算單次行為的觸發(fā)的計數(shù)

console.group( )/console.groupEnd( )：

為了方便一眼看到自己的log，可以用console.group自定義message group標(biāo)簽，還可以多層嵌套，并用console.groupEnd來關(guān)閉Group。

3.1.3 JS斷點調(diào)試

JS斷點調(diào)試，即在瀏覽器開發(fā)者工具中為JS代碼添加斷點，讓JS執(zhí)行到某一特定位置停住，方便開發(fā)者對該處代碼段進行分析與邏輯處理。

Sources面板

① 普通斷點（breakpoint）

給一段代碼添加斷點的流程是："F12（Ctrl + Shift + I）打開開發(fā)工具"->"點擊Sources菜單"->"左側(cè)樹中找到相應(yīng)文件"→"點擊行號列"即完成在當(dāng)前行添加/刪除斷點操作。當(dāng)斷點添加完畢后，刷新頁面JS執(zhí)行到斷點位置停住，在Sources界面會看到當(dāng)前作用域中所有變量和值。

恢復(fù)（Resume）：恢復(fù)按鈕(第一個按鈕)，繼續(xù)執(zhí)行，快捷鍵 F8，繼續(xù)執(zhí)行，如果沒有其他的斷點，那么程序就會繼續(xù)執(zhí)行，并且調(diào)試器不會再控制程序。

跨步（Step over）：運行下一條指令，但不會進入到一個函數(shù)中，快捷鍵 F10。

步入（Step into）：快捷鍵 F11，和“下一步（Step）”類似，但在異步函數(shù)調(diào)用情況下表現(xiàn)不同，步入會進入到代碼中并等待異步函數(shù)執(zhí)行。

步出（Step out）：繼續(xù)執(zhí)行到當(dāng)前函數(shù)的末尾，快捷鍵 Shift+F11，繼續(xù)執(zhí)行代碼并停止在當(dāng)前函數(shù)的最后一行，當(dāng)我們使用偶然地進入到一個嵌套調(diào)用，但是我們又對這個函數(shù)不感興趣時，我們想要盡可能的繼續(xù)執(zhí)行到最后的時候是非常方便的。

下一步（Step）：運行下一條語句，快捷鍵 F9，一次接一次地點擊此按鈕，整個腳本的所有語句會被逐個執(zhí)行，下一步命令會忽略異步行為。

啟用/禁用所有的斷點：這個按鈕不會影響程序的執(zhí)行。只是一個批量操作斷點的開/關(guān)。

察看（Watch）：顯示任意表達(dá)式的當(dāng)前值

調(diào)用棧（Call Stack）：顯示嵌套的調(diào)用鏈

作用域（Scope）：顯示當(dāng)前的變量

Local：顯示當(dāng)前函數(shù)中的變量

Global：顯示全局變量

② 條件斷點（Conditional breakpoint）

給斷點添加條件，只有符合條件時，才會觸發(fā)斷點，條件斷點的顏色是橙色。

③ 日志斷點（logpoint）

當(dāng)代碼執(zhí)行到這里時，會在控制臺輸出你的表達(dá)式，不會暫停代碼執(zhí)行，日志斷點式粉紅色。

debugger命令

通過在代碼中添加"debugger;"語句，當(dāng)代碼執(zhí)行到該語句的時候就會自動斷點，之后的操作和在Sources面板添加斷點調(diào)試，唯一的區(qū)別在于調(diào)試完后需要刪除該語句。

在開發(fā)中偶爾會遇到異步加載html片段（包含內(nèi)嵌JS代碼）的情況，而這部分JS代碼在Sources樹中無法找到，因此無法直接在開發(fā)工具中直接添加斷點，那么如果想給異步加載的腳本添加斷點，此時"debugger;"就發(fā)揮作用了。

3.2 反調(diào)試手段

3.2.1 禁用開發(fā)者工具

監(jiān)聽是否打開開發(fā)者工具，若打開，則直接調(diào)用JavaScript的window.close( )方法關(guān)閉網(wǎng)頁

① 監(jiān)聽F12按鍵、監(jiān)聽Ctrl+Shift+I（Windows系統(tǒng)）組合鍵、監(jiān)聽右鍵菜單，監(jiān)聽Ctrl+s禁止保存至本地，避免被Overrides。

② 監(jiān)聽窗口大小變化

③ 利用Console.log

3.2.2 無限debugger反調(diào)試

① constructor

② Function

有大佬寫了一個庫專門用來判斷是否打開了開發(fā)者工具，可供參考使用：點擊查看>>

3.3 反反調(diào)試手段

3.3.1 禁用開發(fā)者工具

針對判斷是否打開開發(fā)者工具的破解方式很簡單，只需兩步就可以搞定。

① 將開發(fā)者工具以獨立窗口形式打開

② 打開開發(fā)者工具后再打開網(wǎng)址

3.3.2 無限debugger

針對無限debugger反調(diào)試，有以下破解方法

① 直接使用dubbger指令的，可以在Chrome找到對應(yīng)行（格式化后），右鍵行號，選擇Never pause here即可。

② 使用了constructor構(gòu)造debugger的，只需在console中輸入以下代碼后，點擊F8（Resume script execution）回復(fù)js代碼執(zhí)行即可（直接點擊小的藍(lán)色放行按鈕即可）。

Function.prototype.constructor=function(){}

③ 使用了Function構(gòu)造debugger的，只需在console中輸入以下代碼。

Function = function () {}

3.4 總結(jié)

JavaScript混淆加密使得代碼更難以被反編譯和分析，從而提高了代碼的安全性，攻擊者需要花費更多的時間和精力才能理解和分析代碼，從而降低了攻擊者入侵的成功率，但它并不能完全保護代碼不被反編譯和分析，如果攻擊者有足夠的時間和資源，他們?nèi)匀豢梢岳斫獯a并找到其中的漏洞，道高一尺，魔高一丈，任何客戶端加密混淆都會被破解，只要用心都能解決，我們能做的就是拖延被破解的時間，所以盡量避免在前端代碼中嵌入敏感信息或業(yè)務(wù)邏輯。