第十二、十三单元 Charles
一、抓包概述
1. 抓包概念
抓包是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，也用来检查网络安全等。下面小编就介绍几种抓包软件。
2. 常见抓包工具
Charles、fiddler、wireShark
软件名称简介独 立运行支持移动设备是否收费
Fiddler免费的HTTP查看工具，系统代理，工作在应用层是是否
CharlesHTTP代理、HTTP监控、HTTP反代理、查看HTTP通讯、查看工作信息工具是是收费版/免费版
Wireshark半免费，网络抓包、监听网卡，工作在网络接口层是否否
HttpWatch集成到IE、Chrome中的网页数据分析工具否否基础版/专业版
BurpSuiteHttp代理。是用于攻击web应用程序的集成平台，包含了许多工具：抓包、扫漏、爆破等。黑客必备工具之一是是是
测试为什么要学习Charles抓包？
能够使用Charles来分析前后端问题
能够使用Charles模拟弱网测试环境
能够使用Charles的断点构建异常的测试场景
一、Charles简介
1. 什么是Charles
Charles中文名字青花瓷，是一款Http代理服务器和Http监视器，当移动端在无线网连接中按要求设置好代理服务器，使所有对网络的请求都经过Charles客户端来转发时，Charles可以监控这个客户端各个程序所有连接互联网的Http通信。
特点：跨平台、半免费
免费版本：一是启动等待十秒才能启动，二是半小时重启一次
2. Charles工作原理
2.1 原理
截获真实客户端的HTTPS请求，伪装客户端向真实服务端发送HTTPS请求
接受真实服务器响应，用Charles自己的证书伪装服务端向真实客户端发送数据内容
2.2 原理图
Charles原理图.png
2.3 原理案例
租房子 房客 中介 房东
前置步骤：
（1）需要运行Charles并配置代理
（2）在客户端上面需要配置代理
步骤：
（1）有客户端发送请求
（2）Charles接受再发送给服务端
（3）服务端返回请求结果给Charles
（4）由Charles转发给客户端
3. Charles主要功能
支持HTTP/HTTPS代理
支持流量控制
支持接口并发请求
支持重发网络请求，方便后端调试
支持断点调试
支持修改网络请求参数
支持网络请求的截获并动态修改
支持模拟慢速网络
4. Charles优点（相对Fiddler）
Charles能够支持Linux、macOS，fiddler不支持
Charles支持按域名和按接口查看报文，简洁明了
Charles支持反向代理，fiddler不支持
Charles网络限速可选择网络类型，选择3G、4G、5G等
Charles可以解析AMF协议，一般用不到
二 、安装与配置
1. Charles安装
官网下载：官网
image.png
双击，下一步即可
image.png
2. Charles组件介绍
image.png
image.png
校验是否符合w3c标准。
image.png
请求数据栏.png
3. Charles设置
3.1 代理设置
image.png
image.png
3.2 Charles访问控制
image.png
image.png
4. 客户端设置
4.1 Windows代理设置
image.png
4.2 Android手机代理设置（见3.1）
三、实战
3.1 抓取移动设备发送的Http请求
先将移动设备连接到Charles客户端。首先在电脑中输入cmd打开命令行窗口，输入ipconfig查看本机连接无线网络的IP地址，这个地址作为移动设备连接Charles客户端的代理地址
image.png
打开Charles客户端，点击Proxy->Proxy Settings菜单，可以设置移动设备连接到Charles的端口（8888），这样移动设备代理配置需要的ip地址和端口号都有了。
image.png
打开手机wifi，设置所连接的wifi的代理网络；wifi代理设置为手动，代理的服务器ip填写上一步骤中查看到的电脑ip，端口填写上一步骤提到的charles的服务端口：
image.png
image.png
注意：
①移动设备配置之后，第一次通过手机访问手机中的发送请求时，Charles会弹出提示框，提示有设备尝试连接到Charles，是否允许，如果不允许的话，手机发送请求失败，点击Allow允许，这样这个设备的IP地址就会添加到允许列表中，如果错误点击了Deny可以重启Charles会再此提示，或者通过Proxy->Access Control Settings手动添加地址，如果不想每个设备连接Charles都要点击允许的话，可以添加0.0.0.0/0允许所有设备连接到Charles。
②手机与电脑必须连接同一个WiFi
③不要勾选Proxy → SSL Proxying setting 中的Enable SSL Proxying
④Charles是通过将自己设置成代理服务器来完成抓包的，勾选系统代理后，本地系统（如果通过浏览器发送请求）发送出去的请求都能被截取下来。因此，如果想只抓取手机APP发送的请求的话，可以不勾选WindowsProxy选项，这样在测试时就不会被本机Http请求所干扰。
image.png
⑤如果想要抓取浏览器发送的请求包，勾选WindowsProxy选项之后还是抓取失败，可能是浏览器没有设置成使用系统的代理服务器，只要设置成使用系统的代理服务器，或者将浏览器的代理服务器设置成127.0.0.1:8888也可以成功。
启动手机，打开软件，就可以进行联网抓包测试
Charles提供两种查看封包的页签，一个是Structure（结构），另一个是Sequence（序列），Structure用来将访问请求按访问的域名分类，Sequence用来将请求按访问的时间排序。任何程序都可以在Charles中的Structure窗口中看到访问的域名。
image.png
四、证书安装
1. 为什么要安装证书
我们以前抓包都是抓取的是HTTP的请求，如果抓取HTTPS就会乱码，并不是没有抓取到，见下图：
image.png
怎么解决呢？安装证书
2. Windows证书安装
image.png
image.png
image.png
image.png
image.png
image.png
image.png
3. Charles证书导出
1、打开charles
2、选择help-ssl proxying
3、save
4、选择存放路径以及证书名
4. charls证书导入
IE浏览器：设置 → Internet选项 → 内容 → 证书 → 导入 → 下一步 → 选择证书 → 选择所有证书都放入下列存储(P) → 浏览，选择“受信任的根证书颁发机构” → 下一步 → 完成。
chrome浏览器：设置 → 管理证书（安全） → 导入 → 下一步 → 选择证书 → 选择所有证书都放入下列存储(P) → 浏览，选择“受信任的根证书颁发机构” → 下一步 → 完成。
5. Chales HTTPS代理配置
证书安装之后发现还是乱码和unknown，需要配置代理
image.png
image.png
五、Charles常用功能
1. 过滤不必要的网络包
在抓取手机发送的请求时，有许多请求包是对图片等不需要关注的资源的请求，我们只想对指定目录服务器上发送的请求进行抓取，这时候就可以通过过滤网络包的方式实现。有两种实现方式：
1）选择Proxy->Recording Settings菜单，然后在include栏添加需要抓取包的指定服务器请求协议、地址、端口号，也可以在exclude栏添加不抓取包的地址。
image.png
image.png
include：能抓取到的
exclude：不能抓取到的
2）在主界面的中部的 Filter 栏中填入需要过滤出来的关键字。例如我们的服务器的地址是：http://blog.csdn.net, 那么只需要在 Filter 栏中填入 csdn 即可。
注意：通常情况下，我们使用方法一做一些临时性的封包过滤，使用方法二做一些经常性的封包过滤。
2. 断点替换/修改数据
2.1. 断点的作用：用来构建异常的测试场景
2.2. 步骤：
方式一：
右击接口链接，选择“BreakPoints”
image.png
在浏览器刷新对应接口的页面
此时会自动跳转到Charles并显示出接口请求信息
点击“Edit Request”，修改请求信息，点击“Execute”
image.png
点击“Edit Response”
在数据格式兰中选择合适的显示格式，比如“json”
修改对应的数据，点击“Execute”
回到浏览器查看数据应该为修改之后的response的信息
方式二：
Proxy → Breakpoint settings...中手动新建/启用某个断点;
要求勾选enable breakpoints之后当下次再有该请求时,会自动进入断点模式
image.png
image.png
新建断点
image.png
3. 模拟慢网速
为什么要做模拟慢网速
不是所有的地方网络都好，所以要模拟慢网速。主要用在App端，因为PC一般都是宽带联网，而App哪里都有可能去。比如，测试上厕所
image.png
4. 压测服务器
依次点击tools—Repeat Advanced
选择好并发线程数和打压次数，点击ok就能进行对产品的GET和POST请求进行测试服务器并发处理的性能，当然这里只是简单的进行压测，并且只能对Charles抓到的http协议的请求进行重复并发，缺点就是如TCP类的抓不到的就不能了，算是个小小的缺陷吧。
image.png
5 . 模拟404
1、tools——>blacklist
image.png
2、 允许启用黑名单功能，选择接口返回错误的形式（404 或者403），添加接口地址并保存
image.png
【blocking connection】 选项可以选择“drop connection”或者 “403 respose”.前者接口会直接返回404错误，后者接口返回403错误
3、 选中需要返回404/403的接口,点击【ok】
