【前端混淆】JavaScript Obfuscator

引言：

前端代码是直接暴漏在浏览器中的，很多web攻击都是通过直接debug业务逻辑找到漏洞进行攻击，另外还有些喜欢“不劳而获”的分子暴力盗取他人网页简单修改后用来获利，总体上来说就是前端的逻辑太容易读懂了，本文主要基于JavaScript Obfuscator介绍一下前端混淆的基本思路。

一、JavaScript Obfuscator简介：

　　JavaScript Obfuscator是Timofey Kachalov开发的一款JS混淆工具，传统的如uflifyJS等混淆工具主要都是用来压缩代码、降低资源加载时间的，混淆只是附带属性。JavaScript Obfuscator的主要目的就是为了安全，保护前端代码。

 

二、JavaScript Obfuscator特性：

　　JavaScript Obfuscator的混淆原理我就不介绍了，就是用工具对JS进行一下AST（抽象语法树）分析、修改，再重新根据AST生成JS就可以了，uglifyJS也可以实现，给大家推荐一下 esprima http://esprima.org/，github上有一系列工具，用来做混淆和反混淆都非常好用。

　　下面我直接讲一下JavaScript Obfuscator的特性，主要特性包括：

• 关键字提取，增加读取难度：

　　JavaScript Obfuscator会将JS里面的关键字，如字符常量等提取出来放到数组中，调用的时候用数组下标的方式调用，这样的话直接读懂基本不可能了，要么反AST处理下，要么一步一步调试，工作量大增。

