image.png

前言

在移动端开发过程中由于没有像 PC 上那样完善的浏览器控制台，在遇到一些需要抓包查看请求内容是否符合预期的时候就需要用到一些代理软件，在 Mac 上我们常用的是 charles (花瓶），在 WIndows 上可以用 Fiddler)。本周因为业务上对接客户的 App 所以用到了 Charles 的 Https 代理抓包，在 Charles 上开启 Http 请求抓包相对比较简单，但对于 Https 的请求则需要 PC 和手机上都安装并信任 Charles 提供的证书才能正常抓包，配置过程比较繁琐，网上不容易找到好用完备的教程，这里简要做一下配置记录，少走弯路。

简要步骤 TL;DR

不想要看大量图文的可以参考这里，此段转载自 https://blog.csdn.net/weixin_40645546/article/details/97612501

在Charles中要与手机连接（手机和电脑要在同一局域网，可电脑热点，用手机连接电脑热点）：
以下步骤请按照顺序操作

  1. 打开Charles，选择proxy—〉proxy setting，查看charles，端口
  2. 勾选Enable transparent HTTP proxying
  3. 点击Charles界面的Proxy SSL Proxying Settings选项，Ddd Location：Host：，Port=
  4. 点击Charles界面的Help SSL Proxying—>Install Charles Root Certificate
  5. 点击Charles界面的Help SSL Proxying—>Install Charles Root Certificate on a Mobile Device and Remote Browser.然后会弹出一下界面，点击确定，之后就可以安装下图提示配置手机设置了。
  6. CMD ipconfig，查看自己电脑的ip地址，ipv4
  7. 打开手机设置->无线局域网，连接电脑发送的wifi热点后，手机上配置该网络
  8. HTTP代理处设置为“手动”，服务器填写为电脑的IP地址，端口填写Charles上显示的端口号，此处为8888,然后保存，此时charles会给出提示。有新的连接。点击allow
  9. 为手机安装SSL证书，进手机浏览器输入chls.pro/ssl之后会进入下图界面，点击安装Charles Proxy CA.此处iPhone会自动识别安装，但部分安卓手机是无法安装，只能现在到手机存储，然后再手机 设置—>安全与隐私中找到从存储中安装，即可安装CA。

连接成功，此时手机发送的内容，charles可以抓到。

详细步骤

1. 打开 Charles 代理设置

MacOS Proxy 默认是打开的，也就是你打开 Charles，软件就开始抓包了。通过 Proxy => ProxySetting 来进行代理配置：
image.png
默认情况下 Http 的代理配置如下，动态端口的意思是端口号如果冲突的话那么动态变化，一般我们为了后续手机连接方便会选择固定端口号，如 8888。

透明代理使 Charles 能够支持不支持HTTP代理服务器的客户端，或者不知道他们正在使用HTTP代理服务器，例如TCP / IP连接由路由器或防火墙重定向到Charles。这里我们勾选上。
image.png

2. SSL 代理配置

Proxy => SSL Proxying Settings 打开代理配置
image.png
添加 Location: Host：*，Port=* ，代表抓所有包和端口，你也可以配置只抓特定域名和端口的包。
image.png

3. 安装证书

点击 Charles 界面的 Help SSL Proxying —> Install Charles Root Certificate。
image.png
点击后会弹出钥匙串应用，点击 charles 证书，在“信任” tab 下修改使用此证书时“始终信任”
image.png

4. 在手机上安装证书

点击 Charles 界面的 Help SSL Proxying —> Install Charles Root Certificate on a Mobile Device or Remote Browser。
image.png
点击之后 Charles 会提示你配置 chareles Http 代理，然后通过 chls.pro/ssl 来下载证书，这里的 IP 地址就是你的 IPV4 地址。
image.png

5. 手机连接 Charles 代理

上图中 Charles 已经告诉你你的 PC IP 地址，另一种方式是 ifconfig 命令的 eth0 地址，如下图所示，比如说我这里是 10.15.229.132 ，端口是你上面 Http 代理配置的端口，默认是 8888。
image.png
将手机连接到与 PC 同一个网络，可以是 WIFI，也可以是 PC 的热点，然后点开 WIFI 的配置，滑到底部的 HTTP 代理。
image.png

配置代理方式为“手动”，服务器为刚刚获取IP 地址，端口为上述端口，这里为 8888 ，然后点击存储。此时Charles 会给出提示。有新的连接。点击allow。
image.png

6. 手机安装 SSL 证书

手机浏览器中访问 chls.pro/ssl 下载证书文件。
image.png

在设置 => 通用 => 描述文件与设备管理中安装该证书。
image.png

在通用 => 关于本机 => 可信的证书中配置信任该证书。

image.png

连接成功，此时手机发送的内容，charles可以抓到。

参考文章