利用 Chrome devTools Source Override 实现JS逆向破解案例

之前讲解 Chrome 一大强势技术 override 时，给的案例貌似没有给大家留下多深的印象

浏览器本地替换（local overrides）快速定位前端样式问题的案例详解（也是hook js的手段）_浏览器的 overrides 替换功能-CSDN博客

其实这个超厉害的，任何一项小技术在 buffer 叠加的基础下才能发挥威力，若单单看到这一项技术，就局限了。

注意

实际测试时，最新版本的 Chrome 的 override 已经不好用了，原因未知，用的 360 极速浏览器搞得，不过神奇的时，Chrome 开启 override 公用极速浏览器的文件夹时，竟然也可以，后经排查，应该是谷歌浏览器的自动格式化问题导致，细节不深究。

结合 xhr 的监听

Chrome 浏览器是能监听到 XHR 请求的，一般我们逆向的突破点都在 XHR 这里，因为所谓的逆向就是为了捕捉传输过程中的数据，因为 Chrome 浏览器就帮我们解决了这个问题。

在 network 中监听 fetch/xhr 请求，发现每次点击页码时都是调用这个接口，于是我们以这个接口特征进行 xhr 断点

设置 xhr 断点

再次点击页码时，会停在一个位置

xhr 返回的数据是加密的

1. 一般企业都会将信息进行加密，或者混淆，以避免这么简单就被你获取数据了，既然数据被加密，自然有解密函数，只要你耐心调试一下，往下游去找，定能找到被解密的数据结构，找到后，再对所有 js 进行回搜，就能快速定位解密函数，例如这里解密后，我们会发现数据结构中有个 nodes，且这个 nodes 是另外一个大对象里面的 key，那无非有两种赋值方式['nodes'] 或者 .nodes，我们搜搜后者，发现还在这个 js 文件中，那就没跑了

我们回到这个 js，再进行搜索，可以精确定位到这个数据的解析来源，把整个代码，让 grok 帮我们重新写一下，让我们理解得更彻底

grok 重写后的代码，完美重写的代码，一目了然，核心点就在 o(l)，经过 grok 重写后，我们知道 o 就是 resolve，l 就是返回数据 parsedData

async function le(t, n) {// 构造 URLconst e = new URL(t);e.pathname = be(t.pathname);if (t.pathname.endsWith("/")) {e.searchParams.append(Be, "1");}e.searchParams.append(He, n.map(o => (o ? "1" : "0")).join(""));// 发起 HTTP 请求const a = await Ht(e.href);if (!a.ok) {const contentType = a.headers.get("content-type");let errorMessage;if (contentType?.includes("application/json")) {errorMessage = await a.json();} else if (a.status === 404) {errorMessage = "Not Found";} else if (a.status === 500) {errorMessage = "Internal Error";}throw new st(a.status, errorMessage);}// 处理流式数据return new Promise((resolve, reject) => {const i = new Map();const s = a.body.getReader();const c = new TextDecoder();// 自定义函数，用于处理数据转换function f(g) {return Me(g, {Promise: d =>new Promise((fulfil, reject) => {i.set(d, { fulfil, reject });}),});}let buffer = "";async function processStream() {while (true) {const { done, value } = await s.read();if (done && !buffer) {break;}buffer += value ? c.decode(value, { stream: true }) : "\n";while (true) {const lineEndIndex = buffer.indexOf("\n");if (lineEndIndex === -1) {break;}const line = buffer.slice(0, lineEndIndex);buffer = buffer.slice(lineEndIndex + 1);const parsedData = JSON.parse(line);if (parsedData.type === "redirect") {return resolve(parsedData); // 直接解析并返回} else if (parsedData.type === "data") {if (parsedData.nodes) {parsedData.nodes.forEach(node => {if (node?.type === "data") {node.uses = fe(node.uses);node.data = f(node.data);}});}resolve(parsedData); // 解析第一个 data 数据return; // 避免多次 resolve} else if (parsedData.type === "chunk") {const { id, data, error } = parsedData;const promiseHandler = i.get(id);i.delete(id);if (error) {promiseHandler.reject(f(error));} else {promiseHandler.fulfil(f(data));}}}}// 如果流结束且没有返回任何数据，可以选择 reject 或 resolve 一个默认值reject(new Error("Stream ended without redirect or data"));}processStream().catch(reject);});
}

把这个 js 给 override 了，怎么 override，参考以前我写得链接吧，这里不赘述了

然后在 override 的文件里追加一个 fetch 代码，发到我们本地代码去

