Charles抓包工具实战教程(完结)

Charles抓包工具测试实战教程

学习准备

• 有功能测试经验
  • 需求
  • 测试用例
  • 测试工具
  • 测试方法
• 熟悉接口测试
  • 接口概念
  • 接口测试

---

目标

• 能够用Charles来分析前后端的问题
• 能够用Charles模拟弱网测试环境(弱网:网络不好的情况,或者实现2g,3g情况)
• 能使用Charles的断点构建一场的测试场景(针对特殊测试场景,通过修改请求参数以及修改返回参数)

---

文章介绍

• Charles介绍
• Charles安装和配置
• Charles实战

---

Charles介绍

Charles是什么?

Charles中文名叫青花瓷是一个基于http协议的代理服务器,通过成为电脑或者浏览器的代理,然后截取请求和请求结果达到分析抓包的目的

特点:跨平台,半免费

Charles工作原理?

• 前置步骤:
  1. 需要运行Charles并配置代理
  2. 在客户端上面需要配置代理
• 步骤
  1. 有客户端发送请求
  2. Charles接收再发送给服务器
  3. 服务端返回请求结果给Charles
  4. 由Charles转发给客户端

---

Charles能做什么?

• 支持HTTP及HTTPS代理
• 支持流量控制
• 支持接口并发请求
• 支持重发网络请求
• 支持断点调试

---

Charles简介

对比fiddler

• Charles能够支持Linux, MacOs
• Charles支持按域名和按接口查看报文,简洁明了
• Charles支持反向代理
• Charles网络限速可选择网络类型
• Charles可以解析AMF协议

---

Charles安装和配置

下载地址:https://www.charlesproxy.com/

安装过程不难,要是那装不明白的话,多下载几遍qq或者微信然后安装一下就可以举一反三了

Charles组件介绍

Charles主导航栏介绍

• 清除请求数据

• 开始/取消抓包

• 开/关ssl代理

• 开启/关闭慢速网络

• 开启/关闭断点设置

• 请求数据

• 重新发送请求

• 校验返回的请求

• 工具

• 设置

• 

• 

Charles代理配置

• 首先Proxy > Proxy Settings* 点开之后默认的端口号会是8888,这里我们不做修改,但工作中如果有不同端口的话需要及时进行调整
  

Charles访问控制

• 首先点开Proxy > Access Control Settings

• 点开后
  
  这里讲解一下点击add会让你添加ip这个ip只的就是你使用设备代理到抓包电脑的的ip,一般来讲就是你需要被抓包的设备的ip
  
  当然我这里所填写的192.168.100.1就是我需要被抓包的设备ip,这里一般情况下需要保证被抓包设备已经是和您抓包的设备在同一网络内或者在您抓包设备的子网中,这里如果有不明白的话,可以去打字的看一下计算机网络相关知识.
  

  我们在上上图中会发现这样一行字,大致的意思就是

  1. 当你勾选之后您的抓包设备配置了对应的代理网络ip和端口可以对应您抓包设备的ip和您之前在proxy settings中配置的端口相同时,他会向您询问是否将新的被抓包设备ip加入到ip range中
  2. 如果您不勾选的话那么,如果您不手动添加ip的话,那么是没有办法直接允许使用代理网络的

• 当配置完对应的是没办法马上就可以进行抓包的这时候我们要进行下面的操作设置对应系统的代理才可以进行有效合理的抓包

windows代理设置

1. 在对应的浏览器中进入设置,这里推荐使用chrome,在地址栏中输入

   chrome://settings/
   

   这个地址仅限于chrome浏览器

2. 在搜索框中输入“代理”

3. 点击“打开您计算机的代理设备”

4. 在手动设置代理中开启代理

5. 在地址输入框中输入您抓包设备的IP地址以及端口

6. 点击“保存”,关闭页面

注意⚠️: 如果您的抓包设备和您被抓包的设备是同一台的win电脑的时候默认情况下,charles会默认配置好的,但是如果不是同一台win的话那么就需要一以上的操作

mac代理设置

待更新

mac快捷代理设置

待更新

ios代理设置

1. 首先打开设置
   

2. 然后打开wifi(一般情况下是wifi除非您使用了usb或者蓝牙共享网络,这种骚操作暂时不讨论)
   

3. 接下来点击已经链接上的wifi后面的小感叹号

4. 拉到最下面点击 : HTTP代理>配置代理 > 选择手动然后在下方填写,您Charles运行的设备的ip以及您proxy setting中的端口号
   

