JS逆向之Webpack(三)

本文解析了如何通过Webpack的内部结构追踪并逆向一个动态生成的SHA1签名,涉及xhr调试、模块查找和webpack加载器的理解。作者揭示了加密过程与时间戳的关系,并最终实现动态签名的模拟。

JS逆向之Webpack(三)

难度:

网址如下

https://pab.yqb.com/bank/product-item-50896319.html

需要逆向的值

image-20220310170925684

找到加密位置

看了一下是40位,并且每次都不一样,应该是带着时间戳的SHA1

image-20220310171035967

随便搜搜

image-20220310171215324

image-20220310171226283

发现有点多,那我们就直接下xhr断点吧

image-20220310171403053

刷新一下发现已经加密了

image-20220310171447167

再往前找找,找到了

image-20220310171840268

我们看一下S在哪里定义的

image-20220310171948020

那我们可以先把S的值拿出来

image-20220310172302730

image-20220310172249880

然后调用了这个方法,sign就有了

S.sign = (0,v.default)(S)

其实这个方法等价于

S.sign = v.default(S)

那我们接下来找找v是在哪里定义的

可以发现在这里

image-20220310172622800

var r = n(0)
          , o = n(2);
        n(11),
        n(14),
        n(22),
        n(7),
        n(9),
        n(4),
        n(3),
        n(1),
        n(6),
var i = r(n(108));
        n(19),
        n(65),
        n(66),
        n(89);
        var a = r(n(109));
        n(26),
        n(13);
        var s, u = r(n(18)), c = r(n(54)), l = n(20), d = O(n(34)), f = n(424), p = n(220), h = r(n(70)), v = r(n(429)), g = r(n(244)), m = r(n(767)), w = O(n(768)), y = r(n(769));

抽取出我们需要关心的,这看起来像不像webpack?没错就是webpack

var r = n(0);
v = r(n(429));

寻找装载器

这块就不多说了

image-20220310173644516

image-20220310174018751

寻找装载模块

先扒个0,发现它没有用到其他模块,那没问题

image-20220310174141385

0: function(t, e) {
        t.exports = function(t) {
            return t && t.__esModule ? t : {
                default: t
            }
        }
        ,
        t.exports.__esModule = !0,
        t.exports.default = t.exports
    },

然后是429

image-20220310174313460

发现用到了17,1,110,766

只有766有值

image-20220310174454086

那么我们接下来扒766

,不过当我们点766的时候发现进了430,实际上是因为766用到了430

image-20220310174558923

image-20220310174652694

image-20220310174703057

那我们把766和430都扒下来

image-20220310174818569

430里面又依赖这些

image-20220310174921933

发现都是{}

image-20220310175002726

那么我们就要把一些{}进行替换

再比如这个

image-20220310175508423

所以下面的代码就可以简化成

image-20220310175540381

t.default = void 0;

调用

var r = _e(0);
v = r(_e(429));
console.log(v.default(S));

可以看到已经有结果了

image-20220310180102481

最后一个问题

为什么我多次刷页面它的sign是动态的呢,是因为时间戳

image-20220310180153754

而我们代码里的是写死的

image-20220310180213976

因此我们改一下就可以了

image-20220310180245680

好了现在也是动态的了

