當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

第27讲：令人抓狂的 JavaScript 混淆技术

發(fā)布時(shí)間：2024/4/11 javascript 30 豆豆

生活随笔收集整理的這篇文章主要介紹了第27讲：令人抓狂的 JavaScript 混淆技术小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

我們?cè)谂廊【W(wǎng)站的時(shí)候，經(jīng)常會(huì)遇到各種各樣類似加密的情形，比如：

某個(gè)網(wǎng)站的 URL 帶有一些看不懂的長(zhǎng)串加密參數(shù)，想要抓取就必須要懂得這些參數(shù)是怎么構(gòu)造的，否則我們連完整的 URL 都構(gòu)造不出來(lái)，更不用說(shuō)爬取了。
分析某個(gè)網(wǎng)站的 Ajax 接口的時(shí)候，可以看到接口的一些參數(shù)也是加密的，或者 Request Headers 里面也可能帶有一些加密參數(shù)，如果不知道這些參數(shù)的具體構(gòu)造邏輯就無(wú)法直接用程序來(lái)模擬這些 Ajax 請(qǐng)求。
翻看網(wǎng)站的 JavaScript 源代碼，可以發(fā)現(xiàn)很多壓縮了或者看不太懂的字符，比如 JavaScript 文件名被編碼，JavaScript 的文件內(nèi)容被壓縮成幾行，JavaScript 變量也被修改成單個(gè)字符或者一些十六進(jìn)制的字符，導(dǎo)致我們不好輕易根據(jù) JavaScript 找出某些接口的加密邏輯。

這些情況，基本上都是網(wǎng)站為了保護(hù)其本身的一些數(shù)據(jù)不被輕易抓取而采取的一些措施，我們可以把它歸為兩大類：

接口加密技術(shù)；
JavaScript 壓縮、混淆和加密技術(shù)。

本課時(shí)我們就來(lái)了解下這兩類技術(shù)的實(shí)現(xiàn)原理。

1.數(shù)據(jù)保護(hù)

當(dāng)今大數(shù)據(jù)時(shí)代，數(shù)據(jù)已經(jīng)變得越來(lái)越重要，網(wǎng)頁(yè)和 App 現(xiàn)在是主流的數(shù)據(jù)載體，如果其數(shù)據(jù)的接口沒(méi)有設(shè)置任何保護(hù)措施，在爬蟲工程師解決了一些基本的反爬如封 IP、驗(yàn)證碼的問(wèn)題之后，那么數(shù)據(jù)還是可以被輕松抓取到。

那么，有沒(méi)有可能在接口或 JavaScript 層面也加上一層防護(hù)呢？答案是可以的。

2.接口加密技術(shù)

網(wǎng)站運(yùn)營(yíng)商首先想到防護(hù)措施可能是對(duì)某些數(shù)據(jù)接口進(jìn)行加密，比如說(shuō)對(duì)某些 URL 的一些參數(shù)加上校驗(yàn)碼或者把一些 ID 信息進(jìn)行編碼，使其變得難以閱讀或構(gòu)造；或者對(duì)某些接口請(qǐng)求加上一些 token、sign 等簽名，這樣這些請(qǐng)求發(fā)送到服務(wù)器時(shí)，服務(wù)器會(huì)通過(guò)客戶端發(fā)來(lái)的一些請(qǐng)求信息以及雙方約定好的秘鑰等來(lái)對(duì)當(dāng)前的請(qǐng)求進(jìn)行校驗(yàn)，如果校驗(yàn)通過(guò)，才返回對(duì)應(yīng)數(shù)據(jù)結(jié)果。

比如說(shuō)客戶端和服務(wù)端約定一種接口校驗(yàn)邏輯，客戶端在每次請(qǐng)求服務(wù)端接口的時(shí)候都會(huì)附帶一個(gè) sign 參數(shù)，這個(gè) sign 參數(shù)可能是由當(dāng)前時(shí)間信息、請(qǐng)求的 URL、請(qǐng)求的數(shù)據(jù)、設(shè)備的 ID、雙方約定好的秘鑰經(jīng)過(guò)一些加密算法構(gòu)造而成的，客戶端會(huì)實(shí)現(xiàn)這個(gè)加密算法構(gòu)造 sign，然后每次請(qǐng)求服務(wù)器的時(shí)候附帶上這個(gè)參數(shù)。服務(wù)端會(huì)根據(jù)約定好的算法和請(qǐng)求的數(shù)據(jù)對(duì) sign 進(jìn)行校驗(yàn)，如果校驗(yàn)通過(guò)，才返回對(duì)應(yīng)的數(shù)據(jù)，否則拒絕響應(yīng)。

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

