一、浏览器抓包

浏览器可通过F12打开控制台（或者在页面点击鼠标右键，检查）
Networkimage.png

二、Charles抓包工具

Charles 简介

Charles 是在 PC 端常用的网络封包截取工具，在做移动开发时，我们为了调试与服务器端的网络通讯协议，常常需要截取网络封包来分析。除了在做移动开发中调试端口外，Charles 也可以用于分析第三方应用的通讯协议。配合 Charles 的 SSL 功能，Charles 还可以分析 Https 协议。

Charles 通过将自己设置成系统的网络访问代理服务器，使得所有的网络访问请求都通过它来完成，从而实现了网络封包的截取和分析。

Charles 主要的功能包括：

  • 截取 Http 和 Https 网络封包。
  • 支持重发网络请求，方便后端调试。
  • 支持修改网络请求参数。
  • 支持网络请求的截获并动态修改。

  • 支持模拟慢速网络。

    下载安装 Charles

    打开浏览器访问Charles官网https://www.charlesproxy.com/下载相应系统的 Charles 安装包，然后安装即可：
    image.png

    Charles 主界面介绍

    Charles 的主界面视图如下图所示：
    image.png

    工具导航栏

    Charles 顶部为菜单导航栏，菜单导航栏下面为工具导航栏。视图如下图所示：
    image.png
    工具导航栏中提供了几种常用工具：
    image.png

    主界面视图

    Charles 主要提供两种查看封包的视图，分别名为 Structure 和 Sequence。

  • Structure： 此视图将网络请求按访问的域名分类。

  • Sequence： 此视图将网络请求按访问的时间排序。

image.png
image.png
使用时可以根据具体的需要在这两种视图之前来回切换。请求多了有些时候会看不过来，Charles 提供了一个简单的 Filter 功能，可以输入关键字来快速筛选出 URL 中带指定关键字的网络请求。

对于某一个具体的网络请求，你可以查看其详细的请求内容和响应内容。如果请求内容是 POST 的表单，Charles 会自动帮你将表单进行分项显示。如果响应内容是 JSON 格式的，那么 Charles 可以自动帮你将 JSON 内容格式化，方便你查看。如果响应内容是图片，那么 Charles 可以显示出图片的预览。

Charles 菜单介绍

image.png
Charles 的主菜单包括：File、Edit、View、Proxy、Tools、Window、Help。用的最多的主菜单分别是 Proxy 和 Tools。

Proxy 菜单

Charles 是一个 HTTP 和 SOCKS 代理服务器。代理请求和响应使 Charles 能够在请求从客户端传递到服务器时检查和更改请求，以及从服务器传递到客户端时的响应。下面主要介绍 Charles 提供的一些代理功能。Proxy 菜单的视图如下图所示：
image.png
Proxy 菜单包含以下功能：

  • Start/Stop Recording：开始/停止记录会话。
  • Start/Stop Throttling：开始/停止节流。
  • Enable/Disable Breakpoints：开启/关闭断点模式。
  • Recording Settings：记录会话设置。
  • Throttle Settings：节流设置。
  • Breakpoint Settings：断点设置。
  • Reverse Proxies Settings：反向代理设置。
  • Port Forwarding Settings：端口转发。
  • Windows Proxy：记录计算机上的所有请求。
  • Proxy Settings：代理设置。
  • SSL Proxying Settings：SSL 代理设置。
  • Access Control Settings：访问控制设置。
  • External Proxy Settings：外部代理设置。
  • Web Interface Settings：Web 界面设置。

    Proxy-Throttle Settings(节流设置)

    Throttle Settings 和 Start/Stop Throttling 配合使用，在 Start Throttling 的状态下，可以通过 Throttle Settings 配置 Charles 的网速模拟配置。Throttle Settings 的视图如下图所示：
    image.png
    勾选 Enable Throttling 启用网速模拟配置，在 Throttle Preset 下选择网络类型即可，具体设置可以根据实际情况自行设置。如果只想模拟指定网站的慢速网络，可以再勾选上图中的 Only for selected hosts 项，然后在对话框的下半部分设置中增加指定的 hosts 项即可。

Throttle Settings 视图中的选项含义如下：

  • Bandwidth：带宽
  • Utilistation：利用百分比
  • Round-trip：往返延迟
  • MTU：字节

    Proxy-Breakpoint Settings(断点设置)

    Breakpoint Settings 和 Enable/Disable Breakpoints 配合使用，在 Enable Breakpoints 的状态下，可以通过 Breakpoint Settings 配置 Charles 的断点模式。Breakpoint Settings 的视图如下图所示：
    image.png
    勾选 Enable Breakpoints 启用断点模式，选择 Add，然后填入需要监控的Scheme、Procotol、Host 和 Port 等信息，这样就达到了设置断点的目的。然后可以来观察或者修改请求或者返回的内容，但是在这过程中需要注意请求的超时时间问题。或者可以在某个想要设置断点的请求网址上右击选择 Breakpoints 来设置断点。

    Proxy-Port Forwarding Settings(端口转发)

    可以将任何 TCP/IP 或 UDP 端口配置为使用 Port Forwarding 工具从 Charles 转发到远程主机。这样可以调试 Charles 中的任何协议。
    在 Macromedia Flash 中调试 XMLSocket 连接时，这尤其有用。
    还可以使用 Charles 作为 SOCKS 代理，因此无需设置端口转发。
    image.png

    Proxy-Windows Proxy(记录计算机上的所有请求)

    如果想要抓取电脑端的请求，勾选 Windows Proxy 选项即可；如果只需要抓取手机请求，则取消勾选这个选项。

    Proxy-Proxy Settings(代理设置)

    image.png
    代理端口默认为 8888(可以修改)，并且勾上 Enable transparent HTTP proxying 就完成了在 Charles 上的代理设置。

    Proxy-SSL Proxy Settings(SSL 代理设置)

    SSL Proxy Settings 的视图如下图所示：
    image.png
    勾上 Enable SSL proxying 就完成了在 Charles 上的 SSL 代理设置。之后也可以选择 Add，然后填入需要监控的 Host 和 Port 信息，这样就达到了针对某个域名启用 SSL 代理的目的。

