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
测试下看到可以得到正确的结果
代码太长了,就不往文章里贴了