Charles基础使用与实战

学习笔记
1

一、Charles

1.1 简介

  • Charles是一款跨平台的代理工具。Mac、Window、Linux都可以使用。

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

image
image1296×594 78.4 KB

1.2 主要功能

  • 支持SSL代理，也称为HTTPS代理，是一种通过SSL协议来处理客户端与目标服务器之间的数据传输的代理服务器；

  • 支持流量控制，是一种网络管理技术，用于优化网络性能、保证服务质量，并防止网络堵塞；

  • 支持重发网络请求，方便后端调试；

  • 支持修改网络请求参数；

  • 支持网络请求的截获，并动态修改；

  • 支持自动将json或xml数据格式化，方便查看。

1.3 基本使用

1.3.1 安装

1.3.2 界面介绍

image
image1920×1114 283 KB

  • 菜单栏：
    image
    image1473×828 49.7 KB

    • File：session相关操作。

    • Edit：基础复制粘贴之类的操作。

    • View：选择要查看的界面。

    • Proxy：

      • 抓包：recording
      • 抓 https 包：ssl proxying
      • 网络限速：throttling
      • 断点：breakpoint
      • 系统代理功能：macOS/Windows

    • tools

      • map remote：请求转发，修改相应；
      • map local：请求映射至本地数据；
      • rewrite：重写修改请求与相应。
  • 主导航栏：
    image
    image1048×748 116 KB

    • 左侧：

      image
      image1471×789 63.5 KB

      • Structure：视图将网络请求按访问的域名分类。
      • Sequence：视图将网络请求按访问的时间排序。

    • 右侧：展示某一接口的请求内容，可以切换导航栏查看请求的各种详细情况。

      image
      image1473×828 70.4 KB

      • Overview：会展示该请求的一个大体情况，如请求头、请求响应结束时间、请求开始时间，以及用户的notes等。
      • Content：如上图所示，该请求的具体内容和服务器的响应内容（配合下面的导航栏查看具体内容header，cookies，选择呈现方式form,raw）。
      • Summary：也是展示一个该请求的大体资源分布情况。例如：服务响应时间、host是什么等等。
      • Chart：以表格形式告诉我们一个响应时间的分布情况。
      • Notes：可以对请求记录一些笔记，方便后续查看用途。

1.3.2 证书配置

1. 基础设置

image
image1178×1018 67 KB

2. 证书安装
（1）电脑证书配置

image
image1626×412 80.2 KB

（2）Mac系统安装证书
image

  • Help → SSL Proxying → Install Charles Root Certificate；
  • 进入钥匙串；
  • 信任证书（注意：选择始终信任）。
    （3）Windows系统安装证书
  • Help → SSL Proxying → Install Charles Root Certificate；
  • 进入证书导入向导，点击安装证书；
  • 选择本地计算机，点击下一步按钮；
    image
    image1047×745 54.7 KB
  • 将所有的证书都放入下列存储，点击浏览按钮；
  • 点击受信任的根证书颁发机构，点击确定按钮；
    image
  • 一直点击下一步；
  • 出现安全警告时点击是；
  • 显示导入成功。

3. Charles端设置SSL
Proxy → SSL Proxying Settings。

image
image865×463 85.6 KB

4. 移动端代理配置（真机）

  • 设备和电脑处于同一 WIFI（模拟器不需要配置）；
  • 进入 Proxy → Proxy Setting，勾选 Enalbe transparent HTTP proxying（可以抓取移动设备的数据包）；
    image
  • 查看代理 IP 地址与端口；
    image
    image1598×804 206 KB

5. 移动端代理配置（MuMu模拟器）

  • 进入 mumu 的网络设置：

    • 设置 – 网络；
    • 长按 连接的网络弹出窗口；
    • 修改网络；
      image
      image

  • 设置好之后，在上方更多中选择保存：

    • 安装证书：chls.pro/ssl；
      • 在系统浏览器中输入这个网址，就可以自动下载 charles 证书，然后点击下载好的证书就可以直接安装了。
    • 允许远程代理。

  • 在 charles 中出现的弹窗中，点击 allow，这样 charles 代理就设置成功了。
    image

6. iOS系统配置代理

  • 进入设置，配置代理：
    • 设置 → 网络 → 配置代理 → 手动；
    • 服务器：电脑 IP；
    • 端口：Charles 监听端口（默认 8888）。
  • 下载证书：chls.pro/ssl
    • 在系统浏览器中输入这个网址，就可以自动下载 charles 证书。
      image
  • 安装证书：
    • 通用 → VPN 与设备管理 → 选择 Charles Proxy CA → 点击安装。
      image
  • 信任证书：
    • 通用 → 关于本机 → 证书信任设置 → 打开 Charles Proxy CA 开关。
      image
  • 允许远程代理：
    • 在 charles 中出现的弹窗中，点击 allow，这样 charles 代理就设置成功了。
      image