5. 完活!

andriods代理设置

同理ios

1. 首先打开设置进入wifi设置(ps:这里需要保证手机和charles设备[这里应该是你的电脑],在同一网络下)这里用的手机是vivo其他手机同理,请自行推理

   

2. 接下来点击上图中的小箭头进入下方界面, 然后选择代理 -> 手动

   

   

3. 然后去填写对应的ip和端口号吗, 这里ios也是一样的,需要填写的端口是你charles中设置的代理的端口, 而ip是需要填写您对应的charles设备的ip, 我这里使用的charles设备也就是我的电脑的ip是192.268.14.222, 所以设置如下

   

4. 然后退出您的电脑的charles中就会出现如下, 点击allow允许代理, 窗口中的192.168.14.238, 根据上图可以推理得出就是我使用的vivo手机的ip

---

Charles实战!!!

抓包问题分析

• 前端?
• 后端?

模拟具体实战问题:

假如在某一个系统中进行了点击某个按钮后返回以下两种提示信息:

1. 数据异常
2. 弹出两次数据异常

实施的具体步骤首先: Charles代理配置>客户端代理配置>操作客户端软件>分析请求数据

使用抓包工具,根据请求数据来判断是否为前端还是后端问题…此处详解等待本周休息日我写一个模拟案例之后截图进行讲解

https抓包

• 首先判断Charles是否可以进行https抓包

  1. 我们打开https://azang.blog.csdn.net
     

  2. 这里说明我们是可以抓到https的报文的,但是因为「粗浅的解释:HTTP是超文本传输协议，信息是明文传输，HTTPS是具有安全性的SSL加密传输协议,所以HTTPS被报文被进行了加密」,所以对于Charles需要进行的一定的配置. 这里的解决方案就是安装SSL证书

Windows证书配置

1. 打开Charles,选择“help” -> “SSL Proxying” -> “install Charles Root Certificate”
2. 在打开的证书框中, 点击“安装证书”, 选择“本地计算机”, 点击”下一步“
3. 选择“将所有证书都存放下列储存”, 再点击“浏览”
4. 选择“收信任的根证书颁发机构”, 点击“确定” -> “下一步” -> “完成”

MacOS证书配置

1. 打开Charles,选择“Help” -> “SSL Proxy” -> “Install Charles Root Certificate”
   
2. 出现一个弹窗选择登陆然后添加
   
3. 然后会有一个钥匙串访问在登录中找到对应证书,然后将使用此证书时选择始终信任

4. 点击关闭窗口它会让输入密码,然后输入您的密码点击更新设置
   
5. 这时候我们可以看见证书的状态发生了改变变成了加号
   

Charles Https代理配置

1. 在Charles窗口中点击菜单“proxy” -> “SSL proxying setting”
   

2. 在打开的设置窗口中勾选“Enable SSL Proxying”,如果include中没有值的话
   
   点击add,下图中的host里面填写*表示所有的,如果您只需要特定的话填写特定的域名或者ip

   port是端口号,https默认的端口号是443
   

3. 点击“OK”

4. 我们重新打开网站https://azang.blog.csdn.net会发现我们可以得到报文了
   

IOS证书配置

1. 在电脑上运行Charles,并且IOS手机设置好代理,在浏览器中地址栏输入:
   http://charlesproxy.com/getssl
   
   

2. 然后进入设置点击下载描述文件
   

3. 点击安装
   
   

4. 返回“通用”页面选择“关于本机”
   

5. 点击“证书信任设置”,启用Charles Proxy CA证书并确认
   

安卓(andriods)配置ssl证书

1. 首先Charles -> help中下载ssl证书

   

2. 然后传送到手机上接下来在手机上进行安装证书的操作

3. 首先打开设置搜索证书, 且点击WlAN证书(这里使用的是vivo其他手机自行推理)

   

4. 然后点击WLAN证书

   

5. 接下来需要在你手机存储空间中找到对应的证书文件然后选择

   

6. 然后编辑一个你可以记住的证书名称. 这里最主要还是示范演示写随便写了一个c

7. 点击确定之后会提示你安装完成, 这里再去charles看https的请求的话那么就会发现内容不在是密文了

   不过同时一些细心的xdm也会发现有一部分的https请求,如果开了https代理甚至是无法通过的, 比如vivo手机中的对于你vivo.com.cn域名的请求就是无法通过的, 这里就是因为厂家的内部设置了, 暂时我也没有找到解决的方案, 如果有人找到方案的话可以评论区留言