接口加密技術(shù)看起來(lái)的確是一個(gè)不錯(cuò)的解決方案，但單純依靠它并不能很好地解決問(wèn)題。為什么呢？

對(duì)于網(wǎng)頁(yè)來(lái)說(shuō)，其邏輯是依賴于 JavaScript 來(lái)實(shí)現(xiàn)的，JavaScript 有如下特點(diǎn)：

JavaScript 代碼運(yùn)行于客戶端，也就是它必須要在用戶瀏覽器端加載并運(yùn)行。
JavaScript 代碼是公開透明的，也就是說(shuō)瀏覽器可以直接獲取到正在運(yùn)行的 JavaScript 的源碼。

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

所以說(shuō)，對(duì)于上述情形，客戶端 JavaScript 對(duì)于某些加密的實(shí)現(xiàn)是很容易被找到或模擬的，了解了加密邏輯后，模擬參數(shù)的構(gòu)造和請(qǐng)求也就是輕而易舉了，所以如果 JavaScript 沒(méi)有做任何層面的保護(hù)的話，接口加密技術(shù)基本上對(duì)數(shù)據(jù)起不到什么防護(hù)作用。

如果你不想讓自己的數(shù)據(jù)被輕易獲取，不想他人了解 JavaScript 邏輯的實(shí)現(xiàn)，或者想降低被不懷好意的人甚至是黑客攻擊。那么你就需要用到 JavaScript 壓縮、混淆和加密技術(shù)了。

這里壓縮、混淆、加密技術(shù)簡(jiǎn)述如下。

代碼壓縮：即去除 JavaScript 代碼中的不必要的空格、換行等內(nèi)容，使源碼都?jí)嚎s為幾行內(nèi)容，降低代碼可讀性，當(dāng)然同時(shí)也能提高網(wǎng)站的加載速度。
代碼混淆：使用變量替換、字符串陣列化、控制流平坦化、多態(tài)變異、僵尸函數(shù)、調(diào)試保護(hù)等手段，使代碼變得難以閱讀和分析，達(dá)到最終保護(hù)的目的。但這不影響代碼原有功能。是理想、實(shí)用的 JavaScript 保護(hù)方案。
代碼加密：可以通過(guò)某種手段將 JavaScript 代碼進(jìn)行加密，轉(zhuǎn)成人無(wú)法閱讀或者解析的代碼，如將代碼完全抽象化加密，如 eval 加密。另外還有更強(qiáng)大的加密技術(shù)，可以直接將 JavaScript 代碼用 C/C++ 實(shí)現(xiàn)，JavaScript 調(diào)用其編譯后形成的文件來(lái)執(zhí)行相應(yīng)的功能，如 Emscripten 還有 WebAssembly。

下面我們對(duì)上面的技術(shù)分別予以介紹。

4.接口加密技術(shù)

數(shù)據(jù)一般都是通過(guò)服務(wù)器提供的接口來(lái)獲取的，網(wǎng)站或 App 可以請(qǐng)求某個(gè)數(shù)據(jù)接口獲取到對(duì)應(yīng)的數(shù)據(jù)，然后再把獲取的數(shù)據(jù)展示出來(lái)。

但有些數(shù)據(jù)是比較寶貴或私密的，這些數(shù)據(jù)肯定是需要一定層面上的保護(hù)。所以不同接口的實(shí)現(xiàn)也就對(duì)應(yīng)著不同的安全防護(hù)級(jí)別，我們這里來(lái)總結(jié)下。

4.1完全開放的接口

有些接口是沒(méi)有設(shè)置任何防護(hù)的，誰(shuí)都可以調(diào)用和訪問(wèn)，而且沒(méi)有任何時(shí)空限制和頻率限制。任何人只要知道了接口的調(diào)用方式就能無(wú)限制地調(diào)用。

這種接口的安全性是非常非常低的，如果接口的調(diào)用方式一旦泄露或被抓包獲取到，任何人都可以無(wú)限制地對(duì)數(shù)據(jù)進(jìn)行操作或訪問(wèn)。此時(shí)如果接口里面包含一些重要的數(shù)據(jù)或隱私數(shù)據(jù)，就能輕易被篡改或竊取了。

4.2接口參數(shù)加密

為了提升接口的安全性，客戶端會(huì)和服務(wù)端約定一種接口校驗(yàn)方式，一般來(lái)說(shuō)會(huì)使用到各種加密和編碼算法，如 Base64、Hex 編碼，MD5、AES、DES、RSA 等加密。