让 Grok 用 flask 写一个本地 http 协议的服务承接内容，并写到 excel 中去

1. 注意 http 服务要允许跨域，因为发过来的 origin 是其他域名，不允许就会被拒绝

2. 如果网页本身采用 CSP 的方式阻止浏览器发出跨域请求，不过 localhost 一般不会，若被拒绝，可以下载一个 CSP 扩展开启后就行了，这个可以重写 xhr 的 response headers

from flask import Flask, request, jsonify
from flask_cors import CORS
import openpyxl
from openpyxl import load_workbook
import osapp = Flask(__name__)# 启用 CORS，允许所有来源访问
CORS(app)# Excel 文件路径
EXCEL_FILE = 'WhatsApp.xlsx'# 常驻缓存：存储已经写入的 id
ID_CACHE = set()# 检查 Excel 文件是否存在，如果不存在则创建并添加表头
# 如果存在，则加载现有数据到缓存
if not os.path.exists(EXCEL_FILE):wb = openpyxl.Workbook()ws = wb.activews.title = "Data"headers = ["id", "name", "version", "description", "userCount", "lastUpdate", "email", "author", "ratingValue","ratingCount", "logo", "creationDate"]ws.append(headers)wb.save(EXCEL_FILE)
else:# 加载 Excel 文件中的 id 到缓存try:wb = load_workbook(EXCEL_FILE)ws = wb["Data"]for row in ws.iter_rows(min_row=2, values_only=True):  # 从第二行开始（跳过表头）if row[0]:  # 确保 id 不为空ID_CACHE.add(row[0])print(f"Loaded {len(ID_CACHE)} IDs into cache from {EXCEL_FILE}")except Exception as e:print(f"Error loading IDs from Excel: {e}")# 定义一个 POST 路由来接收 JSON 数据
@app.route('/extract', methods=['POST'])
def extract_fields():try:# 获取请求中的 JSON 数据data = request.get_json()# 如果数据不是列表，直接转换为列表以统一处理if not isinstance(data, list):data = [data]# 提取指定字段，并检查缓存extracted_data = []new_data_to_save = []  # 存储需要写入 Excel 的新数据for item in data:item_id = item.get("id")if item_id in ID_CACHE:# 如果 id 已存在，跳过写入，但仍返回该数据extracted_item = {"id": item_id,"name": item.get("name"),"version": item.get("version"),"description": item.get("description"),"userCount": item.get("userCount"),"lastUpdate": item.get("lastUpdate"),"email": item.get("email"),"author": item.get("author"),"ratingValue": item.get("ratingValue"),"ratingCount": item.get("ratingCount"),"logo": item.get("logo"),"creationDate": item.get("creationDate")}extracted_data.append(extracted_item)continue# 如果 id 不存在，添加到缓存并准备写入 ExcelID_CACHE.add(item_id)extracted_item = {"id": item_id,"name": item.get("name"),"version": item.get("version"),"description": item.get("description"),"userCount": item.get("userCount"),"lastUpdate": item.get("lastUpdate"),"email": item.get("email"),"author": item.get("author"),"ratingValue": item.get("ratingValue"),"ratingCount": item.get("ratingCount"),"logo": item.get("logo"),"creationDate": item.get("creationDate")}extracted_data.append(extracted_item)new_data_to_save.append(extracted_item)# 将新数据保存到 Excelif new_data_to_save:  # 只有当有新数据时才写入 Excelsave_to_excel(new_data_to_save)# 返回提取后的数据（包括已存在和新增的数据）return jsonify(extracted_data), 200except Exception as e:return jsonify({"error": str(e)}), 400# 函数：将数据保存到 Excel
def save_to_excel(data):wb = load_workbook(EXCEL_FILE)ws = wb["Data"]for item in data:row = [item["id"],item["name"],item["version"],item["description"],item["userCount"],item["lastUpdate"],item["email"],item["author"],item["ratingValue"],item["ratingCount"],item["logo"],item["creationDate"]]ws.append(row)wb.save(EXCEL_FILE)# 启动服务
if __name__ == '__main__':app.run(host='0.0.0.0', port=5000, debug=False)

CSP 谷歌扩展

这玩意是啥？不懂就自行谷歌学习一下吧，给浏览器用的东西

跨域搞定后，数据就能发送过去了

network 记得勾选预留日志和关闭缓存，否则有些东西看不到，完美处理

后续

你想全自动化采集？那就自学个谷歌插件吧，或者用 python 的 puppeteer 来进行替换处理，所以的加解密，只要是网页端能被你眼睛看到的，基本都可以采用以上方式解决。