7. 注意事项

  • Android 6 以上的系统 app 默认不信任抓包证书；

    • 需要开发修改代码；
    • 大部分测试 app 安装包默认打开状态；

  • iPhone 10 系统以上需要在 设置 → 通用 → 关于本机 → 证书信任设置 中打开信任开关。

二、抓包实战

2.1 需求说明

  • 使用Charles工具完成抓包与基础功能使用。

2.2 实战思路

image

2.3 抓包原理

image
image942×327 43 KB

  • 在没有代理工具时，客户端会直接向服务端发起请求，然后服务端会把响应数据返回给客户端，从而完成客户端与服务端之间的数据传输。

  • 使用Charles之后，在客户端与服务器之间加了中间人。有了这个中间人，从客户端发出的请求不会直接到服务端，而是先发到Charles上，然后Charles再转发到服务端。同样的，服务端的请求也不会直接发给客户端，而是先发给Charles，再由Charles发给客户端。

2.4 常用应用场景

  1. 移动端接口测试
  • 查看接口数据：看发送请求的url，携带的参数是否正确；
  • 分析bug：遇到页面展示错误的问题，看接口请求数据是否正确，返回的数据是否正确。
  1. 解决接口测试过程中，检查传参错误的问题

  • 在接口测试过程中，经常会遇到通过前端界面发送的请求就可以成功，但是脚本或其他工具（如Postman）发送的请求就会失败。

  • 其实大部分是因为发请求时缺少了必要的参数。那服务端在接受请求时会做一些校验，比如验证一些头信息user-agent 、host地址或者cookie等是否符合要求。

  • 这种情况下，前端页面可以正常发送请求，通过工具会失败，很有可能是前端自动加上了一些符合要求的请求头信息，而自己发送时遗漏了，所以会失败。

  1. mock测试

  • 测试过程中，对于一些不容易构造或获取的对象，用一个虚拟的对象来替代它，来达到相同的效果，这个虚拟的对象就是mock。

  • 通过代理工具可以完成数据的篡改和构造。

  1. 接口抓包分析实战
    image
    image2242×1666 330 KB

    （1）过滤

（2） 重发

（3） 修改请求

（4） 断点（BreakPoint）

  • 调整接口的参数信息
  • 鼠标右键 – Breakpoint
    • Proxy – Breakpoint settings 设置断点
    • 确定接口信息，确定是请求断点还是响应断点
    • 重新发送请求 – 进入断点修改状态 – 修改内容 – 点击 Excute
      image
      image1976×682 101 KB

三、弱网测试

3.1 简介

  • 网络的形态非常多变，不光有 2G, 3G，4G，不同的制式、不同的速率，让我们移动应用运行的场景更加丰富。而且移动产品使用场景非常多变，如近地铁，上公交，进电梯，进山区等是的弱网测试显得尤为重要。

  • 对于弱网的数据定义，不同的应用所界定的含义不完全一样。不仅要考虑各类型网络最低速率，还要结合业务场景和应用类型去划分。

  • 按照移动的特性来说，一般应用低于 3G 的可以划分为弱网。除此之外，弱信号的 Wifi 通常也可以纳入到弱网测试场景中。弱网测试作为健壮性测试的重要部分，对于移动端的测试来说必不可少。

  • 弱网测试主要进行特殊网络状态下的功能测试，同时关注用户体验。

3.2 使用Charles完成弱网测试

    1. 在Proxy → Throttle Setting，选择Enable Throttling，在Throttle Preset下选中网络类型。
    • 常见网络类型模拟
    • 带宽
    • 丢包
    • 延迟

image

    1. 基础模拟

    • 点击小乌龟

    • 刷新页面

    • 打开Charles的overview查看响应时间

    1. 定制弱网参数

    • 打开 throttle settings。

    • 勾选 enable，打开弱网配置：

      • 可以对指定的域名进行配置，如果不设置就是对所有的域名都起效。

    • Throttle preset：可以选择不同的预设进行模拟。

    • 自定义参数：

      • Bandwidth：带宽
      • download：下载速度
      • upload：上传速度

    • Utilisation：可用率(%)

    • Round-trip latency：往返延迟(Ms)

    • MTU：最大传输单位(字节)

    • Reliability：可靠性(%)

    • Stability：稳定性(%)

    • Unstable quaility range：不稳定质量范围(%)

image
image1125×695 118 KB