比如客戶端和服務(wù)器雙方約定一個(gè) sign 用作接口的簽名校驗(yàn)，其生成邏輯是客戶端將 URL Path 進(jìn)行 MD5 加密然后拼接上 URL 的某個(gè)參數(shù)再進(jìn)行 Base64 編碼，最后得到一個(gè)字符串 sign，這個(gè) sign 會(huì)通過(guò) Request URL 的某個(gè)參數(shù)或 Request Headers 發(fā)送給服務(wù)器。服務(wù)器接收到請(qǐng)求后，對(duì) URL Path 同樣進(jìn)行 MD5 加密，然后拼接上 URL 的某個(gè)參數(shù)，也進(jìn)行 Base64 編碼得到了一個(gè) sign，然后比對(duì)生成的 sign 和客戶端發(fā)來(lái)的 sign 是否是一致的，如果是一致的，那就返回正確的結(jié)果，否則拒絕響應(yīng)。這就是一個(gè)比較簡(jiǎn)單的接口參數(shù)加密的實(shí)現(xiàn)。如果有人想要調(diào)用這個(gè)接口的話，必須要定義好 sign 的生成邏輯，否則是無(wú)法正常調(diào)用接口的。

以上就是一個(gè)基本的接口參數(shù)加密邏輯的實(shí)現(xiàn)。

當(dāng)然上面的這個(gè)實(shí)現(xiàn)思路比較簡(jiǎn)單，這里還可以增加一些時(shí)間戳信息增加時(shí)效性判斷，或增加一些非對(duì)稱加密進(jìn)一步提高加密的復(fù)雜程度。但不管怎樣，只要客戶端和服務(wù)器約定好了加密和校驗(yàn)邏輯，任何形式加密算法都是可以的。

這里要實(shí)現(xiàn)接口參數(shù)加密就需要用到一些加密算法，客戶端和服務(wù)器肯定也都有對(duì)應(yīng)的 SDK 實(shí)現(xiàn)這些加密算法，如 JavaScript 的 crypto-js，Python 的 hashlib、Crypto 等等。

但還是如上文所說(shuō)，如果是網(wǎng)頁(yè)的話，客戶端實(shí)現(xiàn)加密邏輯如果是用 JavaScript 來(lái)實(shí)現(xiàn)，其源代碼對(duì)用戶是完全可見(jiàn)的，如果沒(méi)有對(duì) JavaScript 做任何保護(hù)的話，是很容易弄清楚客戶端加密的流程的。

因此，我們需要對(duì) JavaScript 利用壓縮、混淆、加密的方式來(lái)對(duì)客戶端的邏輯進(jìn)行一定程度上的保護(hù)。

5.JavaScript 壓縮、混淆、加密

下面我們?cè)賮?lái)介紹下 JavaScript 的壓縮、混淆和加密技術(shù)。

5.1JavaScript 壓縮

這個(gè)非常簡(jiǎn)單，JavaScript 壓縮即去除 JavaScript 代碼中的不必要的空格、換行等內(nèi)容或者把一些可能公用的代碼進(jìn)行處理實(shí)現(xiàn)共享，最后輸出的結(jié)果都被壓縮為幾行內(nèi)容，代碼可讀性變得很差，同時(shí)也能提高網(wǎng)站加載速度。

如果僅僅是去除空格換行這樣的壓縮方式，其實(shí)幾乎是沒(méi)有任何防護(hù)作用的，因?yàn)檫@種壓縮方式僅僅是降低了代碼的直接可讀性。如果我們有一些格式化工具可以輕松將 JavaScript 代碼變得易讀，比如利用 IDE、在線工具或 Chrome 瀏覽器都能還原格式化的代碼。

目前主流的前端開發(fā)技術(shù)大多都會(huì)利用 Webpack 進(jìn)行打包，Webpack 會(huì)對(duì)源代碼進(jìn)行編譯和壓縮，輸出幾個(gè)打包好的 JavaScript 文件，其中我們可以看到輸出的 JavaScript 文件名帶有一些不規(guī)則字符串，同時(shí)文件內(nèi)容可能只有幾行內(nèi)容，變量名都是一些簡(jiǎn)單字母表示。這其中就包含 JavaScript 壓縮技術(shù)，比如一些公共的庫(kù)輸出成 bundle 文件，一些調(diào)用邏輯壓縮和轉(zhuǎn)義成幾行代碼，這些都屬于 JavaScript 壓縮。另外其中也包含了一些很基礎(chǔ)的 JavaScript 混淆技術(shù)，比如把變量名、方法名替換成一些簡(jiǎn)單字符，降低代碼可讀性。
但整體來(lái)說(shuō)，JavaScript 壓縮技術(shù)只能在很小的程度上起到防護(hù)作用，要想真正提高防護(hù)效果還得依靠 JavaScript 混淆和加密技術(shù)。

5.2JavaScript 混淆

