猿人学 第一题 js混淆源码乱码

0.题目

抓取所有（5页）机票的价格，并计算所有机票价格的平均值，填入答案。

1.无限debugger

打开开发者工具后，首先面对的是一个无限debugger，解决的方法：可以使用Ctril+F8禁用断点（但这样不便于自己打断点调试），也可以为无限debugger语句添加一个条件语句，使其不执行（这里我写的是0）。

 2.定位代码

在控制台Network面板中，找到机票价格列表的相关请求，然后在请求堆栈中点击request，定位到发请求的代码所在。

 

 3.Unicode解码

因为上一步找到的代码是做了混淆和Unicode编码的，这里我们可以使用在线解密工具对代码进行解密，也可以手动解码：

1）将相关代码放入“``”中，并在控制台中输出，即可得到Unicode解码后的代码字符串；

        2）但此时代码中包含\n\r之类的字符，需要再整理一下。这里我通过textarea标签进行整理；

// 通过textarea整理代码字符串
let ele = document.createElement('textarea');
document.body.appendChild(ele);
ele.value = `Unicode解码后的代码字符串`;
ele.select();
document.execCommand('Copy');

// 得到的解码后的代码
window['url'] = '/api/' + 'match' + '/1', request = function () {
    var _0x2268f9 = Date['parse'](new Date()) + (16798545 + -72936737 + 156138192), _0x57feae = oo0O0(_0x2268f9['toStr' + 'ing']()) + window['f'];
    const _0x5d83a3 = {};
    _0x5d83a3['page'] = window['page'], _0x5d83a3['m'] = _0x57feae + '丨' + _0x2268f9 / (-1 * 3483 + -9059 + 13542);
    var _0xb89747 = _0x5d83a3;
    $['ajax']({
        'url': window['url'],
        'dataType': 'json',
        'async': ![],
        'data': _0xb89747,
        'type': 'GET',
        'beforeSend': function (_0x4c488e) {
        },
        'success': function (_0x131e59) {
            // 省略部分代码
        },
        'complete': function () {
        },
        'error': function () {
            // 省略部分代码
        }
    });
};

4.修改代码

在得到的代码中，分析可知：机票列表的请求被定义为一个名为request的函数，该函数有两个传参“page”和“m”，page是页码，使用的是全局变量page，而m是通过函数oo0O0经过一番计算得来的。

这里，我的思路是直接在控制台来重新修改request函数（主要是修改回调函数逻辑），在请求成功后将列表存储下来，当5个页面都请求完成后计算出机票价格的平均值。

下面是修改后的代码，修改后在控制台执行它们：

window.page = 1; // 重置全局页码变量
window.arr = []; // 用来存储各个页面的数据
window.sum = 0; // 用来存储各个页面的数据之和
request = function () { // 修改函数定义（主要是修改回调函数中的代码逻辑）
    var _0x2268f9 = Date['parse'](new Date()) + (16798545 + -72936737 + 156138192), _0x57feae = oo0O0(_0x2268f9['toStr' + 'ing']()) + window['f'];
    const _0x5d83a3 = {};
    _0x5d83a3['page'] = window['page'], _0x5d83a3['m'] = _0x57feae + '丨' + _0x2268f9 / (-1 * 3483 + -9059 + 13542);
    var _0xb89747 = _0x5d83a3;
    return $['ajax']({
        'url': window['url'],
        'dataType': 'json',
        'async': ![],
        'data': _0xb89747,
        'type': 'GET',
        'beforeSend': function (_0x4c488e) {
        },
        'success': function (res) {
            window.arr = window.arr || []
            window.arr = [...window.arr, ...res.data]
            if (window.page < 5) { // 通过递归依次请求各个页面的数据
                window.page++;
                request();
            } else {
                window.sum = window.arr.reduce((a,b) => {
                    return a + (b.value || 0)
                }, 0)
                console.log('result:', window.sum / window.arr.length)
            }
        }
    });
};

5.修改请求头

完成上述修改后，还有一个问题，就是第四页第五页的内容在请求时需要有个请求头“user-agent:yuanrenxue.project”，这里我使用 Modheader 这个浏览器插件来实现。

 6.获取结果

最后，在控制台执行 request() 即可。request函数通过递归得到所有的机票价格列表，然后计算并打印出最后的平均数。