网站抓包解析,掌握浏览器请求和 HTTPS 数据分析的流程

0 阅读4分钟

在开发或调试网站接口时,经常会遇到这样的问题:

  • 页面加载失败
  • 接口返回数据异常
  • 请求参数与预期不一致

查看日志无法解释问题,直接查看网络请求更有效。 抓包的目标就是把浏览器与服务器之间的通信记录下来。

下面通过排查,说明网站抓包通常是如何进行的。


一、先用浏览器开发工具查看请求

在大多数情况下,第一步不需要安装任何工具。

打开浏览器开发者工具:

  1. 在 Chrome 或 Safari 中打开网页
  2. F12 打开开发者工具
  3. 切换到 Network 面板
  4. 刷新页面

页面加载过程中产生的请求会出现在列表中。

可以查看:

  • 请求地址
  • 请求方法
  • 请求参数
  • 返回数据

例如在调试登录接口时,可以直接看到 POST 请求发送的 JSON 数据。


二、当浏览器工具不够用时

浏览器开发工具只能看到当前浏览器的请求。

如果需要:

  • 修改请求参数
  • 重放请求
  • 抓取其他应用的请求

就需要使用代理抓包工具。

常见工具包括:

  • Charles
  • Sniffmaster
  • Proxyman
  • Fiddler

这些工具的工作方式是,浏览器的请求先发送到代理,再由代理转发到服务器。

因此代理工具可以记录 HTTP 或 HTTPS 请求。


三、在电脑上配置代理抓包

准备一台电脑并启动代理工具,例如 Charles。

操作步骤:

  1. 启动 Charles
  2. 查看代理监听端口,例如 8888
  3. 在浏览器或系统网络设置中配置 HTTP 代理
  4. 将代理地址设置为 127.0.0.1:8888

保存设置后,浏览器请求会经过代理。


验证抓包是否成功

打开浏览器访问一个网站,例如:

https://example.com

如果 Charles 中出现新的请求记录,说明代理抓包已经成功。

此时可以查看:

  • URL
  • Header
  • Cookie
  • Response

四、抓取 HTTPS 网站请求

如果网站使用 HTTPS,还需要安装代理证书。

操作步骤:

  1. 在浏览器中访问代理工具提供的证书下载地址
  2. 下载证书
  3. 安装到系统证书库
  4. 将证书设置为 信任

完成后,代理工具可以解密 HTTPS 请求。

重新加载网页后,可以看到完整响应内容。


五、修改网站请求参数

在调试接口时,有时需要修改请求参数,例如:

  • 修改请求 Header
  • 改写 POST 数据
  • 重定向 API 地址

在 Charles 或 Proxyman 中,可以使用 Rewrite 或 Breakpoints 功能。 在 Sniffmaster(抓包大师)中也可以使用拦截器功能。 例如:

  1. 在 Charles 中开启 Breakpoints
  2. 刷新页面
  3. 在请求发送前暂停
  4. 修改参数
  5. 再发送请求

服务器返回结果后,可以立即看到变化。


六、如果请求来自移动设备

如果网站接口是由手机 App 调用的,可以让手机流量经过电脑代理。

操作步骤:

  1. 手机与电脑连接同一 Wi-Fi
  2. 在手机 Wi-Fi 设置中配置 HTTP 代理
  3. 输入电脑 IP 与代理端口

然后打开手机浏览器访问网站。

代理工具中会出现手机发出的请求。 代理


七、抓取移动设备 HTTPS 请求

如果手机访问的是 HTTPS 网站,还需要安装证书。

操作步骤:

  1. 在手机浏览器访问Sniffmaster代理工具提供的证书地址
  2. 下载描述文件
  3. 安装证书
  4. 在系统设置中开启证书信任

完成后,代理工具可以解析手机 HTTPS 请求。 代理证书


八、当代理抓不到请求时

有些 App 或网页请求不会走系统代理。

此时可以使用设备级抓包工具,例如 SniffMaster(抓包大师)

这种方式不依赖 Wi-Fi 代理,可以直接从设备中直接读取网络数据。


使用 SniffMaster 抓取网络请求

操作步骤:

  1. 使用 USB 将 iPhone 连接电脑
  2. 保持设备解锁
  3. 在手机上点击 信任此电脑
  4. 启动 SniffMaster
  5. 在设备列表中选择设备
  6. 按提示安装描述文件
  7. 进入 HTTPS 暴力抓包模式
  8. 点击开始

然后触发手机访问网站。

抓包界面会出现对应的网络请求。 暴力抓包


九、分析底层网络问题

如果需要分析更底层的网络行为,例如:

  • TCP 连接问题
  • 网络延迟
  • 数据包重传

可以将Sniffmaster抓到的数据导出到 Wireshark数据流抓包

在 Wireshark 中可以查看:

  • TCP 三次握手
  • 数据传输过程
  • 连接关闭原因

不同抓包工具的使用场景

不同工具在网络中的使用场景不同:

工具抓包方式适用场景
浏览器开发工具浏览器内部页面调试
Charles代理抓包HTTP / HTTPS
Proxyman代理抓包HTTPS 调试
SniffMaster设备本机抓包移动设备网络
Wireshark网络层抓包TCP / UDP 分析

参考链接:www.sniffmaster.net/tutorial/zh…