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

【作者主页】:小鱼神1024

【擅长领域】:JS逆向、小程序逆向、AST还原、验证码突防、Python开发、浏览器插件开发、React前端开发、NestJS后端开发等等
本文章中所有内容仅供学习交流使用,不用于其他任何目的,不提供完整代码,抓包内容、敏感网址、数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关!若有侵权,请联系作者立即删除!
【该文章已同步至星球】:https://articles.zsxq.com/id_txwb0un7w7vw.html

前言

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

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

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

webpack 加载器分析

webpack 中,我们经常会看到以下代码:

javascript 复制代码
!(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

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

相关推荐
雾散尽时32 分钟前
Webpack在项目中的配置与工作原理解析
webpack
程序员黄同学12 小时前
解释 Webpack 中的模块打包机制,如何配置 Webpack 进行项目构建?
前端·webpack·node.js
jndingxin13 小时前
OpenCV 图形API(5)API参考:数学运算用于执行图像或矩阵加法操作的函数add()
opencv·webpack·矩阵
ak啊16 小时前
Webpack Loader 执行机制
前端·webpack·源码
aklry1 天前
elpis之前端工程化
前端·webpack
庸俗今天不摸鱼1 天前
【万字总结】前端全方位性能优化指南(八)——Webpack 6调优、模块联邦升级、Tree Shaking突破
前端·webpack·性能优化
Moment1 天前
终于搞懂了!Source Map 是如何让你定位打包后代码的?💥 💥 💥
前端·javascript·webpack
yang_love10111 天前
Webpack vs Vite:深度对比与实战示例,如何选择最佳构建工具?
前端·webpack·node.js
355984268550552 天前
医保服务平台 Webpack逆向
前端·webpack·node.js
不能只会打代码2 天前
六十天前端强化训练之第三十一天之Webpack 基础配置 大师级讲解(接下来几天给大家讲讲工具链与工程化)
前端·webpack·node.js