JavaScript 混淆完全是在 JavaScript 上面進(jìn)行的處理，它的目的就是使得 JavaScript 變得難以閱讀和分析，大大降低代碼可讀性，是一種很實(shí)用的 JavaScript 保護(hù)方案。

JavaScript 混淆技術(shù)主要有以下幾種：

變量混淆

將帶有含意的變量名、方法名、常量名隨機(jī)變?yōu)闊o(wú)意義的類亂碼字符串，降低代碼可讀性，如轉(zhuǎn)成單個(gè)字符或十六進(jìn)制字符串。

字符串混淆

將字符串陣列化集中放置、并可進(jìn)行 MD5 或 Base64 加密存儲(chǔ)，使代碼中不出現(xiàn)明文字符串，這樣可以避免使用全局搜索字符串的方式定位到入口點(diǎn)。

屬性加密

針對(duì) JavaScript 對(duì)象的屬性進(jìn)行加密轉(zhuǎn)化，隱藏代碼之間的調(diào)用關(guān)系。

控制流平坦化

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

僵尸代碼

隨機(jī)在代碼中插入無(wú)用的僵尸代碼、僵尸函數(shù)，進(jìn)一步使代碼混亂。

調(diào)試保護(hù)

基于調(diào)試器特性，對(duì)當(dāng)前運(yùn)行環(huán)境進(jìn)行檢驗(yàn)，加入一些強(qiáng)制調(diào)試 debugger 語(yǔ)句，使其在調(diào)試模式下難以順利執(zhí)行 JavaScript 代碼。

多態(tài)變異

使 JavaScript 代碼每次被調(diào)用時(shí)，將代碼自身即立刻自動(dòng)發(fā)生變異，變化為與之前完全不同的代碼，即功能完全不變，只是代碼形式變異，以此杜絕代碼被動(dòng)態(tài)分析調(diào)試。

鎖定域名

使 JavaScript 代碼只能在指定域名下執(zhí)行。

反格式化

如果對(duì) JavaScript 代碼進(jìn)行格式化，則無(wú)法執(zhí)行，導(dǎo)致瀏覽器假死。

特殊編碼

將 JavaScript 完全編碼為人不可讀的代碼，如表情符號(hào)、特殊表示內(nèi)容等等。

總之，以上方案都是 JavaScript 混淆的實(shí)現(xiàn)方式，可以在不同程度上保護(hù) JavaScript 代碼。

在前端開發(fā)中，現(xiàn)在 JavaScript 混淆主流的實(shí)現(xiàn)是 javascript-obfuscator 這個(gè)庫(kù)，利用它我們可以非常方便地實(shí)現(xiàn)頁(yè)面的混淆，它與 Webpack 結(jié)合起來(lái)，最終可以輸出壓縮和混淆后的 JavaScript 代碼，使得可讀性大大降低，難以逆向。

下面我們會(huì)介紹下 javascript-obfuscator 對(duì)代碼混淆的實(shí)現(xiàn)，了解了實(shí)現(xiàn)，那么自然我們就對(duì)混淆的機(jī)理有了更加深刻的認(rèn)識(shí)。

javascript-obfuscator 的官網(wǎng)地址為：https://obfuscator.io/，其官方介紹內(nèi)容如下： A free
and efficient obfuscator for JavaScript (including ES2017). Make your
code harder to copy and prevent people from stealing your work.

它是支持 ES8 的免費(fèi)、高效的 JavaScript 混淆庫(kù)，它可以使得你的 JavaScript 代碼經(jīng)過(guò)混淆后難以被復(fù)制、盜用，混淆后的代碼具有和原來(lái)的代碼一模一樣的功能。

怎么使用呢？首先，我們需要安裝好 Node.js，可以使用 npm 命令。

然后新建一個(gè)文件夾，比如 js-obfuscate，隨后進(jìn)入該文件夾，初始化工作空間：

npm init

這里會(huì)提示我們輸入一些信息，創(chuàng)建一個(gè) package.json 文件，這就完成了項(xiàng)目初始化了。

接下來(lái)我們來(lái)安裝 javascript-obfuscator 這個(gè)庫(kù)：

npm install --save-dev javascript-obfuscator

接下來(lái)我們就可以編寫代碼來(lái)實(shí)現(xiàn)混淆了，如新建一個(gè) main.js 文件，內(nèi)容如下：

const code = ` let x = '1' + 1 console.log('x', x) `const options = {compact: false,controlFlowFlattening: true}const obfuscator = require('javascript-obfuscator') function obfuscate(code, options) {return obfuscator.obfuscate(code, options).getObfuscatedCode() } console.log(obfuscate(code, options))

