自动扣webpack框架演示 | 某书 x-xray-traceid 签名算法分析记录

【作者主页】：小鱼神1024

【擅长领域】：JS逆向、小程序逆向、AST还原、验证码突防、Python开发、浏览器插件开发、React前端开发、NestJS后端开发等等

本文章中所有内容仅供学习交流使用，不用于其他任何目的，不提供完整代码，抓包内容、敏感网址、数据接口等均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！若有侵权，请联系作者立即删除！

【该文章已同步至星球】：https://articles.zsxq.com/id_txwb0un7w7vw.html

前言

在 JS 逆向分析中，我们经常会遇到使用 webapck 打包的网站，那以下问题你是否遇到过呢？

• 怎么判断一个网站是否使用了 webpack 打包？
• 如何寻找快速寻找 webpack 的 加载器 和 模块 ？
• 如何利用框架自动扣取 webpack 签名参数所需的 加载器 和 模块 ？

当然了。网上讲理论知识讲解的已经非常全面了，这里就不一一赘述了，这里主要讲解实战，即使是新手也能快速上手。

webpack 加载器分析

在 webpack 中，我们经常会看到以下代码：

!(function (e) {
    // 对象缓存
    var c = {};
    function n(t) {
        // 如果对象缓存中存在，则直接返回
        if (c[t]) return c[t].exports;
        var a = (c[t] = {
            i: t,
            l: !1,
            exports: {},
        });
        return e[t].call(a.exports, a, a.exports, n), (a.l = !0), a.exports;
    }
})(模块);

它实现逻辑很简单，就是一个函数调用。模块 是参数，它可以是对象，也可以是数组。无非就是把普通函数改成了自执行函数。

x-xray-traceid 分析

为了学习 webpack 加载器，我们以某书为例，分析一下 x-xray-traceid 签名算法。

通过简单搜索，找到 x-xray-traceid 生成位置，这个应该不难吧。如下：

翻到最上面，发现 webpack 的 关键字眼，如下：

然后把这个文件的所有 模块 扣下来，放到框架的 modules.js 文件中，如图：

然后在控制台执行 npm run dev 或者 pnpm dev 后，报错提示如下：

提示 缺少模块: 87989，那么全局搜索 87989:，如图：

同理，将这个文件所有的 模块 扣下来，放到 modules.js 文件中，根据提示，补全所需的 模块 之后，再执行命令：

可以看到，总共加载了 92 个模块，如果是人工扣取，那工作量是非常大的，而且容易出错，所以使用 webpack 自动扣代码是非常有必要的。

框架会自动将所涉及到的 模块 和 加载器 都自动写入到 out.js 文件中，如图：

运行 out.js 文件，可以看到 x-xray-traceid 签名参数已经生成了。 如图：

可以看到，如此大的工作量，即使是新手的情况下，只需要导入 模块 到 modules.js 文件中，然后执行命令即可，几分钟就搞定了。

【webapck框架下载】：https://wx.zsxq.com/group/48888154214548/topic/5121821811848814

【x-xray-traceid参数生成js】：https://wx.zsxq.com/group/48888154214548/topic/1525825854282842

以上代码仅供学习交流使用，请勿用于其他任何目的！