HOW - Charles 抓包工具

一、介绍

1.1 Web调试代理工具

Charles 是一个强大的Web调试代理工具，广泛用于捕获和分析HTTP/HTTPS网络流量。它可以帮助开发人员和测试人员诊断和解决网络通信中的问题。

Charles 提供了一个用户友好的界面，使得对网络请求和响应的监控、修改和调试变得更加直观和便捷。

1.2 主要功能

1. HTTP/HTTPS 抓包：Charles 可以捕获所有通过代理的HTTP和HTTPS请求和响应，包括头信息、内容和cookies。
2. 请求和响应修改：允许用户修改请求和响应数据，用于测试和调试不同的场景。
3. 带宽模拟：可以模拟不同的网络带宽情况，如2G、3G、4G网络，以测试应用程序在不同网络环境下的表现。
4. 重放请求：能够重放特定的请求，方便调试和复现问题。
5. SSL代理：支持HTTPS流量的解密和查看，便于调试加密的网络通信。
6. 断点调试：在请求或响应达到代理时设置断点，允许用户在请求发送或响应返回前进行修改。
7. AJAX调试：特别适用于调试AJAX请求，能够显示所有的后台请求及其响应。
8. 导出和导入会话：可以保存抓取的会话数据并导出为各种格式，以便稍后查看或共享。
9. 支持多种平台：Charles 可在Windows、macOS 和 Linux 上运行。

1.3 和 Fiddler 的区别

1. 都是抓包工具，提供的功能基本相同
2. Fiddler 免费，Charles 收费。后者有免费试用天数，试用期过后，未付费用户仍可以继续使用，但每次使用时间不能超过免费试用时长
3. Charles 在 Mac 上比较常用，提供了比较好的支持

二、如何使用 Charles

1. 下载和安装

可以从Charles官方主页下载Charles的安装包，然后根据操作系统进行安装。

2. 主界面介绍

主界面包括：

1. 工具导航栏
2. 视图模式选择：structure 和 sequence
3. 捕获到的请求列表面板
4. 捕获到的请求内容详情面板

工具栏介绍：

自左到右依次为：

1. 清除捕获到的请求
2. 红点状态说明正在捕获请求，灰色反之
3. 点亮状态说明说明开始捕获 SSL 请求，灰色反之
4. 灰色状态说明没有开启弱网模式，绿色反之
5. 灰色说明没有开启断点，红色反之
6. 编辑修改请求，点击后可以修改请求的内容
7. 重复发送请求，点击后选中的请求会被再次发送
8. 验证选中的请求的响应
9. 常用功能。包含Tools菜单中的常用功能
10. 常用设置。包含Proxy菜单中的常用设置

3. 配置代理

安装完成后，启动Charles，它会自动配置为系统的代理服务器。

如果需要手动配置，可以在网络设置中将代理服务器设置为localhost，端口通常是8888。

注意，在应用菜单栏 Proxy 中需要勾选 macOS Proxy/Windows Proxy。

4. 捕获HTTP/HTTPS流量

打开Charles后，它会自动开始捕获流量。你可以在Charles的界面中查看所有通过代理的HTTP和HTTPS请求和响应。

5. 配置SSL代理

大部分网站都使用的 https 请求，所以在一开始我们抓取到的https请求会展示 <unknown>

为了捕获和解密HTTPS流量，你需要配置Charles的SSL代理。具体步骤如下：

1. 在Charles中，选择Proxy -> SSL Proxying -> Install Charles Root Certificate。
2. 安装Charles的根证书。在macOS上，证书会被安装到系统的钥匙串中；在Windows上，证书会被安装到受信任的根证书颁发机构中。
3. 在Charles中，选择Proxy -> SSL Proxying -> SSL Proxying Settings，在窗口勾选 Enable SSL Proxying。
4. 配置Charles为特定域启用SSL代理。选择Proxy -> SSL Proxying -> SSL Proxying Settings，然后在 include 中添加你需要监控的域（例如*.csdnimg.cn）。
   
5. 最后选择指定域右键选择 Enable SSL Proxying 后，刷新网页即可看到内容。

6. 分析和修改请求/响应

你可以在Charles中查看每个请求和响应的详细信息，包括头信息、参数和响应体。双击某个请求可以展开详细视图。在详细视图中，你可以：

• 查看请求/响应的各个部分（如头、查询参数、表单数据等）。
• 修改请求或响应的数据。
• 重发请求。
• 设置断点，在请求或响应发送前进行修改。

7. 模拟带宽

选择Proxy -> Throttle Settings，可以设置不同的带宽限制，模拟慢速网络环境。可以选择预定义的配置（如3G、4G）或自定义带宽限制。

8. 导出和导入会话

你可以导出捕获的会话数据供以后使用，或导入以前的会话数据进行分析。选择File -> Export Sessions 或 Import Sessions。

三、示例使用场景

1. 调试移动应用：通过将手机的网络代理设置为Charles的代理地址，可以捕获手机应用的HTTP/HTTPS请求，用于调试移动应用的网络问题。
2. API测试：捕获并查看API请求和响应，方便开发人员调试API问题。
3. 网站调试：分析网页的加载时间、网络请求，找出性能瓶颈。
4. 安全测试：分析请求和响应，发现潜在的安全问题，如不安全的cookie、泄露的敏感信息等。
5. …

Charles 是一个功能强大且用户友好的工具，在Web开发、测试和安全审计中具有广泛的应用。通过熟练使用Charles，可以极大地提高网络问题的诊断和解决效率。

3.1 调试移动应用（重要）

Charles 更常用来截取手机端的网络请求。

1. 在菜单栏中，选择Proxy -> Proxy Proxying，在窗口中设置端口号，默认为 8888. 如无占用可不用修改，并勾选下方两个单选框。