在這里我們定義了兩個(gè)變量，一個(gè)是 code，即需要被混淆的代碼，另一個(gè)是混淆選項(xiàng)，是一個(gè) Object。接下來(lái)我們引入了 javascript-obfuscator 庫(kù)，然后定義了一個(gè)方法，傳入 code 和 options，來(lái)獲取混淆后的代碼，最后控制臺(tái)輸出混淆后的代碼。

代碼邏輯比較簡(jiǎn)單，我們來(lái)執(zhí)行一下代碼：

node main.js

輸出結(jié)果如下：

看到了吧，這么簡(jiǎn)單的兩行代碼，被我們混淆成了這個(gè)樣子，其實(shí)這里我們就是設(shè)定了一個(gè)“控制流扁平化”的選項(xiàng)。

整體看來(lái)，代碼的可讀性大大降低，也大大加大了 JavaScript 調(diào)試的難度。

好，接下來(lái)我們來(lái)跟著 javascript-obfuscator 走一遍，就能具體知道 JavaScript 混淆到底有多少方法了。

代碼壓縮

這里 javascript-obfuscator 也提供了代碼壓縮的功能，使用其參數(shù) compact 即可完成 JavaScript 代碼的壓縮，輸出為一行內(nèi)容。默認(rèn)是 true，如果定義為 false，則混淆后的代碼會(huì)分行顯示。

示例如下：

const code = ` let x = '1' + 1 console.log('x', x) ` const options = {compact: false }

這里我們先把代碼壓縮 compact 選項(xiàng)設(shè)置為 false，運(yùn)行結(jié)果如下：

let x = '1' + 0x1; console['log']('x', x);

如果不設(shè)置 compact 或把 compact 設(shè)置為 true，結(jié)果如下：

可以看到單行顯示的時(shí)候，對(duì)變量名進(jìn)行了進(jìn)一步的混淆和控制流扁平化操作。

變量名混淆

變量名混淆可以通過(guò)配置 identifierNamesGenerator 參數(shù)實(shí)現(xiàn)，我們通過(guò)這個(gè)參數(shù)可以控制變量名混淆的方式，如 hexadecimal 則會(huì)替換為 16 進(jìn)制形式的字符串，在這里我們可以設(shè)定如下值：

hexadecimal：將變量名替換為 16 進(jìn)制形式的字符串，如 0xabc123。
mangled：將變量名替換為普通的簡(jiǎn)寫字符，如 a、b、c 等。

該參數(shù)默認(rèn)為 hexadecimal。

我們將該參數(shù)修改為 mangled 來(lái)試一下：

const code = ` let hello = '1' + 1 console.log('hello', hello) ` const options = {compact: true,identifierNamesGenerator: 'mangled' }

運(yùn)行結(jié)果如下：

可以看到這里的變量命名都變成了 a、b 等形式。

如果我們將 identifierNamesGenerator 修改為 hexadecimal 或者不設(shè)置，運(yùn)行結(jié)果如下：

可以看到選用了 mangled，其代碼體積會(huì)更小，但 hexadecimal 其可讀性會(huì)更低。

另外我們還可以通過(guò)設(shè)置 identifiersPrefix 參數(shù)來(lái)控制混淆后的變量前綴，示例如下：

const code = ` let hello = '1' + 1 console.log('hello', hello) ` const options = {identifiersPrefix: 'germey' }

運(yùn)行結(jié)果：

可以看到混淆后的變量前綴加上了我們自定義的字符串 germey。

另外 renameGlobals 這個(gè)參數(shù)還可以指定是否混淆全局變量和函數(shù)名稱，默認(rèn)為 false。示例如下：

const code = ` var $ = function(id) {return document.getElementById(id); }; ` const options = {renameGlobals: true }

運(yùn)行結(jié)果如下：

var _0x4864b0=function(_0x5763be){return document['getElementById'](_0x5763be);};

可以看到這里我們聲明了一個(gè)全局變量 $，在 r e n a m e G l o b a l s 設(shè) 置為 t r u e 之后，$ 這個(gè)變量也被替換了。如果后文用到了這個(gè) $ 對(duì)象，可能就會(huì)有找不到定義的錯(cuò)誤，因此這個(gè)參數(shù)可能導(dǎo)致代碼執(zhí)行不通。

如果我們不設(shè)置 renameGlobals 或者設(shè)置為 false，結(jié)果如下：

可以看到，最后還是有 $ 的聲明，其全局名稱沒(méi)有被改變。

字符串混淆

字符串混淆，即將一個(gè)字符串聲明放到一個(gè)數(shù)組里面，使之無(wú)法被直接搜索到。我們可以通過(guò)控制 stringArray 參數(shù)來(lái)控制，默認(rèn)為 true。

