learn-network

Appearance

抓包 ​

应用抓包 ​

在前端场景一般我们会涉及如下宿主环境

  • 浏览器或 webview 内核
  • 移动端设备开发
    • ios
    • android
    • 鸿蒙
    • 小程序
  • 端侧开发
    • electron
    • react-native
    • flutter
  • 服务端
    • nodejs
    • deno
    • bun

node 抓包 ​

参考 google 论坛说明 Node http/https 未采用系统代理，所以无法转包，需要使用 第三方工具抓取请求，具体详见 Use Dev Proxy with Node.js applications, v24 版本开始后 内置代理支持, 使用详见 built in proxy

注意 v22.21.0 也支持 built in proxy， 详见 Proxy Configuration

典型抓包方案如下

低于 v24 且非 v22.21.0 版本 ​

  1. 安装 global-agent

  2. 开启代理工具

    1. charles 默认代理端口 http://127.0.0.1:8888, 具体端口可以去 help -> SSL Proxying -> Install Charles Root Certificate on a mobile device or remote browser 获取查
    2. fiddler 默认代理端口 http://127.0.0.1:8866

  3. 调试场景，不需要修改代码直接通过 -r 注入模块即可

    json
      "scripts": {
      "charles": "GLOBAL_AGENT_HTTP_PROXY=http://127.0.0.1:8888 node -r global-agent/bootstrap ./xx.js",
      "fiddler": "GLOBAL_AGENT_HTTP_PROXY=http://127.0.0.1:8866 node -r global-agent/bootstrap ./xx.js"
   }

  4. 打开代理工具，即可看到 node 请求

TIP

在类似 electron 等应用中，用户不是直接通过 node 启动，此时可以通过 NODE_OPTIONS 环境变量设置代理,

json
// cross-env 来兼容不同系统的环境变量配置
"scripts": {
   "dev": "xxx",
   "dev:proxy": "cross-env NODE_OPTIONS=\"--require global-agent/bootstrap\" npm run dev"
}

内嵌支持版本 ​

  1. 开启代理添加环境配置, --use-env-proxy 开启代理，HTTPS_PROXY 置顶 https 代理，注意 http 采用 HTTP_PROXY 设置
    json
       "scripts": {
      "charles": "HTTPS_PROXY=http://127.0.0.1:8888 node --use-env-proxy  ./xx.js",
      "fiddler": "HTTPS_PROXY=http://127.0.0.1:8866 node --use-env-proxy ./xx.js"
   }
  2. 打开代理工具，即可看到 node 请求