如何讓別人看不懂你的 JS 代碼？
大家好，我是 ConardLi。
我們在上周的文章中一種奇特的 JavaScript 編碼風格：Get 一種可以用來裝逼的 JavaScript 編碼風格，引起了廣大網友的熱議。
這是實際上屬于一種代碼混淆技術，可以讓們的代碼更難閱讀和逆向，同時也能租網一些惡意爬蟲和自動化分析。天我就帶大家來看看還有哪些其他能讓 JavaScript 代碼變得難以分析的代碼混淆技術。
我們以下面這段代碼為例：
console.log("ConardLi",666);通過一些轉換，它可以變成下面這個樣子：
怎么做到的呢？我們一起來看一下～
十六進制字符串編碼
我們嘗試去 Javascript Obfuscator? 這個網站，選中 Encode Strings 復選框，將得到下面的代碼：
console["\x6C\x6F\x67"]("\x43\x6F\x6E\x61\x72\x64\x4C\x69\x20"+ 666)它的原理很簡單，就是將字符串的每個 ASCII? 字符轉換為十六進制形式（將函數調用改為用括號的形式，例如 console.log? -> console['log'] 在代碼混淆中也是相當常見的做法），這就是最簡單的混淆了，但是只能騙騙小白，我們可以輕易的反解：
這種技術還有一些其他變體，比如用 unicode 編碼替換字符。
https://javascriptobfuscator.com/Javascript-Obfuscator.aspx
字符串數組映射
還是在上面的網站，我們選中 Move Strings 這個選項，得到的代碼是下面這樣的：
var _0x8925=["\x43\x6F\x6E\x61\x72\x64\x4C\x69\x20","\x6C\x6F\x67"];
console[_0x8925[1]](_0x8925[0]+ 666)
多了個字符串數組，通過在不同索引處引入數組來間接使用這些字符串。
死代碼注入
死代碼其實指的就是一些無法訪問的代碼，我們可以在原本的代碼上額外注入一些永遠無法訪問的代碼來讓代碼難以閱讀，但是同時也會讓代碼變得更大。這次我們嘗試一下 defendjs：
安裝：
$ npm install -g https://github.com/alexhorn/defendjs.git
我們嘗試創建一個 conardli.js 并且將上面的代碼放入這個文件，執行下面的命令：
$ 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, {});
}())代碼很大，其實仔細分析就會發現其余插入的代碼都是無法運行的：
最頂層包了一個 IIFE?，然后有一個 a? 函數，a、b? 兩個參數。調用 a? 函數時只傳入了第一個參數 792，然后就會發現 a 函數里有個 switch? 語句，只會執行到第二個 case，里面是這樣的語句：
e、f、g、h、j、i 這幾個函數都是沒有調用的，所以只會執行最后的 console.log('ConardLi', 666); 語句...
https://github.com/alexhorn/defendjs
作用域混淆
我們將代碼還原回去，重新執行 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);
}
}())這個可能看起來像是前面的一個簡單版本，但是有一個關鍵的區別：它引入了多個具有重復標識符的詞法作用域。例如，a? 可能是最內層作用域中第一個函數的參數，也可以是第二個函數中的變量，甚至可以是與我們的 conaole.log 語句相同作用域中的變量。在這個簡單的示例中，很容易看穿，因為最內層范圍內的任何函數都不會在任何地方被調用，但是，現實的業務代碼往往是很復雜的，混淆后就不那么容易看穿了。
字符編碼
還是使用 defendjs ，對我們的代碼執行下面的命令：
$ 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);
}
}())在這種情況下，硬編碼會被轉換成 Unicode 然后重新計算，這樣直接閱讀代碼就很難再直接看穿硬編碼的字符串了。
變量縮短
Mangling 是一種為了優化和混淆目的而縮短變量和屬性名稱的轉換。比如下面的代碼：
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);
}())兩個變量都被重新命名了，在這個簡單的例子下還是很好分析的。但是如果是龐大的業務代碼，這會讓我們的代碼變得非常難以閱讀。
代碼壓縮
下面，綜合利用一下幾種技術，執行：
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