我們還可以通過(guò) rotateStringArray 參數(shù)來(lái)控制數(shù)組化后結(jié)果的元素順序，默認(rèn)為 true。
還可以通過(guò) stringArrayEncoding 參數(shù)來(lái)控制數(shù)組的編碼形式，默認(rèn)不開啟編碼，如果設(shè)置為 true 或 base64，則會(huì)使用 Base64 編碼，如果設(shè)置為 rc4，則使用 RC4 編碼。
還可以通過(guò) stringArrayThreshold 來(lái)控制啟用編碼的概率，范圍 0 到 1，默認(rèn) 0.8。

示例如下：

const code = ` var a = 'hello world' ` const options = {stringArray: true,rotateStringArray: true,stringArrayEncoding: true, // 'base64' or 'rc4' or falsestringArrayThreshold: 1, }

運(yùn)行結(jié)果如下：

可以看到這里就把字符串進(jìn)行了 Base64 編碼，我們?cè)僖矡o(wú)法通過(guò)查找的方式找到字符串的位置了。

如果將 stringArray 設(shè)置為 false 的話，輸出就是這樣：

var a='hello\x20world';

字符串就仍然是明文顯示的，沒(méi)有被編碼。

另外我們還可以使用 unicodeEscapeSequence 這個(gè)參數(shù)對(duì)字符串進(jìn)行 Unicode 轉(zhuǎn)碼，使之更加難以辨認(rèn)，示例如下：

const code = ` var a = 'hello world' ` const options = {compact: false,unicodeEscapeSequence: true }

運(yùn)行結(jié)果如下：

可以看到，這里字符串被數(shù)字化和 Unicode 化，非常難以辨認(rèn)。

在很多 JavaScript 逆向的過(guò)程中，一些關(guān)鍵的字符串可能會(huì)作為切入點(diǎn)來(lái)查找加密入口。用了這種混淆之后，如果有人想通過(guò)全局搜索的方式搜索 hello 這樣的字符串找加密入口，也沒(méi)法搜到了。

代碼自我保護(hù)

我們可以通過(guò)設(shè)置 selfDefending 參數(shù)來(lái)開啟代碼自我保護(hù)功能。開啟之后，混淆后的 JavaScript 會(huì)強(qiáng)制以一行形式顯示，如果我們將混淆后的代碼進(jìn)行格式化（美化）或者重命名，該段代碼將無(wú)法執(zhí)行。

例如：

const code = ` console.log('hello world') ` const options = {selfDefending: true }

運(yùn)行結(jié)果如下：

如果我們將上述代碼放到控制臺(tái)，它的執(zhí)行結(jié)果和之前是一模一樣的，沒(méi)有任何問(wèn)題。
如果我們將其進(jìn)行格式化，會(huì)變成如下內(nèi)容：

控制流平坦化

控制流平坦化其實(shí)就是將代碼的執(zhí)行邏輯混淆，使其變得復(fù)雜難讀。其基本思想是將一些邏輯處理塊都統(tǒng)一加上一個(gè)前驅(qū)邏輯塊，每個(gè)邏輯塊都由前驅(qū)邏輯塊進(jìn)行條件判斷和分發(fā)，構(gòu)成一個(gè)個(gè)閉環(huán)邏輯，導(dǎo)致整個(gè)執(zhí)行邏輯十分復(fù)雜難讀。

我們通過(guò) controlFlowFlattening 變量可以控制是否開啟控制流平坦化，示例如下：

輸出結(jié)果如下：

可以看到，一些連續(xù)的執(zhí)行邏輯被打破，代碼被修改為一個(gè) switch 語(yǔ)句，我們很難再一眼看出多條 console.log 語(yǔ)句的執(zhí)行順序了。

如果我們將 controlFlowFlattening 設(shè)置為 false 或者不設(shè)置，運(yùn)行結(jié)果如下：

可以看到，這里仍然保留了原始的 console.log 執(zhí)行邏輯。

因此，使用控制流扁平化可以使得執(zhí)行邏輯更加復(fù)雜難讀，目前非常多的前端混淆都會(huì)加上這個(gè)選項(xiàng)。

但啟用控制流扁平化之后，代碼的執(zhí)行時(shí)間會(huì)變長(zhǎng)，最長(zhǎng)達(dá) 1.5 倍之多。

另外我們還能使用 controlFlowFlatteningThreshold 這個(gè)參數(shù)來(lái)控制比例，取值范圍是 0 到 1，默認(rèn) 0.75，如果設(shè)置為 0，那相當(dāng)于 controlFlowFlattening 設(shè)置為 false，即不開啟控制流扁平化。

僵尸代碼注入

僵尸代碼即不會(huì)被執(zhí)行的代碼或?qū)ι舷挛臎](méi)有任何影響的代碼，注入之后可以對(duì)現(xiàn)有的 JavaScript 代碼的閱讀形成干擾。我們可以使用 deadCodeInjection 參數(shù)開啟這個(gè)選項(xiàng)，默認(rèn)為 false。