处理安卓(andriod)手机部分APP可能使用了flutter等框架导致http/https请求无法抓取

在实际情况下, 以及现在各种框架百花齐放的. 有很多框架会因为安全考量去检测本机是否使用了wifi代理, 如果使用的话这要绕过wifi代理, 这对安全更好了, 但是对于测试产生了很大的难度, 一下就是解决方案

众所周知, wifi代理是代理的一种, 另一种代理是VPN, 我们可以代理所有的请求到一个ip:端口, 而VPN的代理原理是不同于wifi代理的

这原理我也是看的没有深究过, 等深究完了再更一波, 挖个坑

• 解决方案就是下载VPN, 通过VPN来做代理, 这里比较推荐的是使用Shadowrocket因为这个甚至可以代理ws的请求,不过因为我比较懒github上面只有源码和target没有直接的安装包, 小弟也是无能安卓了, 所以这里先介绍使用Drony(当然这个在github上也是只有源码的没有直接打包成安装包的target), 不过可以在CSDN上面随便找找找一个高版本的, 或者请贵公司的安卓大佬们帮忙打个包

1. 首先下载并且安装Drony或者其他代理软件此处仅介绍Drony(请尽量找到高版本的因为低版本的话可能会出现问题)

2. 打开软件转到设置

   

3. 接下来我们填写需要代理的端口号这里是和WIFI代理一样的端口号填写方式是你charles里面设置的代理端口, 我这里是8888所以填写了8888

   

4. 然后点开无线网络, 或者下面的不是无线网络

   这里需要注意, 因为安装包你是下载的, 你也不清楚那个老哥干了啥玩意, 我这个安装包出现的问题就是我即使连的是wifi但是我的无线网络列表中就是没有任何wifi显示, 所以就只能去不是无线网络中填写对应的数据, 但如果你的无线列表中有东西且有你连接的网络那么讲究直接填写就好了

5. 依旧是老三样

   

6. 然后返回上层界面点击关, 一般来说下面显示的是现在的状态, 然后就会打印日志,下方可以看见我们被代理的端口, 以及上方我们转发出去的ip:端口

   

7. 同时我们可以再次看到charles中提示类似提示, 同样点击allow

   

Charles流量配置

1. 在charles窗口中点击菜单“Proxy” -> “Throttle Setting”
   

2. 在打开的设置窗口中勾选“Enable Throttling”
   

3. 在“Throttling preset”下拉框中选择对应的网络类型
   
   参数详解:(待更新)

   • Bandwidth: 上传下载速度
   • Utilisation
   • Round-trip latency
   • MTU
   • Reliability
   • Stability
   • Unstable quality range

4. 点击“OK”

弱网测试实例

将Charles的网络流量配置成56k modem的网络查看菜单打开情况

1. 首先使用正常的去请求您需要进行弱网测试的网站
   
   我们这里可以观察到我们请求的时间是835ms

2. 接下来我们根据流量配置中讲解的方法进行弱网配置,配置成如下
   

3. 然后重新请求页面

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
   我们这里发现了时间的明显变化

这里知识测试网站使用的浏览器,一般来说我们正在使用的浏览器不会出现崩溃和闪退的问题,但是对于app来说可能出现类似于闪退或者崩溃的情况,所以一般来说弱网测试多是应用于app测试

重点千万在弱网测试之后不要忘记点击小乌龟关闭弱网测试环境,不然你的网可能会变的巨慢!!!

Charles断点配置&实例演示

作用: 用来构建异常的测试场景

先打开您想测试的位置走一下对应的接口,然后找到接口之后进行如下操作,我们这里使用https://www.baidu.com进行演示

1. 右击链接,选择“Breakpoints”
   

2. 在浏览器刷新对应接口的页面(或者重新走对应的接口)
   

3. 此时会自动跳转到Charles并显示出接口请求信息

4. 点击“Edit Request”, 修改请求的信息, 点击“Execute“
   
   

5. 点击“Edit Request”

6. 在数据格式栏中选择合适的显示格式,比如“json”但是这里演示的是“cookie”

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
   将框中的参数改成0

7. 修改对应的数据, 点击“Execute”
   

8. 回到浏览器查看数据应该为修改之后的Response的信息

—最后断点讲的不太清楚,等我有自己服务器弄一个域名之后自己写一份代码在重新更新一下文档做演示