doc: 增加jsonp请求加密的实战文章

Author: CC11001100

goat/jsonp-request-encrypt/README.assets/image-20250112002041376.png

@@ -1,62 +1,105 @@
-# JSONP 参数加密示例项目
+# Script Hook辅助逆向jsonp参数加密
 
-这是一个简单的示例项目，展示了如何在客户端使用 JSONP 请求时对参数进行加密，并在服务器端解密。项目使用了 `CryptoJS` 库来实现 AES 加密和解密功能，并通过 `Express` 框架搭建了一个简单的服务器来处理 JSONP 请求。
+# 一、逆向目标
 
-## 项目结构
+这个页面上点击"发送JSONP请求"按钮的时候，会向后端发送一个jsop的请求上报数据：
 
-- **client.html**: 客户端页面，包含一个输入框和按钮，用户输入数据后，数据会被加密并通过 JSONP 请求发送到服务器。
-- **server.js**: 服务器端代码，接收加密的 JSONP 请求，解密数据并返回响应。
-- **package.json**: 项目的依赖配置文件，包含项目所需的依赖项。
+![image-20250112002041376](./README.assets/image-20250112002041376.png)
 
-## 如何运行
+但是上报的数据参数是加密的：
 
-1. **克隆项目**:
-   ```bash
-   git clone <repository-url>
-   cd <project-directory>
-   ```
+![image-20250112003254255](./README.assets/image-20250112003254255.png)
 
-2. **安装依赖**:
-   ```bash
-   npm install
-   ```
+我们的目标就是搞清楚这个data的加密逻辑。
 
-3. **启动服务器**:
-   ```bash
-   node server.js
-   ```
+# 二、下载 & 启动靶场
 
-4. **打开客户端页面**:
-   在浏览器中打开 `client.html` 文件。你可以通过文件路径直接打开，或者使用一个本地服务器（如 `http-server`）来提供服务。
+克隆仓库到本地：
 
-5. **使用示例**:
-    - 在输入框中输入数据（或使用默认生成的随机数据）。
-    - 点击“发送 JSONP 请求”按钮，数据会被加密并发送到服务器。
-    - 服务器解密数据后，返回响应并在页面上显示结果。
+```bash
+git clone [email protected]:JSREI/js-script-hook.git
+```
 
-## 代码说明
+进入靶场目录：
 
-### 客户端 (`client.html`)
+```bash
+cd js-script-hook/goat/jsonp-request-encrypt
+```
 
-- **加密函数**: 使用 `CryptoJS.AES.encrypt` 对输入数据进行加密。
-- **JSONP 请求**: 创建一个 `<script>` 标签来发送 JSONP 请求，请求完成后移除该标签。
-- **回调函数**: 处理服务器返回的响应数据，并将其显示在页面上。
+启动Server：
 
-### 服务器 (`server.js`)
+```bash
+node server.js
+```
 
-- **解密函数**: 使用 `CryptoJS.AES.decrypt` 对接收到的加密数据进行解密。
-- **JSONP 接口**: 接收加密的 JSONP 请求，解密数据后返回响应。
+打开客户端页面：
 
-## 依赖项
+```
+client.html
+```
 
-- **CryptoJS**: 用于加密和解密数据。
-- **Express**: 用于搭建服务器和处理 HTTP 请求。
+然后要破解的内容就在这个页面上。
 
-## 注意事项
+# 三、安装脚本
+
+安装请参考项目主页的安装教程，此处不再赘述：
+
+```
+https://github.com/JSREI/js-script-hook?tab=readme-ov-file#%E4%BA%8C%E5%AE%89%E8%A3%85
+```
+
+# 四、分析
+
+先配置一下脚本：
+
+![image-20250112020656925](./README.assets/image-20250112020656925.png)
+
+增加一个匹配所有URL的断点：
+
+![image-20250112020725546](./README.assets/image-20250112020725546.png)
+
+然后回到页面上点击“发送JSONP请求”按钮，发现进入了断点，从右侧的调用栈往前追溯：
+
+![image-20250112022346028](./README.assets/image-20250112022346028.png)
+
+发现这里是发起请求的地方，加密参数是外面传进来的参数：
+
+![image-20250112021518863](./README.assets/image-20250112021518863.png)
+
+然后继续往前追溯调用栈，看到了传递参数的地方：
+
+![image-20250112021345091](./README.assets/image-20250112021345091.png)
+
+然后这个`_0x1a2bData`是前面调用一个方法`_0x1a2b`生成的：
+
+![image-20250112021632098](./README.assets/image-20250112021632098.png)
+
+看起来`_0x1a2b(data, _0x3c9d)`像是在调用一个加密函数，我们先看一下传递的参数，传递了两个参数，第一个参数就是页面上要往后端上报的数据：
+
+![image-20250112021729990](./README.assets/image-20250112021729990.png)
+
+第二个参数是一个神秘的字符串，看起来像是一个秘钥，这个是在页面上写死的值：
+
+![image-20250112021832766](./README.assets/image-20250112021832766.png)
+
+搞明白了两个参数是怎么来的之后，我们继续跟进去`_0x1a2b(_0x2a3f, _0x3c9d);`看看加密逻辑是什么，鼠标移动到`_0x1a2b`上等一会儿，会展示对应的函数的信息，跟进去函数地址：
+
+![image-20250112021957446](./README.assets/image-20250112021957446.png)
+
+然后我们就跟到了这个函数的定义的地方，看起来是一个AES加密：
+
+![image-20250112022058840](./README.assets/image-20250112022058840.png)
+
+加密函数的逻辑：
+
+```js
+// 加密函数
+function _0x1a2b(data, _0x3c9d) {
+    return CryptoJS.AES.encrypt(JSON.stringify(data), _0x3c9d).toString();
+}
+```
+
+至此逻辑分析完毕，我们能够很方便的去追溯主要就是因为能够打了script类型的断点，让我们能够从底下往上追溯，同时又能够结合运行时的变量的值来更快的理解逻辑，这就是这个[Script Hook](https://github.com/JSREI/js-script-hook)工具给我们带来的优势。
 
-- **密钥管理**: 在实际项目中，密钥应妥善管理，避免硬编码在代码中。可以使用环境变量或其他安全方式来存储密钥。
-- **安全性**: 虽然本示例展示了如何加密数据，但 JSONP 本身存在一些安全风险（如跨站脚本攻击），在实际应用中应谨慎使用。
 
-## 许可证
 
-本项目基于 MIT 许可证开源。