0 声明
本文仅用于技术交流
1 分析
网站:aHR0cHM6Ly9zcGEyLnNjcmFwZS5jZW50ZXIv
一个webpack练手网站
分析一下接口
一个简单的get请求,请求url中添加了一个加密参数token

定位加密位置的方式比较多,这里还是使用习惯用的请求拦截器,在代码中搜索interceptors.requets.use,找到了之后打断点定位

重新加载页面,通过堆栈去找token加密位置,发现params中的token值是e,在这里打断点

翻页,使断点定住,分析代码,方法i.a传入了两个参数,第一个参数是this.$store.state.url.index,发现其值固定为/api/movie,第二个参数e,是通过(page - 1) * 10计算得来,即第一页值为0,第二页值为10,依次类推,再看最重要的方法i.a,发现i并没有在在此方法内部,往上找,发现i = e("7d92"),看起来比较像webpack,还是打个断点跟一下

翻页的话在i处是断不住的,更加验证了是webpack,需要重新加载页面
断住了之后进入e方法内部
可以看到是一个标准的webpack的构造器,代码如下
function c(t) {
if (r[t])
return r[t].exports;
var n = r[t] = {
i: t,
l: !1,
exports: {}
};
return e[t].call(n.exports, n, n.exports, c),
n.l = !0,
n.exports
}
在控制台输出发现共加载了253个函数

按照往常的方式我们可能会把这个文件完整的复制过来,直接运行,但是会发现调用到的函数不全,是因为这个网站把一部分函数通过webpackJsonp放到了别的文件里

这就需要另辟蹊径,我们先把整体代码拿到本地,进行两处的修改
-
给代码头部添加
!防止报错

-
删除所有调用的函数

那么现在就开始补调用的函数
我们在webpack构造器处发现r原本应该是传入的那些函数(也可叫模块),现在给置为空对象,再定义一个空对象

然后在构造器的if判断出打上条件断点wp[t] = e[t], false,之后放行在控制台输出看下总共调用了多少函数,调用多少就补多少

发现调用了47个,但是实际应该是48个,因为在我们使用条件断点的时候已经加载了7d92,但是48个函数补起来也比较麻烦,可以直接使用命令Object.entries(wp).map(([key, value]) =>“${key}”: ${value}).join(", ")进行代码自吐,wp是一个object对象,使用Object.entries使其变成一个数组,在使用数组的map方法对数组内的每个元素进行解构赋值操作并返回一个新的数组,再通过join方法进行字符串拼接

直接右击复制字符串内容,插入到我们的代码中即可,别忘记补“7d92”放到最上面
编辑器里格式化下可以看到比较清楚

之后还是做以下操作:
- 定义
window = global; - 在构造器下进行导出 window.duan = c;
- 外部调用window.duan
测试下看到可以得到正确的结果

代码太长了,就不往文章里贴了
1043

被折叠的 条评论
为什么被折叠?



