js源码被\x16进制混淆加密解密思路方法

前几日替客户修改网站内容，需要修改一个banner的高度问题，客户自己寻找了很久无从下手。我拿到网站源码后，通过类名后，浏览器的绑定方法找到控制banner滚动动画的js文件，没跑了，既然不在CSS里控制整个区块的高度，那肯定是在js里动态赋值了。

当我打开这个文件懵了，完全看不懂的状态，都是一些混乱的字符串，代码最前面是形如下面的格式，定义的数组但是数组里的都是些\x开头的字符串。

var _$_cdbb = ["\x64\x69\x76", "\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74", "\x77\x65\x62\x6B\x69\x74", "\x6D\x6F\x7A", "\x6F", "\x6D\x73", "\x73\x75\x70\x70\x6F\x72\x74", "\x74\x72\x61\x6E\x73\x66\x6F\x72\x6D\x33\x64", "\x70\x65\x72\x73\x70\x65\x63\x74\x69\x76\x65\x50\x72\x6F\x70\x65\x72\x74\x79", 

函数部分也是很难懂，函数名和函数体都是很难理解的形式：

_0x17299[_$_cdbb[41]][_$_cdbb[72]] = function(_0x1762F, _0x175F9) {
        var _0x175C3 = this;
        if (!_0x175C3[_$_cdbb[98]] || _0x172CF) {
            return
        }
        ;var _0x17923 = _0x17371(_0x1762F, _$_cdbb[108]);
        var _0x17959 = _0x17371(_0x1762F, _$_cdbb[110]);
        var _0x17881;
        var _0x178ED;
        if (_0x175C3[_$_cdbb[106]]) {
            _0x1762F[_$_cdbb[105]]();
            _0x17881 = _0x17923 - _0x175C3[_$_cdbb[111]];
            _0x178ED = _0x175C3[_$_cdbb[57]] + _0x17881;
            if (_0x178ED >= 0 || _0x178ED < _0x175C3[_$_cdbb[85]]) {
                _0x178ED = Math[_$_cdbb[116]](_0x175C3[_$_cdbb[57]] + _0x17881 / 3)
            }
            ;_0x175C3[_$_cdbb[112]] = _0x17881 === 0 ? _0x175C3[_$_cdbb[112]] : _0x17881 > 0 ? -1 : 1;
            var _0x178B7 = !_0x175C3[_$_cdbb[93]](_$_cdbb[117], true, true, {
                delta: _0x17881,
                direction: _0x175C3[_$_cdbb[112]]
            });

这个对于不了解的情况，真的要疯了，明明知道这就是主控制js文件，但是读不懂就没办法修改。通过查找相关信息，这是普遍的js加密方式，就是开发者加密保护的措施，一问才知道，原来网站模板源码是网上下载的，那没跑了，就是模板开发者的保护错误，。

分析js加密方法过程

可以注意这个js文件在一开始是申明了一个含有各种字符串的数组，然后将数组里的字符串进行16进制的转化，然后在下面的函数语句的关键词调用数组，让其变得难懂。就比如我们在编写代码会有一些关键词如document是比较常见的，那么我先定义一个数组let aaa=[‘document’]，然后我们在其他用到这个关键词是，我不写这个词，而是用aaa[0]替代，就如下面代码，是不是就变得比较难懂了。

let aaa=['document']
aaa[0].write(); //等效document.write(); 

在更进一步要是我再将数组里的字符串通过\x（16进制）转化一下，“\x64”就表示16进制里64我们可以使用相关工具查看64代表的是字母”d”,整个字符串‘document’就变化为了“\x64\x6f\x63\x75\x6d\x65\x6e\x74”，这就是上面代码形成过程。我们可以验证一下，只需要讲整个数组直接打印出出来，使用下面的打印结果如图。

console.log(Array.isArray(_$_cdbb)); // 验证其为数组 
console.log(_$_cdbb); //打印整个数组内部字符串

到这里源码的第一步加密分析完毕，这种加密的方式对于人来读懂确实费点精力，除了上面的加密方式源码里使用了混淆加密方式，这种方式特点就是将代码里我们自己定义的名字（函数名，变量名等）变成不容易懂的名，比如我们定义一个获取高度的函数一般使用getHeight()或height_get()再不济也会使用get_h（）这种看名字就能大致猜出是关于什么的函数；还是变量名，比如定义个元素的高度会使用类似let height_xx这种，一眼看上去就知道大概什么意思，这种命名后的函数名变量名区别大容易看明白代码。当把函数名变量名变成一串没有规律的字符组合，就会变得很是难懂。如下面源码里的变量名，是不是就不知道表示什么，，也很难区别开。

var _0x17923;
var _0x1795;
var _0x17881;
var _0x178ED;

js加密解密方法

上面就是这个js文件加密过程，到目前为止还没有找到能够一键翻译成易懂的代码工具或者网站，如果想要将读懂源码也是可行的，就是费点时间。

在给客户修改这次需求的时候，就是查找控制banner轮播的函数，网站的banner肯定有个容器div有相关类名如banner，js需要控制整个区块轮播肯定要绑定事件，那么在js里就需要查找这个区块，那么类名就是关键词，通过上面打印出来的字符串，我们可以查找banner这类的关键词在数组的索引值，比如116位，那么就查找“_$_cdbb[116]”，在哪个地方出现，将相关地方出现其他_$_cdbb[xxx]，反过来查找xxx位对应的字符串，通过这种方法慢慢翻译过来，相关函数就能看懂了。比如下面翻译过后就可以知道就是控制了banner的高度函数。

function slider_h() {
    var _0x1826B = $(window)[_$_cdbb[151]]();
    if ($(_$_cdbb[152])[_$_cdbb[81]] == 1) {
        if (window[_$_cdbb[153]] > 1023) {
            $(_$_cdbb[154])[_$_cdbb[151]](_0x1826B - 140)
        } else {
            $(_$_cdbb[154])[_$_cdbb[151]](_0x1826B * 0.62)
        }
    } else {
        $(_$_cdbb[154])[_$_cdbb[151]](_0x1826B * 0.62)
    }
}

翻译后，能看懂了

function slider_h() {
    var _0x1826B = $(window)[height]();
    if ($(.slider .full)[length] == 1) {
        if (window[innerWidth] > 1023) {
            $(.slider .item .img)[height](_0x1826B - 140)
        } else {
            $(.slider .item .img)[height](_0x1826B * 0.62)
        }
    } else {
        $(.slider .item .img)[height](_0x1826B * 0.62)
    }
}

最后就是修改相关参数就完成修改了，前端表现符合客户要求，解决了问题。