webpack全家桶流程分析—半自动扣取加密算法

如果对webpack基础不了解的建议先观看以下文章在看该实战：

https://www.yuque.com/u27678668/dxzhxq/rketg2yu786d1blp?singleDoc# 《00_webpack基础讲解》

https://www.yuque.com/u27678668/dxzhxq/nok8fgccvotbb8a0?singleDoc# 《webpack的基本结构》

https://www.yuque.com/u27678668/dxzhxq/lmeqc0p7b9d85cc1?singleDoc# 《01_webpack如何扣取？》

01

接口分析：

url:https://spa2.scrape.center/page/4

xhr请求，token加密；加密结果会变化，大概率RSA加密

加密位置：

e = Object(i["a"])(this.$store.state.url.index, a);

this.$store.state.url.index ："/api/movie"
var a = (this.page - 1) * this.limit
a:0

02

参数分析：

具体扣出Object(i["a"])这个函数为以下

var n = r("3452");
function i() {
    for (var t = Math.round((new Date).getTime() / 1e3).toString(), e = arguments.length, r = new Array(e), i = 0; i < e; i++)
        r[i] = arguments[i];
    r.push(t);
    var o = n.SHA1(r.join(",")).toString(n.enc.Hex)
      , c = n.enc.Base64.stringify(n.enc.Utf8.parse([o, t].join(",")));
    return c
}

该函数缺少r这个对象；

进入r方法中发现是个webpack加载器方法：

由于webpack设置缓存的作用，所以不刷新的情况下是断不住r("3452")，因此需要刷新进行下断；

进入到3452方法的调用处，发现该位置又导入很多包；

这种情况下很多依赖类调用，如果扣不全很可能缺少某个类从而导致报错无法运行；在依赖少的情况下可以选择缺啥补啥的原则，缺少什么方法就去找什么方法。依赖多的情况下也可以选择把js代码全都摘下来，这样不管有没有用到的方法我代码里都有。但是十几万行代码运行肯定会影响性能，具体优化办法后续会说明的。

这里先采用全部扣取的方式：

方法1：（扣取思路可以参考这篇文章的全扣法：：01_webpack如何扣取？)

1.这里先把主文件js扣取下来并全局导出加载器；

2.删除主文件的初始化方法;

3.扣取其他文件的j补充到主文件下面;

运行得到了加载器的方法，报错是由于加载图片和发起请求这里不影响，也可以将其在代码中删除掉，这里偷懒就不删除了；

因为我们上面扣取下来的代码可知我们需要加载器3452的方法；

浏览器出值与代码相同；接下来在无环境情况下调式；

本地调式过程中在catch中发现 parentNode未定义，经过查找发现该parentNode为document的属性，根据上面可知该代码无需浏览器有关的环境，即此处抛出的报错可以删除掉；

删除后运行出值与结果与其浏览器相等

方法2：hook加载器，自吐算法；（扣取思路可以参考这篇文章的自吐算法：：01_webpack如何扣取？)

1.确定加密函数所调用的模块进行刷新下断并且在调用成功后的函数前后进行下断；

2.进入加载器中，在return处下断

3.进到return断点处，输出hook函数，然后放开return断点位置，f8跳到步骤1调用加载器成功的断点位置上；

// hook函数为：
//  加载器函数c,加载器函数传入的参数t(也就是模块名称)
//  对象或者数组e(储存所有的模块)
// 最终我们要的模块全部保存在window._code上面

window.web = c;
window._code = """ + t + "":" + (e[t] + "") + ",";
c = function(t) {
    window._code = window._code + """ + t + "":" + (e[t] + "") + ",";
    return window.web(t);
};

控制台输出window._code代码模块变成200多kb非常小了

.4. 调用与改写

首先将整个主文件的加载器扣取下来，将模块换成我们控制台输出window._code的代码；

将整个代码扣取下来，并且自定义一个全局导出函数来接收r("3452")；

下面实参是我们传进去的window._code模块；

下面函数调用去环境补充就不复述了；

03

总结：

1. 一般对webpack这种打包的架构，一般都是采取hook加载器方法，hook的时候尤其需要注意时机；

2. 一定要根据加载器函数来改写HooK函数的代码。

3. 因为WebPack是链式调用模块，不可同时HooK多个加密函数，并且一定要在加密函数和加密函数后打上断点。

原文始发于微信公众号（迪哥讲事）：webpack全家桶流程分析—半自动扣取加密算法