示例如下：

運(yùn)行結(jié)果如下：

可見(jiàn)這里增加了一些不會(huì)執(zhí)行到的邏輯區(qū)塊內(nèi)容。

如果將 deadCodeInjection 設(shè)置為 false 或者不設(shè)置，運(yùn)行結(jié)果如下：

另外我們還可以通過(guò)設(shè)置 deadCodeInjectionThreshold 參數(shù)來(lái)控制僵尸代碼注入的比例，取值 0 到 1，默認(rèn)是 0.4。

僵尸代碼可以起到一定的干擾作用，所以在有必要的時(shí)候也可以注入。

對(duì)象鍵名替換

如果是一個(gè)對(duì)象，可以使用 transformObjectKeys 來(lái)對(duì)對(duì)象的鍵值進(jìn)行替換，示例如下：

const code = ` (function(){var object = {foo: 'test1',bar: {baz: 'test2'}}; })(); ` const options = {compact: false,transformObjectKeys: true }

輸出結(jié)果如下：

可以看到，Object 的變量名被替換為了特殊的變量，這也可以起到一定的防護(hù)作用。

禁用控制臺(tái)輸出

可以使用 disableConsoleOutput 來(lái)禁用掉 console.log 輸出功能，加大調(diào)試難度，示例如下：

const code = ` console.log('hello world') ` const options = {disableConsoleOutput: true }

運(yùn)行結(jié)果如下：

此時(shí)，我們?nèi)绻麍?zhí)行這段代碼，發(fā)現(xiàn)是沒(méi)有任何輸出的，這里實(shí)際上就是將 console 的一些功能禁用了，加大了調(diào)試難度。

調(diào)試保護(hù)

我們可以使用 debugProtection 來(lái)禁用調(diào)試模式，進(jìn)入無(wú)限 Debug 模式。另外我們還可以使用 debugProtectionInterval 來(lái)啟用無(wú)限 Debug 的間隔，使得代碼在調(diào)試過(guò)程中會(huì)不斷進(jìn)入斷點(diǎn)模式，無(wú)法順暢執(zhí)行。
示例如下：

const code = ` for (let i = 0; i < 5; i ++) {console.log('i', i) } ` const options = {debugProtection: true }

運(yùn)行結(jié)果如下：

如果我們將代碼粘貼到控制臺(tái)，其會(huì)不斷跳到 debugger 代碼的位置，無(wú)法順暢執(zhí)行。

域名鎖定

我們可以通過(guò)控制 domainLock 來(lái)控制 JavaScript 代碼只能在特定域名下運(yùn)行，這樣就可以降低被模擬的風(fēng)險(xiǎn)。

示例如下：

const code = ` console.log('hello world') ` const options = {domainLock: ['cuiqingcai.com'] }

運(yùn)行結(jié)果如下：

這段代碼就只能在指定域名 cuiqingcai.com 下運(yùn)行，不能在其他網(wǎng)站運(yùn)行，不信你可以試試。

特殊編碼

另外還有一些特殊的工具包，如使用 aaencode、jjencode、jsfuck 等工具對(duì)代碼進(jìn)行混淆和編碼。

示例如下：

var a = 1

jsfuck 的結(jié)果：

