第九课：网页上的机关——前端 JS 逆向

对应原书第 13 章《前端 JS 逆向》

第九天，陈师傅难得没在铺子里——他去了镇上唯一一家网吧，说要"办案"。小林跟去，看见他正盯着一台电脑屏幕，上面是个网页，网页上有几个输入框，还有个"登录"按钮。

"师傅，这又是啥？"

"有个家伙，在网上卖东西。但他给自己的网页装了个'机关'——每次提交订单，都要带一个'暗号'（签名参数）。没有暗号，服务器就拒绝。正常顾客看不到暗号，因为网页自己会算。"

小林歪头："那暗号在哪？"

"在网页的'骨头里'。"陈师傅指了指屏幕，"网页不是'一张纸'，它是一套程序（JavaScript）。程序里藏着'算暗号'的代码。我们今天的活儿：从网页的程序里，把'算暗号'的方法偷学出来。"

小林看着密密麻麻的网页代码，头大："这可比拆钟难……"

"不难。"陈师傅笑了，"记住五个字：先看，再抓，后复现。就像修钟——先看它怎么走，再抓住关键齿轮，最后自己装一个。"

课程正文

前端 JS 逆向 = 分析网页里运行的 JavaScript，搞清楚"签名/加密参数怎么算出来的"。

核心思路（Observe-first）

目标: 复现"算签名"的过程（不是破解服务器！）
方法: 观察 → 抓取 → 复现

1. Observe（观察）: 看网页发了什么请求
2. Capture（抓取）: 在"算签名"的那一刻抓住它
3. Rebuild（复现）: 把算法搬到自己电脑上重跑

第一步：观察（网页在说什么）

打开浏览器开发者工具（F12）→ Network 面板：

1. 找"带签名的那个请求"（通常是 POST/带一堆参数）
2. 看它的参数: 有没有 sign / token / nonce / ts 之类
3. 看 Initiator（发起者）: 是哪个 JS 文件调用的
4. 顺着 JS 文件 → 找到"算签名"的函数

第二步：抓取（在关键时刻抓住它）

方法 1: XHR 断点（最常用）
  在"发送请求"处下断点 → 请求发出前停住
  → 看调用栈 → 往上翻 → 找到生成签名的函数

方法 2: 运行时观察
  在可疑函数入口打印参数和返回值

方法 3: 全局搜索
  在 JS 源码里搜关键词: sign / encrypt / md5 / token

第三步：复现（把算法搬回家）

// 假设找到了: 签名 = md5(时间戳 + 参数 + "secret")
// 在 Node.js 里复现:
const crypto = require("crypto");

function makeSign(params, ts) {
    const raw = ts + params + "secret";
    return crypto.createHash("md5").update(raw).digest("hex");
}

// 测试: 能算出和网页一样的签名 → 成功！

补环境（网页代码在自己电脑上跑不了时）

问题: 网页代码依赖浏览器环境（window/document/navigator）
解决: "补环境"——在 Node 里模拟这些对象
  页面用什么，就补什么（有依据地补！）
  例: global.window = global; global.navigator = {userAgent: "..."};

陈师傅的比喻

"网页是透明的钟——它当着你的面走，只是走得快。打开开发者工具，就是给它放慢动作。找到'算暗号'的齿轮，你就能自己复制一个。"

本课口诀

先看（Network），再抓（XHR 断点），后复现（Node 重跑）。

动手做

打开一个网站的开发者工具，找一个"带签名参数"的请求，记录它的参数名。
用 XHR 断点找到生成签名的那段代码（对着教程练）。
把签名算法在 Node 里复现，跑出和网页一样的值。
想一想：如果网页代码混淆得很厉害（一堆乱码），怎么办？（提示：AST 去混淆，见原书 13 章）

想学更深的

见原书第 13 章《前端 JS 逆向》——五阶段工作流、AST 去混淆、SourceMap 恢复源码、补环境方法论。