JS Hook 实战教学：基于Webpack的JS加解密分析

前言

本教学文档基于FreeBuf文章《JS Hook 实战 | 基于Webpack的JS加解密分析》，详细讲解如何通过JS Hook技术分析并绕过Web应用中的数据加密机制。

案例背景

在对某站点短信验证码业务进行接口遍历测试时，发现目标对手机号码信息进行了加密，且采用非对称加密方式，每次加密的数据都不相同。

工具准备

• 浏览器：Chrome
• 抓包工具：Yakit
• 调试工具：Chrome开发者工具

分析步骤

1. 识别加密行为

首先通过抓包观察到目标站点对关键数据（如手机号）进行了加密，加密形式如下：

{
    "mobile": "RSA加密后的字符串",
    ...
}

2. XHR断点调试

1. 在Chrome开发者工具中，切换到Sources面板
2. 在XHR/fetch Breakpoints中添加断点，针对发送验证码的API端点

3. 触发请求并分析

1. 重新发送验证码请求，触发断点
2. 观察调用堆栈(Call Stack)，逐步分析加密过程

4. 定位加密函数

通过调试发现加密逻辑：

t.$crypt.RSA.encrypt(o.userName)

其中：

• t.userName是手机号的明文
• t.$crypt.RSA.encrypt是加密方法

5. Hook加密方法

为了修改手机号，需要在数据加密前进行字符串替换，可通过以下两种方式实现：

方法一：使用Fiddler抓包替换

1. 配置Fiddler自动响应规则
2. 拦截目标JS文件并替换修改后的版本

方法二：Chrome浏览器本地替换（推荐）

1. 在Sources面板的Overrides选项卡中，添加一个本地文件夹作为重载目录
2. 找到目标JS文件，右键选择"Save for Overrides"保存到重载目录
3. 修改JS文件，添加Hook代码

6. 实现Hook代码

在加密函数前插入Hook逻辑：

// 保存原始加密函数
const originalEncrypt = t.$crypt.RSA.encrypt;

// 重写加密函数
t.$crypt.RSA.encrypt = function(data) {
    // 在这里进行字符串替换
    if (data === "原始手机号") {
        data = "新手机号";
    }
    console.log("加密数据:", data);
    return originalEncrypt.call(this, data);
};

7. 验证Hook效果

1. 刷新页面，触发修改后的JS文件
2. 观察控制台输出，确认Hook成功
3. 检查网络请求，确认手机号已被替换并正确加密

8. 处理复杂场景

在本案例中，验证码发送需要两个请求：

1. 第一个请求返回动态加密值，用于检验第二个请求的合法性
2. 两个请求中的手机号都需要替换

操作方法相同，需要对两个请求中的加密函数分别进行Hook。

关键点总结

1. 加密识别：通过抓包识别哪些字段被加密
2. 断点调试：使用XHR断点定位加密代码位置
3. 调用堆栈分析：通过调用堆栈找到加密函数
4. Hook策略：在加密前进行数据替换
5. 本地替换：Chrome的Overrides功能是最稳定的Hook方式
6. 复杂流程处理：注意多个相关请求可能需要分别Hook

注意事项

1. Webpack打包的应用中，函数和变量名可能被混淆，需要耐心分析
2. 非对称加密每次结果不同，不能简单替换加密后的字符串
3. 确保Hook代码在加密函数被调用前执行
4. 对于生产环境，可能需要处理代码压缩和混淆的情况

扩展应用

此技术不仅可用于测试，还可用于：

• 自动化测试中的测试数据准备
• 安全审计中的加密逻辑分析
• 逆向工程中的加密算法研究

通过掌握JS Hook技术，可以有效分析Web应用中的加密机制，为安全测试和开发调试提供有力工具。