【网络工具】Charles 实战（上）

✍个人博客：Pandaconda-CSDN博客
📣专栏地址：http://t.csdnimg.cn/iAmAo
📚专栏简介：在这个专栏中，我将会整理一些工作或学习中用到的工具介绍给大家~

 📘Charles 系列文章：

• 【网络工具】Charles 介绍及环境配置
• 【网络工具】Charles 实战（上）
• 【网络工具】Charles 实战（下）

❤️如果有收获的话，欢迎点赞👍收藏📁，您的支持就是我创作的最大动力💪

 1. 抓包问题分析

问题背景：

在一个平台页面上，输入过长信息会报错，同时报错信息也弹出了多次，因此需要分析这两个问题的源头：

1. 输入过长信息报错

2. 报错信息弹出多次

  

具体步骤：

1. 配置本地「Charles」代理。

2. 配置「客户端」代理。

3. 当 Charles 在运行时，复现上述问题场景。

4. 在 Charles 上查看抓包信息。

分析结果：

1. 查看响应报文，可知该接口功能是正常运行，而返回的 message 显示系统繁忙，因此可以判断是「后台」返回的错误信息。

2. 响应报文只显示了一条错误，而前端页面显示了多条，因此可以判断是「前端」的错误。

2. HTTPS 抓包

问题背景：

如果不下载证书，直接用 Charles 对 HTTPS 网站进行抓包，则会出现乱码。

解决方法：

需要安装 SSL 证书。

2.1 Windows 证书配置

具体步骤：

1. 打开 Charles，选择 "Help" -> "SSL Proxying" -> "Install Charles Root Certificate"。

2. 在打开的证书框中，点击 "安装证书"，选择 "本地计算机"，点击 "下一步"。

3. 选择 "将所有证书都存放在下列存储"，再点击 "预览"。

4. 选择 "受信任的根证书颁发机构"，点击 "确定" -> "下一步" -> "完成"。

2.2 Charles Https 代理配置

具体步骤：

1. 在 Charles 窗口中点击菜单 "Proxy" -> "SSL Proxying Setting"。

2. 在打开的设置窗口中勾选 "Enable SSL Proxying"。

3. 如果没有下图中 *:443，则点击 "Add" 进行添加。

4. 最后点击 "OK"。

2.3 MacOS 证书配置

具体步骤：

1. 打开 Charles，选择 "Help" -> "SSL Proxy" -> "Install Charles Root Certificate"。

2. 在打开的钥匙串访问页面中的 "登录" 下，找到 "Chrles Proxy CA" 并双击它（刚下载完时，下图的 CA 证书图像右下角显示的是红叉）。

3. 点开 "信任" 选项，将 "使用此证书时" 右边的选项修改成 "始终信任"。

4. 输入电脑密码，授权该操作。

2.4 IOS 证书配置

具体步骤：

3. 过滤与屏蔽功能

3.1 过滤

方法一：

在主界面底部的 Filter 栏中填入需要过滤出来的关键字。

方法二：

点击菜单中 "Proxy" -> "Recording Setting"，然后填充协议、主机地址、端口号、路径等信息。再次请求时会只抓/不抓设置俄请求。

方法三：

右键点击想过滤的网络请求，然后点击 "Focus"，选中的请求展现在最上面，其余的请求合并在下面的文件里。

3.2 屏蔽

方法一：白名单

1. 选中请求 -> 右键 -> 选中 Allow List。

2. Tools -> Allow List -> 勾选 Enable Allow List -> 点击 add 打开设置框，具体设置如下：需填协议、主机地址、端口号、路径等。

方法二：黑名单

1. 选中请求 -> 右键 -> 选中 Block List。

2. Tools -> 选择 Block List -> 勾选 Enable Block List -> 点击 add 打开设框，具体设置如下：需填协议 (不选代表 HTTP 和 HTTPS 均可)、主机地址、端口号、路径等。还可以设置 block 表现，是 drop 还是 403。