如何讓別人看不懂你的 JS 代碼？
大家好，我是 ConardLi。
我們在上周的文章中一種奇特的 JavaScript 編碼風(fēng)格：Get 一種可以用來裝逼的 JavaScript 編碼風(fēng)格，引起了廣大網(wǎng)友的熱議。
這是實(shí)際上屬于一種代碼混淆技術(shù)，可以讓們的代碼更難閱讀和逆向，同時(shí)也能租網(wǎng)一些惡意爬蟲和自動(dòng)化分析。天我就帶大家來看看還有哪些其他能讓 JavaScript 代碼變得難以分析的代碼混淆技術(shù)。
我們以下面這段代碼為例：
console.log("ConardLi",666);通過一些轉(zhuǎn)換，它可以變成下面這個(gè)樣子：
怎么做到的呢？我們一起來看一下～
十六進(jìn)制字符串編碼
我們嘗試去 Javascript Obfuscator? 這個(gè)網(wǎng)站，選中 Encode Strings 復(fù)選框，將得到下面的代碼：
console["\x6C\x6F\x67"]("\x43\x6F\x6E\x61\x72\x64\x4C\x69\x20"+ 666)它的原理很簡單，就是將字符串的每個(gè) ASCII? 字符轉(zhuǎn)換為十六進(jìn)制形式（將函數(shù)調(diào)用改為用括號(hào)的形式，例如 console.log? -> console['log'] 在代碼混淆中也是相當(dāng)常見的做法），這就是最簡單的混淆了，但是只能騙騙小白，我們可以輕易的反解：
這種技術(shù)還有一些其他變體，比如用 unicode 編碼替換字符。
https://javascriptobfuscator.com/Javascript-Obfuscator.aspx
字符串?dāng)?shù)組映射
還是在上面的網(wǎng)站，我們選中 Move Strings 這個(gè)選項(xiàng)，得到的代碼是下面這樣的：
var _0x8925=["\x43\x6F\x6E\x61\x72\x64\x4C\x69\x20","\x6C\x6F\x67"];
console[_0x8925[1]](_0x8925[0]+ 666)
多了個(gè)字符串?dāng)?shù)組，通過在不同索引處引入數(shù)組來間接使用這些字符串。
死代碼注入
死代碼其實(shí)指的就是一些無法訪問的代碼，我們可以在原本的代碼上額外注入一些永遠(yuǎn)無法訪問的代碼來讓代碼難以閱讀，但是同時(shí)也會(huì)讓代碼變得更大。這次我們嘗試一下 defendjs：
安裝：
$ npm install -g https://github.com/alexhorn/defendjs.git
我們嘗試創(chuàng)建一個(gè) conardli.js 并且將上面的代碼放入這個(gè)文件，執(zhí)行下面的命令：
$ defendjs --input conardli.js --features dead_code --output .
得到了下面這一大坨代碼：
(function () {
function a(a, d) {
var b = new Array(0);;
var c = arguments;
while (true)
try {
switch (a) {
case 21309:
return;
case 792:
function e(a, b) {
return Array.prototype.slice.call(a).concat(Array.prototype.slice.call(b));
}
function f() {
var a = arguments[0], c = Array.prototype.slice.call(arguments, 1);
var b = function () {
return a.apply(this, c.concat(Array.prototype.slice.call(arguments)));
};
b.prototype = a.prototype;
return b;
}
function g(a, b) {
return Array.prototype.slice.call(a, b);
}
function h(b) {
var c = {};
for (var a = 0; a < b.length; a += 2) {
c[b[a]] = b[a + 1];
}
return c;
}
function i(a) {
return a.map(function (a) {
return String.fromCharCode(a & ~0 >>> 16) + String.fromCharCode(a >> 16);
}).join('');
}
function j() {
return String.fromCharCode.apply(null, arguments);
}
console.log('ConardLi', 666);
a = 21309;
break;
}
} catch (b) {
$$defendjs$tobethrown = null;
switch (a) {
default:
throw b;
}
}
}
a(792, {});
}())代碼很大，其實(shí)仔細(xì)分析就會(huì)發(fā)現(xiàn)其余插入的代碼都是無法運(yùn)行的：
最頂層包了一個(gè) IIFE?，然后有一個(gè) a? 函數(shù)，a、b? 兩個(gè)參數(shù)。調(diào)用 a? 函數(shù)時(shí)只傳入了第一個(gè)參數(shù) 792，然后就會(huì)發(fā)現(xiàn) a 函數(shù)里有個(gè) switch? 語句，只會(huì)執(zhí)行到第二個(gè) case，里面是這樣的語句：
e、f、g、h、j、i 這幾個(gè)函數(shù)都是沒有調(diào)用的，所以只會(huì)執(zhí)行最后的 console.log('ConardLi', 666); 語句...
https://github.com/alexhorn/defendjs
作用域混淆
我們將代碼還原回去，重新執(zhí)行 defendjs? 的 scope 能力：
$ defendjs --input conardli.js --features scope --output .
(function () {
{
{
function b(a, b) {
return Array.prototype.slice.call(a).concat(Array.prototype.slice.call(b));
}
function c() {
var a = arguments[0], c = Array.prototype.slice.call(arguments, 1);
var b = function () {
return a.apply(this, c.concat(Array.prototype.slice.call(arguments)));
};
b.prototype = a.prototype;
return b;
}
function d(a, b) {
return Array.prototype.slice.call(a, b);
}
function e(b) {
var c = {};
for (var a = 0; a < b.length; a += 2) {
c[b[a]] = b[a + 1];
}
return c;
}
function f(a) {
return a.map(function (a) {
return String.fromCharCode(a & ~0 >>> 16) + String.fromCharCode(a >> 16);
}).join('');
}
function g() {
return String.fromCharCode.apply(null, arguments);
}
}
var a = [];
console.log('ConardLi', 666);
}
}())這個(gè)可能看起來像是前面的一個(gè)簡單版本，但是有一個(gè)關(guān)鍵的區(qū)別：它引入了多個(gè)具有重復(fù)標(biāo)識(shí)符的詞法作用域。例如，a? 可能是最內(nèi)層作用域中第一個(gè)函數(shù)的參數(shù)，也可以是第二個(gè)函數(shù)中的變量，甚至可以是與我們的 conaole.log 語句相同作用域中的變量。在這個(gè)簡單的示例中，很容易看穿，因?yàn)樽顑?nèi)層范圍內(nèi)的任何函數(shù)都不會(huì)在任何地方被調(diào)用，但是，現(xiàn)實(shí)的業(yè)務(wù)代碼往往是很復(fù)雜的，混淆后就不那么容易看穿了。
字符編碼
還是使用 defendjs ，對我們的代碼執(zhí)行下面的命令：
$ defendjs --input conardli.js --features literals --output .
得到下面的代碼：
(function () {
function c() {
var c = arguments;
var b = [];
b[1] = '';
b[1] += a(67, 111, 110);
b[1] += a(97);
b[1] += a(114, 100);
b[1] += a(76, 105);
return b[1];
}
{
{
function e(a, b) {
return Array.prototype.slice.call(a).concat(Array.prototype.slice.call(b));
}
function d() {
var a = arguments[0], c = Array.prototype.slice.call(arguments, 1);
var b = function () {
return a.apply(this, c.concat(Array.prototype.slice.call(arguments)));
};
b.prototype = a.prototype;
return b;
}
function f(a, b) {
return Array.prototype.slice.call(a, b);
}
function g(b) {
var c = {};
for (var a = 0; a < b.length; a += 2) {
c[b[a]] = b[a + 1];
}
return c;
}
function h(a) {
return a.map(function (a) {
return String.fromCharCode(a & ~0 >>> 16) + String.fromCharCode(a >> 16);
}).join('');
}
function a() {
return String.fromCharCode.apply(null, arguments);
}
}
var b = [];
console.log(d(c, b)(), 666);
}
}())在這種情況下，硬編碼會(huì)被轉(zhuǎn)換成 Unicode 然后重新計(jì)算，這樣直接閱讀代碼就很難再直接看穿硬編碼的字符串了。
變量縮短
Mangling 是一種為了優(yōu)化和混淆目的而縮短變量和屬性名稱的轉(zhuǎn)換。比如下面的代碼：
let sixSixSix = 666;
let name = "ConardLi ";
console.log(name + sixSixSix);
我們使用 DefendJS? 的 mangling 功能：
$ defendjs --input conardli.js --features mangle --output .
得到的代碼是：
(function () {
var a = 666;
var b = 'ConardLi! ';
console.log(b + a);
}())兩個(gè)變量都被重新命名了，在這個(gè)簡單的例子下還是很好分析的。但是如果是龐大的業(yè)務(wù)代碼，這會(huì)讓我們的代碼變得非常難以閱讀。
代碼壓縮
下面，綜合利用一下幾種技術(shù)，執(zhí)行：
defendjs --input conardli.js --output . --features=control_flow,literals,mangle,compress
得到下面的代碼：
(function(){function a(d,g){var b=new Array(1);;var e=arguments;while(true)t
