苹果 Safari 浏览器抓包 页面刷新后的请求分析

在 iPhone 上抓浏览器请求时,有一个容易忽略的点就是 Safari 的请求不只是一条接口,而是一堆请求组合起来的,一次页面刷新,会产生:

  • HTML 主文档
  • JS / CSS 资源
  • 接口请求(XHR / Fetch)

如果不分开来看的话,很难找到自己想要的数据。


先记录一次干净的页面加载

在 iPhone 上:

  1. 打开 Safari
  2. 输入一个 URL
  3. 不要点击任何按钮
  4. 直接刷新页面

同时准备抓包工具

可以先用代理工具,例如:

  • Charles
  • Proxyman
  • Sniffmaster

观察请求

页面加载后,会出现一组请求:

  • 第一个是 HTML
  • 后面是 JS / CSS
  • 最后是接口请求

HTML 请求返回后,JS 才会继续触发接口。这个顺序可以在时间轴中看到。


二、只保留接口请求

在抓包工具中筛选:

  • Method = GET / POST
  • 类型 = XHR / Fetch

操作方式(以 Charles 为例)

  1. 清空记录
  2. 刷新页面
  3. 只观察新请求

结果

可以看到类似:

复制代码
/api/list?page=1

验证 HTTPS 是否可解密

点击某一条请求,查看 Response BodyHeader

如果内容可见

说明证书生效,HTTPS 已解密

如果内容不可见

执行一个对照操作:

  1. 打开另一个 HTTPS 网站
  2. 查看是否能解密

判断结果

  • 都不可见 → 证书未信任
  • 只有当前站点不可见 → 存在额外校验

换一种角度,用 Web Inspector 看浏览器内部请求

Safari 本身提供了一层更接近页面的调试能力。

操作步骤

在 iPhone:

  1. 设置 → Safari → 高级
  2. 开启"Web 检查器"

在 Mac:

  1. 打开 Safari
  2. 菜单栏 → 开发
  3. 选择 iPhone 页面

打开 Network 面板

刷新页面,可以看到:

  • JS 发起的请求
  • 页面渲染过程

和代理抓包的区别

  • Web Inspector:看到页面逻辑
  • 代理工具:看到网络数据

两者数据来源不同。

一个容易遇到的情况,代理抓不到某些请求

在 Safari 场景中,可能出现:

  • Web Inspector 能看到请求
  • 代理工具没有记录

验证方法

关闭代理:

  1. 关闭 iPhone 代理
  2. 再刷新页面

对比结果

如果页面仍然正常加载说明部分请求未走代理,此时可以使用 SniffMaster(抓包大师)


操作步骤

  1. 用 USB 连接 iPhone
  2. 保持设备解锁
  3. 点击"信任此电脑"
  4. 启动 SniffMaster
  5. 选择设备
  6. 安装描述文件
  7. 进入 数据流抓包 / HTTPS 暴力抓包模式
  8. 点击开始

再执行页面刷新

在 Safari 中重新加载页面。

观察结果

可以看到:

  • 所有网络请求
  • 包括未经过代理的流量

如何快速定位关键接口

设备抓包数据较多的话,操作方法:

  1. 清空抓包记录
  2. 点击开始
  3. 立即刷新页面

再做筛选

使用关键字:

复制代码
/api

结果

可以快速定位接口请求。


贴近实际的抓包流程

把整个流程整理成一个顺序:

  1. 用代理抓包获取接口
  2. 用 Web Inspector 理解页面行为
  3. 如果请求缺失,使用 SniffMaster
  4. 用代理工具修改请求

每一步解决不同问题。

例如一个列表页面:

  1. 清空抓包记录
  2. 刷新页面
  3. 找到 /list 请求
  4. 查看返回数据

可以确认、分页参数和返回结构

相关推荐
晓得迷路了3 分钟前
栗子前端技术周刊第 141 期 - Next.js 16.3、npm 安全事件、2026 CSS 现状调查报告结果...
前端·javascript·npm
2601_9657984716 分钟前
Launch Your Wellness App Fast: The Truth About Meditation Source Code
前端·macos·ios·objective-c·cocoa
小乖写代码25 分钟前
49款开源Android小游戏
android·游戏
周小董36 分钟前
[1367]npm 安装 canvas 报错 node-gyp ERR
前端·npm·node.js
智脑API36 分钟前
Codex config.toml check_for_update_on_startup 怎么关闭?离线环境与版本提醒排查
运维·服务器·前端
三少爷的鞋1 小时前
小团队的最优解:单 Module + 包内 Clean 架构
android
存在的五月雨1 小时前
前端布局-flex
前端
爱和冰阔落1 小时前
【Linux】两个毫无关系的进程怎么通信?命名管道 FIFO 从原理到 Server/Client 实战
android·linux·数据库·c++·vim
Zzj_tju2 小时前
Tool-Using LLM 论文精读路线:从 ReAct 到可验证工具调用
前端·react.js·前端框架
To_OC9 小时前
别再瞎写 React Router!7 个高频踩坑点一次性讲透
前端·javascript·react.js