前端混淆--JavaScript Obfuscator

Posted DevinnZ

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端混淆--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等,相关处理的思路都可以借鉴,大家自由发挥,有想法的话欢迎交流。

 

以上是关于前端混淆--JavaScript Obfuscator的主要内容,如果未能解决你的问题,请参考以下文章

前端进阶必备:JavaScript 内存机制

一种基于编译器的的JS混淆及反混淆方案

js入门

.Net 组件用于 JavaScript 混淆?

jsdetox反混淆js内容,解密前端加密参数

前端代码保护