2. 在菜单栏中，选择Help -> Local IP Adress，即可查看本机 IP 地址，当然也可以用 ipconfig 命令进行查看。

3. 移动端需要和电脑在同一局域网内。在手机上选择无线网络选项，并进行网络设置，需要找到 代理 选项，类型选择 手动，服务器主机名填写前面获取的 ip，服务器端口填写前面获取的 8888.

注意，公司网络一般电脑的 ip 地址每天都可能发生变化。

4. 在手机上打开浏览器，访问网站，Charles 会弹出手机端请求连接的确认菜单，点击 Allow 即可。

5. 对于 https 请求，需要额外进行手机端证书的配置。在菜单栏选择Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device or Remote Browser，在弹出的窗口中有说明如何安装手机端证书。

3.2 修改网络请求及返回结果

1. 断点设置

该功能适合做一些临时性的修改。

常用场景：

1. 测试客户端对于请求超时情况的处理：在断点页面停留超过超时时间
2. 简单的接口入参测试：在断点中修改、删除、新增请求参数等，然后看接口返回是否正常
3. 修改返回值，验证对客户端的影响

设置断点需要 Breakpoint Settings 和 Enable/Disable Breakpoints 配合使用，在 Enable Breakpoints 状态下，可以通过 Breakpoint Settings 配置 Charles 的断点模式。

具体来说：

1. 在请求列表中找到需要断点的请求，鼠标右键选择 Breakpoints 即可设置一个断点
2. 设置断点完毕后，可以选择对 Request 或 Response 进行断点，默认两个都选择。
3. 刷新页面，重新发起该请求，此时会自动进入断点模式
4. 在断点模式下，可以对请求参数或返回参数进行修改
5. 修改完毕后，点击 Execute 执行，继续走请求
6. 若点击 Abort，断点执行失败
7. 若点击 Cancel，取消本次断点

需要注意：

1. 如果请求参数是不固定的，比如请求中有签名、时间戳等信息，那么设置完毕后，需要在 Proxy -> Breakpoints Settings 中对已设置的断点进行一些额外修改，清除已设置断点的 Query 参数。

2. 许多 App 有超时设置，比如 30s 无返回则认为响应超时。因此在操作断点时应尽可能少量、快速的进行修改。当然，该场景也可以用来验证客户端对于请求超时情况的处理。

2. Map 功能

有 Map Local 和 Map Remote 两种方式，该功能适合长期的将某一些请求重定向到本地文件或另一个网络地址。

Map Local（重要）

Map Local 可以使用本地文件，模拟远程返回的内容。使用 Map Local 可以大大加快开发和测试速度。

常用场景：

1. 测试返回内容比较复杂场景
2. 测试返回值不好构造的场景。比如返回某个参数不存在、返回为空、返回数据类型不符合预期
3. 测试极端返回结果对app的影响。比如某个内容过长是否在客户端展示正常

具体来说：

1. 在本地按照返回结果的格式新建一个文件并写入模拟的返回内容，一般是json
2. 在Charles中选择Tools->Map Local，在弹出页面中勾选 Enable Map Local，并添加相应的请求路径，选择刚才创建的本地文件，然后点击 OK
3. 另外也可以直接在请求列表中找到对应请求，右键选择 Map Local 直接添加。但需要注意，如果请求参数是不固定的，依旧要在设置中请求 Query 参数
4. 设置完毕后，在客户端重新发起请求，此时返回的内容就是读取的本地文件

Map Remote

通过 Map Local 工具可以根据配置的映射更改请求站点，以便从新站点透明地提供响应，就好像原始请求一样。

常用场景：

1. 客户端和服务器开发联调使用，可重定向到服务器开发本地地址
2. 测试客户端在返回异常Code（如500、502）情况下的表现，这个非常常用

具体来说：

1. 在Charles中选择Tools->Map Remote，在弹出页面中勾选 Enable Map Remote，并添加相应的请求路径和重定向路径
   
2. 另外也可以直接在请求列表中找到对应请求，右键选择 Map Remote 直接添加。但需要注意，如果请求参数是不固定的，依旧要在设置中请求 Query 参数
3. 设置完毕后，在客户端重新发起请求，此时请求会重定向指定路径

3.3 模拟慢速网络（重要）

在做移动开发时，经常需要模拟慢速网络或高延迟网络。

Charles提供了很好的支持：Throttle Setting 和 Start/Stop Throttling。在 Start Throttling 状态下，可以通过 Throttle Setting 配置各种网络状态。

具体来说：

1. 在Charles中选择Proxy->Throttle Setting，在弹出的页面中勾选 Enable Throttling，添加、删除、修改需要节流的请求，若无特别请求一般使用 *，即全部请求都走节流，若要对特定单一请求，可勾选 Only for selected hosts

2. 通过上图弹窗，还可以选择 Throttle preset

比浏览器 DevTools 更丰富。

3. 另外，还可以配置 Bandwidth 带宽、Utilisation 利用百分比、Round-trip latency 往返延迟、MTU 字节等。
4. 设置完毕后，在客户端重新发起请求，此时请求响应速度会变慢

3.4 压力测试

该功能一般基于 Repeat 用来简单测试服务器的并发处理能力。

具体来说：

1. 在抓取的请求列表中，对特定请求右键选择 Repeat Advanced...，在弹出的窗口中，可填写需要并发线程数以及压力次数
2. 点击 OK 即可

四、小技巧

1. 电脑或手机设置代理后，Charles 会抓取到非常多的请求，我们找到想要的请求比较不方便，此时可以在请求列表中找到常用的域名，右键选择 “Focus”，未被 Focus 的域名会被收起来，放在一个 Other hosts 的文件夹下。