<think> 首先,用户的问题是:“我想获取JavaScript逆向Webpack方面的进阶知识 请问JavaScript逆向进阶之Webpack相关知识”。这表明用户想了解WebpackJavaScript逆向工程中的进阶知识。 回顾用户的引用: - 引用[1]: 提到Python逆向工程和为什么学习前端webpack,暗示Webpack逆向中的重要性。 - 引用[2]: 解释Webpack是一个静态模块打包工具,用于前端开发。 - 引用[3]: 描述一个案例网站使用Webpack打包和混淆,需要调试技巧和Hook技术。 - 引用[4]: 详细谈论Hook、AST反混淆、补环境框架,特别是Webpack模块化原理和结构分析。 - 引用[5]: 提到简单代码的函数结构,对比Webpack打包。 这些引用集中在Webpack打包、混淆、逆向技术如Hook、AST反混淆等。用户要求进阶知识,所以我需要提供比基础更深入的信息。 系统指令: - 回答必须使用中文。 - 行内数学表达式用$...$,但这里可能不涉及数学表达式,除非涉及到算法等。 - 独立公式用$$...$$并单独成段。 - 生成相关问题。 - 在引用末尾添加引用标识,如[^1]。 回答结构: - 结构清晰,逐步解决问题。 - 确保回答真实可靠。 核心内容:JavaScript逆向进阶之Webpack相关知识。 基于引用[4],重点包括: - Webpack模块化原理:Webpack如何加载模块,特征如模块ID、加载器等。 - 逆向技巧:使用AST反混淆、Hook技术、补环境框架。 - 具体示例:如引用[4]中的AST反混淆代码片段。 组织回答: 1. **引入Webpack逆向中的重要性**:基于引用[1]和[3],解释为什么在JavaScript逆向中需要了解Webpack。 2. **解释Webpack基础**:简要回顾Webpack是什么(引用[2]),但重点在进阶。 3. **进阶逆向技术**: - **模块加载特征**:Webpack如何加载模块,识别模块结构(引用[4])。 - **Hook技术**:如何Hook Webpack加载器来拦截模块(引用[3]和[4])。 - **AST反混淆**:使用抽象语法树反混淆Webpack打包的代码。引用[4]提供了代码示例,我可以描述或简化它。 - **补环境框架**:如何模拟Webpack环境来运行代码(引用[4])。 4. **案例分析或步骤**:提供一个简化的步骤指南。 5. **相关问题**:在末尾生成几个相关问题。 确保引用标识: - 在相关内容末尾添加[^n],对应引用号。 例如,讨论Webpack模块化原理时,添加[^4]。 生成相关问题: - 基于内容,如:如何识别Webpack打包的代码?Webpack逆向的常见挑战?如何优化AST反混淆过程? 最终回答结构: - 标题或开头清晰。 - 分段:模块化原理、逆向技巧、工具使用等。 - 结尾相关问题。 </think> ### JavaScript逆向进阶之Webpack相关知识 在JavaScript逆向工程中,Webpack作为现代前端的主流打包工具,常被用于模块化处理和代码混淆,这使得逆向分析更具挑战性。进阶知识包括理解Webpack的模块化原理、应用Hook技术拦截模块加载、使用AST反混淆处理混淆代码、以及构建补环境框架来模拟运行环境。以下我将逐步解析这些核心内容,帮助您深入掌握Webpack逆向的进阶技巧。回答基于可靠资料和实际案例[^1][^2][^3][^4],确保方法真实可行。 #### 1. **Webpack模块化原理与结构特征** Webpack通过模块加载器将多个文件(如JavaScript、CSS)打包成优化的静态资源,其核心是模块依赖图。在逆向中,识别Webpack打包代码的特征是关键: - **模块加载特征**:Webpack使用数字ID或哈希值标识模块,例如`__webpack_require__(moduleId)`函数加载依赖。模块通常存储在数组或对象中,如`[function(){...}, function(){...}]`。逆向时需定位入口模块(通常是index 0)和分析依赖链[^4]。 - **打包结构**:Webpack输出文件包含运行时逻辑(如`__webpack_require__`)和模块数组。通过调试工具(如Chrome DevTools)设置断点在`__webpack_require__`调用点,可以跟踪模块执行路径[^3][^4]。 这一原理是逆向基础,理解后能快速识别Webpack打包代码与非打包代码(如简单函数式结构)的区别[^5]。 #### 2. **Webpack逆向核心技巧** 进阶逆向依赖工具链和方法论,主要包括Hook技术、AST反混淆和补环境框架: - **Hook技术拦截模块加载**:Hook允许劫持关键函数调用,如覆盖`__webpack_require__`来实时获取模块内容。示例流程: - 使用浏览器控制台或工具(如Fiddler AutoResponder)注入Hook脚本。 - 例如,Hook模块加载器以打印模块ID和源码: ```javascript // 覆盖webpack的require函数 var originalRequire = __webpack_require__; __webpack_require__ = function(moduleId) { console.log("Loaded module ID:", moduleId, "Content:", modules[moduleId].toString()); return originalRequire.apply(this, arguments); }; ``` 这有助于动态分析加密或混淆逻辑,常用于处理API参数加密站点[^3][^4]。 - **AST反混淆处理混淆代码**:Webpack常结合混淆工具(如javascript-obfuscator),AST(抽象语法树)技术通过解析和修改代码结构还原可读性。步骤如下: - **解析代码生成AST**:使用工具如esprima或Babel解析JavaScript代码。 - **遍历和修改节点**:例如,还原字符串拼接或常量折叠。 - **生成新代码**:使用escodegen输出反混淆后的代码。 引用[^4]提供了AST反混淆的完整示例(简化版): ```javascript // AST反混淆示例:还原字符串拼接 const deobfuscate = (code) => { const ast = esprima.parseModule(code, { range: true, tokens: true }); estreeWalker.walk(ast, { enter(node) { if (node.type === 'BinaryExpression' && node.operator === '+') { const left = node.left.value; const right = node.right.value; if (typeof left === 'string' && typeof right === 'string') { node.type = 'Literal'; node.value = left + right; delete node.operator; delete node.left; delete node.right; } } } }); return escodegen.generate(ast); }; // 测试混淆代码 const cleaned = deobfuscate(`console.log("Hello" + " World");`); console.log(cleaned); // 输出: console.log('Hello World'); ``` 此方法能有效处理Webpack打包后的复杂表达式,但需熟悉AST节点类型以应对高级混淆[^4]。 - **补环境框架模拟运行**:Webpack模块依赖浏览器环境,逆向时需构建补环境框架(如Node.js环境)来执行代码。关键点: - **Webpack模块特征分析**:识别加载器逻辑(例:`__webpack_modules__`数组)并模拟`window`或`document`对象。 - **框架实现**:使用工具如Puppeteer或自定义脚本注入缺失全局变量。示例:针对Webpack打包文件,创建一个模拟环境加载模块并导出函数。 ```javascript // 简易Webpack补环境框架 const vm = require('vm'); const fs = require('fs'); const webpackBundle = fs.readFileSync('bundle.js', 'utf-8'); const context = vm.createContext({ console: console, window: {}, // 模拟浏览器环境 document: {}, __webpack_require__: function(moduleId) { /* 自定义实现 */ } }); vm.runInContext(webpackBundle, context); // 调用目标模块 context.__webpack_require__(0); // 入口模块 ``` 这适用于离线分析加密逻辑,如逆向API参数生成[^4]。 #### 3. **实战建议和工具链** - **调试技巧**:优先使用Chrome DevTools的Source面板设置条件断点,并结合Network面板捕获Webpack加载过程。 - **工具推荐**: - AST处理:esprima(解析)、estraverse(遍历)、escodegen(生成)。 - Hook辅助:Frida(动态注入)、Tampermonkey(浏览器扩展)。 - 混淆分析:deobfuscation.io(在线工具)。 - **常见挑战**:Webpack逆向常遇到代码压缩和多重混淆,建议结合Hook和AST逐步还原。例如,先Hook入模块ID,再AST处理函数体[^3][^4]。 Webpack逆向进阶知识强调多技术协同:模块化为核心,Hook动态捕获,AST静态分析,补环境执行验证。这不仅适用于前端安全研究,还扩展至爬虫开发和数据采集[^1][^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值