Charles抓包

一、抓包介绍

抓包：使用工具抓取客户端与服务器之间交互的数据包

数据包：客户端与服务器相互交互的内容。

应用场景：

• 抓包并定位前后端bug（重点掌握这个）
• 模拟弱网测试
• 绕过界面（拦截请求修改），模拟测试后台接口

抓包工具Charles和Fiddler区别：

• 支持的操作系统比较多：Windows、macOS、Linux
• Charles收费（免费试用时间30天）

• 如何区分前后端bug?
  • 如果抓不到请求或请求有误是前端问题;
  • 如果有请求且正确但是没响应或者响应错误，那就是后端的问题;
  • 如果抓包有请求也有响应且都正确，但是页面显示还是报错了，则还是前端问题(页面渲染)

二、抓包工具Charles

1.1 抓取HTTPS的数据包设置

1. 网络设置–设置【Firefox为例】
2. Charles设置代理Proxy -- Proxying Settings

1.2 抓包步骤

抓包步骤：
- 打开Charles工具，开启代理设置（Proxy Settings...）
- 打开默认浏览器(浏览器也需要设置代理)，输入待抓包的地址，回车/刷新
- 查看会话列表抓取到的数据包（按照域名找到对应的数据包）

• 开启代理（Proxy --> Proxy setting--> enable transparent HTTP proxying）

• 抓取对应数据包通过工具栏，清除工具，清除会话信息之后再操作浏览器抓取新包
  • 抓取线上tpshop首页数据包并过滤

1.3 应用场景介绍

1.3.1 定位前后端bug

能够根据抓包工具定位前后端bug

面试：如何定位前后端bug？

• 案例问题分析# tpshop后台新增会员成功后，详情中显示的性别和前端页面显示的性别不一致，该问题是前端还是后端的问题？
  — 不确定提交bug给前端开发还是后端开发
  # 通过抓包去定位，怎么抓包？
  1.浏览器输入访问服务器地址，回车发送请求，查看抓包工具中是否有数据包
  2.确定需要抓取哪个页面的数据包【上述问题的数据源于登录成功的接口响应–> 个人信息】
  3.抓取登录成功的数据包【进入登录页面，Charles中清空其他数据包，直接登录成功操作】
  4.进入Charles查看当前服务器地址下面的第一个/第二个数据包基本就是登录的数据包
  5.进一步查看数据包中请求体数据是否是页面输入的数据，如果是那就是登录的数据包
  6.看响应体的数据，从中获取与性别有关的字段值【需要对比数据库看是否和数据库存储的一致，（当前已经确认性别和后端页面显示一致）】
  结论：请求数据正确（请求发送的和页面一致）、响应数据正确（后台响应的和数据库一致）、但是最终前端页面显示还是错误–>前端bug
  • 数据库截图+抓包响应截图

• 定位思路
  ①确认请求是否有问题，请求有问题–>前端
  ②确认响应是否有问题，响应有问题–>后端
  如何确定响应的问题？ – 返回的数据和数据库是否一致，一致响应没问题，不一致响应有问题
  ③请求响应都没有问题，但页面显示错–>前端

1.3.2 弱网设置

弱网延时和带宽设置–> 模拟不同网络

• 使用fiddler时可以计算延迟时间（1KB或者1MB）
• Charles设置弱网操作界面

• 具体模拟测试步骤
  • 不开启弱网，用正常网络访问页面，抓取对应数据包查看传输时间【Duration】
  • 设置好弱网参数后，开启弱网，再次访问上述同一页面，抓取对应数据包查看传输时间
  • 对比两次访问的【Duration】时间变化，弱网情况下有延迟，且页面不能出现崩溃。

1.3.3 绕过界面做服务端测试

场景：页面部分异常数据，在前端做限制了，无法测试，可以绕过界面做接口验证测试。

• 项目案例例如：
  1.注册登录中如果手机号超过11位长度测试，如果超过11位，页面可能无法输入测试，可以绕过界面测试
  2.购物车商品数量有上限200的限制，页面无法输入201，可以绕过页面做接口结果测试
  • 拦截请求：测试后台接口【后台逻辑正确】
  • 拦截响应：测试页面显示【变形、报错】
• 操作步骤