var test = "hello";
//处理后
var _0x7deb=[\'hello\'];(function(_0xdf8359,_0x2abb06){var _0x4b8e4a=function(_0x3c281c){while(--_0x3c281c){_0xdf8359[\'push\'](_0xdf8359[\'shift\']());}};_0x4b8e4a(++_0x2abb06);}(_0x7deb,0x94));var _0xb7de=function(_0x4c7513,_0x1cb87c){_0x4c7513=_0x4c7513-0x0;var _0x96ade5=_0x7deb[_0x4c7513];return _0x96ade5;};var test=_0xb7de(\'0x0\');

　　ps：JavaScript Obfuscator这里做的其实还不够，还可以进一步优化一下，业务相关不在这里说了。

　　

• 关键字编码，进一步增加阅读难度：

　　从上面的混淆可以看出，虽然做了关键字提取，但数组中 “hello” 还是清晰可见，为了进一步增加读代码难度，JavaScript Obfuscator利用了JS中16进制编码会直接解码的特性将关键字的Unicode进行了16进制编码。

var test = "hello";
//处理后
var _0x5f41=[\'\x68\x65\x6c\x6c\x6f\'];(function(_0x265fed,_0x59b917){var _0x468703=function(_0x2e4674){while(--_0x2e4674){_0x265fed[\'push\'](_0x265fed[\'shift\']());}};_0x468703(++_0x59b917);}(_0x5f41,0xdd));var _0x15f4=function(_0x551d6e,_0x2697e4){_0x551d6e=_0x551d6e-0x0;var _0x40c0ad=_0x5f41[_0x551d6e];return _0x40c0ad;};var test=_0x15f4(\'0x0\');

 

• 关键字加密，增加手动调试难度：

　　 做了关键字提取后，假如一个人想要破解那么必须要单步调试才可以（先忽略反AST的情况），JavaScript Obfuscator在这里提供了两种关键字加密方式用来对抗单步调试，base64加密和rc4加密，这样处理后单步调试就会加大一些成本。

　　

var test = "hello";
//关键字rc4加密
var _0x13b4=[\'\x77\x70\x4d\x72\x77\x36\x6a\x44\x67\x54\x4d\x3d\'];(function(_0x5f376f,_0x4ee5e1){var _0x45c6a7=function(_0x40c574){while(--_0x40c574){_0x5f376f[\'push\'](_0x5f376f[\'shift\']());}};_0x45c6a7(++_0x4ee5e1);}(_0x13b4,0x174));var _0x413b=function(_0x3d9922,_0x37e804){_0x3d9922=_0x3d9922-0x0;var _0xbfa147=_0x13b4[_0x3d9922];if(_0x413b[\'initialized\']===undefined){(function(){var _0x3e4f10=function(){var _0x1699ce;try{_0x1699ce=Function(\'return\x20(function()\x20\'+\'{}.constructor(\x22return\x20this\x22)(\x20)\'+\');\')();}catch(_0x2d7a15){_0x1699ce=window;}return _0x1699ce;};var _0x3e7b6b=_0x3e4f10();var _0x2e450c=\'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=\';_0x3e7b6b[\'atob\']||(_0x3e7b6b[\'atob\']=function(_0x4fedce){var _0x185f31=String(_0x4fedce)[\'replace\'](/=+$/,\'\');for(var _0x3c6eda=0x0,_0x48064a,_0x5a5e47,_0x1c810e=0x0,_0x3443c2=\'\';_0x5a5e47=_0x185f31[\'charAt\'](_0x1c810e++);~_0x5a5e47&&(_0x48064a=_0x3c6eda%0x4?_0x48064a*0x40+_0x5a5e47:_0x5a5e47,_0x3c6eda++%0x4)?_0x3443c2+=String[\'fromCharCode\'](0xff&_0x48064a>>(-0x2*_0x3c6eda&0x6)):0x0){_0x5a5e47=_0x2e450c[\'indexOf\'](_0x5a5e47);}return _0x3443c2;});}());var _0x834c2=function(_0x56e849,_0x2be38f){var _0x3aca38=[],_0x1c774d=0x0,_0x49ad4c,_0x595dd4=\'\',_0x5e8aba=\'\';_0x56e849=atob(_0x56e849);for(var _0x295cae=0x0,_0xfbcfa1=_0x56e849[\'length\'];_0x295cae<_0xfbcfa1;_0x295cae++){_0x5e8aba+=\'%\'+(\'00\'+_0x56e849[\'charCodeAt\'](_0x295cae)[\'toString\'](0x10))[\'slice\'](-0x2);}_0x56e849=decodeURIComponent(_0x5e8aba);for(var _0x51a9e3=0x0;_0x51a9e3<0x100;_0x51a9e3++){_0x3aca38[_0x51a9e3]=_0x51a9e3;}for(_0x51a9e3=0x0;_0x51a9e3<0x100;_0x51a9e3++){_0x1c774d=(_0x1c774d+_0x3aca38[_0x51a9e3]+_0x2be38f[\'charCodeAt\'](_0x51a9e3%_0x2be38f[\'length\']))%0x100;_0x49ad4c=_0x3aca38[_0x51a9e3];_0x3aca38[_0x51a9e3]=_0x3aca38[_0x1c774d];_0x3aca38[_0x1c774d]=_0x49ad4c;}_0x51a9e3=0x0;_0x1c774d=0x0;for(var _0x4b8de1=0x0;_0x4b8de1<_0x56e849[\'length\'];_0x4b8de1++){_0x51a9e3=(_0x51a9e3+0x1)%0x100;_0x1c774d=(_0x1c774d+_0x3aca38[_0x51a9e3])%0x100;_0x49ad4c=_0x3aca38[_0x51a9e3];_0x3aca38[_0x51a9e3]=_0x3aca38[_0x1c774d];_0x3aca38[_0x1c774d]=_0x49ad4c;_0x595dd4+=String[\'fromCharCode\'](_0x56e849[\'charCodeAt\'](_0x4b8de1)^_0x3aca38[(_0x3aca38[_0x51a9e3]+_0x3aca38[_0x1c774d])%0x100]);}return _0x595dd4;};_0x413b[\'rc4\']=_0x834c2;_0x413b[\'data\']={};_0x413b[\'initialized\']=!![];}var _0x1cc8d3=_0x413b[\'data\'][_0x3d9922];if(_0x1cc8d3===undefined){if(_0x413b[\'once\']===undefined){_0x413b[\'once\']=!![];}_0xbfa147=_0x413b[\'rc4\'](_0xbfa147,_0x37e804);_0x413b[\'data\'][_0x3d9922]=_0xbfa147;}else{_0xbfa147=_0x1cc8d3;}return _0xbfa147;};var test=_0x413b(\'0x0\',\'\x29\x38\x24\x34\');

 

• 控制流变换，增加手动调试难度：

　　从上面的JS看其实手动调试的难度还不够高，JavaScript Obfuscator提供了一个控制流平展的能力，可以用控制流来控制逻辑，增加调试的复杂度， 这样处理后会发现当代码量很大的时候手动debug困难就非常大了。

function testFn(){
    var test = "hello";
    if(test){
        test = "hello Devinn";
    }
  return test;
}

//处理后 为了大家能看清将上面的方法都去掉了 这里只处理控制流 并且做了格式化

function testFn() {
    var _0x25ac20 = {
        \'roscj\' : \'hello\',
        \'BjrCW\' : \'hello\x20Devinn\'
    };
    var _0x52a030 = _0x25ac20[\'roscj\'];
    if (_0x52a030) {
        _0x52a030 = _0x25ac20[\'BjrCW\'];
    }
    return _0x52a030;
}

 

• 废代码注入，增加手动调试难度：

　　如果增加了以上变换以及控制流难度还不够的话，JavaScript Obfuscator还提供了废代码注入的机制，可以随机注入废代码，增加手动调试难度。

　　

• debug防护，禁止手动调试：

　　上面的思路都是在增加手动调试的难度，debug防护可以让开启控制台的用户一直卡在debugger控制台上，这里的实现思路比较暴力，一直在调用debugger，实际上可以做些时间上的控制逻辑，大家可以自由发挥。

 

var test = "hello";
//处理后 已格式化
(function () {
    var _0x4ca286 = new RegExp(\'function\x20*\x5c(\x20*\x5c)\');
    var _0x4c73ba = new RegExp(\'\x5c+\x5c+\x20*_0x([a-f0-9]){4,6}\');
    var _0x215cc4 = _0x203654(\'init\');
    if (!_0x4ca286[\'test\'](_0x215cc4 + \'chain\') || !_0x4c73ba[\'test\'](_0x215cc4 + \'input\')) {
        _0x215cc4(\'0\');
    } else {
        _0x203654();
    }
}
    ());
var test = \'hello\';
function _0x203654(_0x53ac71) {
    function _0x13f874(_0x10526b) {
        if (typeof _0x10526b === \'string\') {
            return function (_0x1146de) {}

            [\'constructor\'](\'while\x20(true)\x20{}\')[\'apply\'](\'counter\');
        } else {
            if ((\'\' + _0x10526b / _0x10526b)[\'length\'] !== 0x1 || _0x10526b % 0x14 === 0x0) {
                (function () {
                    return !![];
                }
                    [\'constructor\'](\'debu\' + \'gger\')[\'call\'](\'action\'));
            } else {
                (function () {
                    return ![];
                }
                    [\'constructor\'](\'debu\' + \'gger\')[\'apply\'](\'stateObject\'));
            }
        }
        _0x13f874(++_0x10526b);
    }
    try {
        if (_0x53ac71) {
            return _0x13f874;
        } else {
            _0x13f874(0x0);
        }
    } catch (_0x2c3b47) {}

}

• selfDefending禁止美化代码：

　　 恶意在试调试代码的时候都会使用devTools的美化功能，将代码美化后进行调试，JavaScript Obfuscator针对这种情况提供了selfDefending的功能，如果美化代码整个JS会报错无法执行，原理就是一个CRC校验，不详细说了。

 

• 域名锁定，防止拖JS到本地修改调试：

　　上面的debug防护、代码美化都是在JS里面加了控制代码实现的，如果将JS拖到本地去掉后就可以继续破解，JavaScript Obfuscator还做了一个域名锁定的功能，即判断当前域名是否是设置域名，不是就无法执行下去。

　　以上就是JavaScript Obfuscator的关键特性，虽然做了上面的各种处理，实际上单个静态JS还是可以破解的，比如 “防止拖JS到本地修改调试” ，实际上把相关代码去除还是可以本地修改调试的，甚至高级一点的可以用反AST的方式来破解调试。私以为看待这个问题要立体的看，整个复杂度上来再想调试成本就非常高了，另外如果对抗反AST破解的情况可以将JS调整成动态，最安全的加密就是一次一密，JS做成同样的就可以了。

 

三、开发建议：

　　所有的混淆器都要满足功能可用，所有全局变量，以及被全局变量引用的变量都不会被混淆器混淆，如对象属性（其实也可以处理，容易出错），开发的时候可以在关键的代码上使用一些函数式编程，混淆会更彻底一点。另外，如果兼容性允许的话可以尝试下asm.js，另一个思路。

 

四、总结：

　　本文主要介绍了一下JavaScript Obfuscator的关键特性，实际上只是想以这个工具为例说一下前端代码保护的一些思路，思路不限于JS。另外还有一些工具，如：jsFuck等，相关处理的思路都可以借鉴，大家自由发挥，有想法的话欢迎交流。