一 什么是webpack?
什么是webpack,先看看ai的介绍:
Webpack 是一个模块打包工具,它可以将多个 JS、CSS、图片等资源打包成一个或多个文件,并支持代码压缩、热更新、按需加载等功能。
在早期的网页开发中,我们直接写 HTML + JS 文件,然后通过
<script>
标签引入,但随着项目变大,出现了一些问题:
问题 秒速 文件太多 每个功能都写成单独的 JS 文件,加载慢 依赖混乱 A.js 依赖 B.js,加载顺序容易出错 难以维护 代码结构复杂,不利于团队协作 不兼容新语法 ES6/7/8 新特性不能直接运行在旧浏览器上
使用webpack的页面大概长这样
那好,怎么判断一个网页是否使用了webpack
第一如果,一个网页的index.htlm没有大量css样式和大量的div,而是在body里面引入几条js,那么大概率就是webpack
当然还有更可靠的办法,看有没有自执行函数+模块。这次说的这个网站就是这样的
// webPack
!function (e) {
// 缓存已加载的模块
var c = {};
// 模块加载函数
function n(t) {
// 如果模块未加载,则初始化
var a = c[t] = {
i: t, // 模块ID 2
l: !1, // 是否已加载 (loaded)
exports: {} // 模块导出的内容
};
console.log(a) // 打印模块信息
/*
执行中的模块代码,并传入 require, exports, module 参数
相当于调用:
// module = a(模块对象),exports = a.exports(模块的导出对象),require = n(加载函数)
function (module, exports, require) {
console.log("3"); // 模块 2 的代码
}
*/
return e[t].call(a.exports, a, a.exports, n),
// 标记为已加载,a.l = true; 这里模块 2 没有导出内容,所以返回 {}
a.l = !0;
// 返回模块的 exports
a.exports;
}
// 将模块映射挂载到 n 上(类似 webpack 的 __webpack_modules__)
n.m = e;
// 加载并执行模块 2
n(2);
}([
function () {
console.log("0")
}, // 模块0
function () {
console.log("1")
}, // 模块1
function () {
console.log("2")
}, // 模块2
]);
二 xhr断点定位加密位置
这里可以通过翻页查看所有的招投标信息
设置断点后继续下一页就断住了
三 跟栈
招了一辈子加密,终于找到了,其实搜索t.encryptLong(JSON.stringify(a))
可以马上定位到。别问为什么?因为我已经提取找到了
然后看这个加密结果每次都不一样,很明显是个RSA呗。别问为什么不是 AES。前面的publicKey看着都不像标准的rsa公钥,后续的js更明显。
这个a就是被加密的参数:
简单概括就是固定字符 + 页码 + md5 + 时间戳
然后把代码扣过来,运行的时候补啥,不同多说。关键是 t = new d["a"]
是一个对象,
// t = new d["a"]
r = n.data
t.setPublicKey(r)
a = m(m({}, e), {}, {
sign: B()(JSON.stringify(e)),
timeStamp: +new Date
})
s = t.encryptLong(JSON.stringify(a))
四 扣webpack
上翻,因为当前作用域没有,那就是在上面
d = t("9816")
是一个模块,页面第一次刷新时加载
这里F5刷新一下网页
接下来把代码扣下来,省略多次步骤,当扣之后你会发现报错
回到加载器的位置,打印一下这个A[e].call的e,看看是何方神圣?
是一个js模块没有加载,那就去找
最后就是补全代码,出值了,字符长度和网页上的一致就对了