[][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[

aaencode 的結(jié)果：

ﾟωﾟﾉ= /｀ｍ′）ﾉ ~┻━┻ / ['_']; o=(ﾟｰﾟ) =_=3; c=(ﾟΘﾟ) =(ﾟｰﾟ)-(ﾟｰﾟ);

jjencode 的結(jié)果：

$=~[];$={___:++$,$$$$:(![]+"")[$],__$:++$,$_$_:(![]+"")[$],_$_:++$,$_$$:({}+"")[$],$$_$:($[$]+"")[$],_$$:++$,$$$_:(!""+"")[$],$__:++$,$_$:++$,$$__:({}+"")[$],$

這些混淆方式比較另類，但只需要輸入到控制臺(tái)即可執(zhí)行，其沒(méi)有真正達(dá)到強(qiáng)力混淆的效果。

以上便是對(duì) JavaScript 混淆方式的介紹和總結(jié)。總的來(lái)說(shuō)，經(jīng)過(guò)混淆的 JavaScript 代碼其可讀性大大降低，同時(shí)防護(hù)效果也大大增強(qiáng)。

6.JavaScript 加密

不同于 JavaScript 混淆技術(shù)，JavaScript 加密技術(shù)可以說(shuō)是對(duì) JavaScript 混淆技術(shù)防護(hù)的進(jìn)一步升級(jí)，其基本思路是將一些核心邏輯使用諸如 C/C++ 語(yǔ)言來(lái)編寫，并通過(guò) JavaScript 調(diào)用執(zhí)行，從而起到二進(jìn)制級(jí)別的防護(hù)作用。

其加密的方式現(xiàn)在有 Emscripten 和 WebAssembly 等，其中后者越來(lái)越成為主流。
下面我們分別來(lái)介紹下。

Emscripten

現(xiàn)在，許多 3D 游戲都是用 C/C++ 語(yǔ)言寫的，如果能將 C / C++ 語(yǔ)言編譯成 JavaScript 代碼，它們不就能在瀏覽器里運(yùn)行了嗎？眾所周知，JavaScript 的基本語(yǔ)法與 C 語(yǔ)言高度相似。于是，有人開始研究怎么才能實(shí)現(xiàn)這個(gè)目標(biāo)，為此專門做了一個(gè)編譯器項(xiàng)目 Emscripten。這個(gè)編譯器可以將 C / C++ 代碼編譯成 JavaScript 代碼，但不是普通的 JavaScript，而是一種叫作 asm.js 的 JavaScript 變體。

因此說(shuō)，某些 JavaScript 的核心功能可以使用 C/C++ 語(yǔ)言實(shí)現(xiàn)，然后通過(guò) Emscripten 編譯成 asm.js，再由 JavaScript 調(diào)用執(zhí)行，這可以算是一種前端加密技術(shù)。

WebAssembly

如果你對(duì) JavaScript 比較了解，可能知道還有一種叫作 WebAssembly 的技術(shù)，也能將 C/C++ 轉(zhuǎn)成 JavaScript 引擎可以運(yùn)行的代碼。那么它與 asm.js 有何區(qū)別呢？

其實(shí)兩者的功能基本一致，就是轉(zhuǎn)出來(lái)的代碼不一樣：asm.js 是文本，WebAssembly 是二進(jìn)制字節(jié)碼，因此運(yùn)行速度更快、體積更小。從長(zhǎng)遠(yuǎn)來(lái)看，WebAssembly 的前景更光明。

WebAssembly 是經(jīng)過(guò)編譯器編譯之后的字節(jié)碼，可以從 C/C++ 編譯而來(lái)，得到的字節(jié)碼具有和 JavaScript 相同的功能，但它體積更小，而且在語(yǔ)法上完全脫離 JavaScript，同時(shí)具有沙盒化的執(zhí)行環(huán)境。

利用 WebAssembly 技術(shù)，我們可以將一些核心的功能利用 C/C++ 語(yǔ)言實(shí)現(xiàn)，形成瀏覽器字節(jié)碼的形式。然后在 JavaScript 中通過(guò)類似如下的方式調(diào)用：

WebAssembly.compile(new Uint8Array(`00 61 73 6d 01 00 00 00 01 0c 02 60 02 7f 7f 017f 60 01 7f 01 7f 03 03 02 00 01 07 10 02 03 6164 64 00 00 06 73 71 75 61 72 65 00 01 0a 13 0208 00 20 00 20 01 6a 0f 0b 08 00 20 00 20 00 6c0f 0b`.trim().split(/[\s\r\n]+/g).map(str => parseInt(str, 16)) )).then(module => {const instance = new WebAssembly.Instance(module)const { add, square } = instance.exportsconsole.log('2 + 4 =', add(2, 4))console.log('3^2 =', square(3))console.log('(2 + 5)^2 =', square(add(2 + 5))) })

這種加密方式更加安全，因?yàn)樽鳛槎M(jìn)制編碼它能起到的防護(hù)效果無(wú)疑是更好的。如果想要逆向或破解那得需要逆向 WebAssembly，難度也是很大的。

7.總結(jié)

以上，我們就介紹了接口加密技術(shù)和 JavaScript 的壓縮、混淆和加密技術(shù)，知己知彼方能百戰(zhàn)不殆，了解了原理，我們才能更好地去實(shí)現(xiàn) JavaScript 的逆向。
本節(jié)代碼：https://github.com/Python3WebSpider/JavaScriptObfuscate

參考文獻(xiàn)

https://www.ruanyifeng.com/blog/2017/09/asmjs_emscripten.html
https://juejin.im/post/5cfcb9d25188257e853fa71c#heading-23
https://www.jianshu.com/p/326594cbd4fa
https://github.com/javascript-obfuscator/javascript-obfuscator
https://obfuscator.io/
https://www.sojson.com/jjencode.html
http://dean.edwards.name/packer/

總結(jié)

以上是生活随笔為你收集整理的第27讲：令人抓狂的 JavaScript 混淆技术的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：第23讲：利用资源，学会用打码平台处理验
下一篇：第50讲：Scrapy 部署不用愁，Sc