Tools 菜单

Charles 是一个 HTTP 和 SOCKS 代理服务器，所有的请求都会经过 Charles。下面主要介绍 Charles 提供的一些实用工具。Tools 菜单的视图如下图所示：
image.png
Tools 菜单包含以下功能：

  • No Caching Settings：禁用缓存设置。
  • Block Cookies Settings：禁用 Cookie设置。
  • Map Remote Settings：远程映射设置。
  • Map Local Settings：本地映射设置。
  • Rewrite Settings：重写设置。
  • Black List Settings：黑名单设置。
  • White List Settings：白名单设置。
  • DNS Spoofing Settings：DNS 欺骗设置。
  • Mirror Settings：镜像设置。
  • Auto Save Settings：自动保存设置。
  • Client Process Settings：客户端进程设置。
  • Compose：编辑修改。
  • Repeat：重复发包。
  • Repeat Advanced：高级重复发包。
  • Validate：验证。
  • Publish Gist：发布要点。
  • Import/Export Settings：导入/导出设置。
  • Profiles：配置文件。
  • Publish Gist Settings：发布要点设置。

具体介绍参考https://juejin.cn/post/6844903665304600589

Charles 使用教程

通过 Charles 进行 PC 端抓包

Charles 会自动配置浏览器和工具的代理设置，所以说打开工具直接就已经是抓包状态了。只需要保证一下几点即可：

  1. 确保 Charles 处于 Start Recording 状态。
  2. 勾选 Proxy | Windows Proxy 和 Proxy | Mozilla FireFox Proxy。

通过 Charles 进行移动端抓包

手机抓包的原理，和 PC 类似，手机通过把网络委托给 Charles 进行代理与服务端进行对话。具体步骤如下：

  1. 使手机和电脑在一个局域网内，不一定非要是一个 IP 段，只要是在同一个路由器下即可。
  2. 电脑端配置：
    • 关掉电脑端的防火墙（这点很重要）。
    • 打开 Charles 的代理功能：通过主菜单打开 Proxy | Proxy Settings 弹窗，填入代理端口(端口默认为 8888，不用修改)，勾选 Enable transparent HTTP proxying。
    • 如果不需要抓取电脑上的请求，可以取消勾选 Proxy | Windows Proxy 和 Proxy | Mozilla FireFox Proxy。
  3. 手机端配置：
    • 通过 Charles 的主菜单 Help | Local IP Address 或者通过命令行工具输入 ipconfig 查看本机的 IP 地址。
    • 设置代理：打开手机端的 WIFI 代理设置，输入电脑 IP 和 Charles 的代理端口。
  4. 设置好之后，我们打开手机上的任意需要网络请求的程序，就可以看到 Charles 弹出手机请求连接的确认菜单（只有首次弹出），点击 Allow 即可完成设置。
  5. 完成以上步骤，就可以进行抓包了。

通过 Charles 进行 HTTPS 抓包

HTTPS 的抓包需要在 HTTP 抓包基础上再进行设置。需要完成一下步骤：

  1. 完成 HTTP 抓包配置。
  2. 电脑端安装 Charles 证书：通过 Charles 的主菜单 Help | SSL Proxying | Install Charles Root Certificate 安装证书。
  3. 设置 SSL 代理：通过主菜单打开 Proxy | SSL Proxy Settings 弹窗，勾选 Enable SSL proxying。
  4. 移动端安装 Charles 证书：通过 Charles 的主菜单 Help | SSL Proxying | Install Charles Root Certificate on a Mobile Device or Remote Browser 安装证书。
  5. 设置好之后，我们打开手机上的任意需要网络请求的程序，就可以看到 Charles 弹出手机请求连接的确认菜单（只有首次弹出），点击 Allow 即可完成设置。
  6. 完成以上步骤，就可以进行 HTTPS 抓包了。

    Charles License（秘钥）

  • Registered Name: https://zhile.io
  • License Key: 48891cf209c6d32bf4 注册码来自于网络，注册码 Windows 和 Mac 通用。

参考致谢：
https://juejin.cn/post/6844903665304600589
https://www.cnblogs.com/molity88/p/12923155.html