如何捕获第三方混淆JavaScript网页应用的网络访问并获取数据

碰到这种混淆JS的Web应用确实头疼，我之前也踩过类似的坑，给你几个实用的方向试试：

先排查DevTools的设置盲区 #

你说DevTools看不到数据请求，大概率是没找对地方或者设置没开全：

• 一定要勾选Network面板的Preserve log选项，不然页面刷新或者JS动态跳转后，之前的请求会被清空
• 检查Filter栏是不是选了All，别只盯着XHR/Fetch标签——有些应用会用WebSocket、WebRTC甚至自定义协议推送数据，这些默认可能不在XHR/Fetch的筛选范围内
• 开启Show private network requests和Show CORS errors，避免漏掉跨域或者内网的请求

突破混淆JS的代码层 #

既然JS是混淆的，我们得从原生API的调用痕迹入手：

• 打开Sources面板，点击那个带感叹号的Pause on exceptions按钮（开启后会在JS报错时暂停），哪怕混淆代码里有小错误，都能帮你顺着调用栈定位到发起请求的代码块
• 用DevTools的全局搜索（Ctrl+Shift+F），搜fetch、XMLHttpRequest、WebSocket、send、postMessage这些关键词——哪怕代码被混淆，原生API的名字一般不会被完全替换，总能找到调用痕迹
• 如果碰到WebAssembly的混淆，Sources面板里有专门的Wasm调试选项，可以格式化后看调用逻辑

用无头浏览器直接模拟抓取（最省心的方案） #

这个方法能绕过所有混淆和请求隐藏的问题，因为它完全模拟真实浏览器的环境：
用Puppeteer或者Playwright这类工具，它们会完整执行所有混淆JS，还能监听所有网络请求。举个Puppeteer的简单例子：

const puppeteer = require('puppeteer');

(async () => {
  // 启动浏览器（可以加headless:false看到真实界面）
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  // 监听所有网络请求，打印关键信息
  page.on('request', (request) => {
    console.log('请求URL:', request.url());
    console.log('请求方法:', request.method());
    console.log('请求参数:', request.postData());
  });

  // 打开目标页面
  await page.goto('你的目标Web应用URL');
  // 等待数据加载完成（可以换成你页面里展示数据的元素选择器）
  await page.waitForSelector('.data-container');

  // 甚至可以直接提取页面上展示的数据
  const data = await page.$eval('.data-container', el => el.textContent);
  console.log('提取到的数据:', data);

  await browser.close();
})();

这个方案连Cookie、Session和JS生成的请求头都不用自己处理，完全和你在浏览器里看到的一致。

解密Wireshark的HTTPS流量（备选方案） #

如果你一定要用Wireshark抓包，可以通过Chrome的SSL密钥日志来解密HTTPS流量：

1. 关闭所有Chrome进程
2. 启动Chrome时设置SSLKEYLOGFILE环境变量：
   • Windows：set SSLKEYLOGFILE=C:\ssl-keys.log && start chrome
   • Mac/Linux：export SSLKEYLOGFILE=~/ssl-keys.log && google-chrome
3. 打开Wireshark，进入Edit > Preferences > Protocols > TLS，把(Pre)-Master-Secret log filename指向刚才生成的日志文件，就能解密所有HTTPS流量了

不过这个方法需要过滤大量无关流量，不如用无头浏览器高效。

其他小技巧 #

• 检查Application面板里的Service Workers，如果有启用，请求可能被它代理了，你可以临时禁用Service Worker来测试
• 看Network面板的Initiator列，能看到每个请求是由哪个JS文件发起的，找到对应的文件后点击{}按钮格式化混淆代码，哪怕看不懂全部逻辑，也能找到请求相关的片段

内容的提问来源于stack exchange，提问作者John Henckel