Charles抓包工具测试实战教程
文章目录
- Charles抓包工具测试实战教程
-
- 学习准备
- 目标
- 文章介绍
- Charles介绍
-
- Charles是什么?
- Charles工作原理?
- Charles能做什么?
- Charles简介
- Charles安装和配置
-
- Charles组件介绍
- Charles主导航栏介绍
- Charles代理配置
- Charles访问控制
- windows代理设置
- mac代理设置
- mac快捷代理设置
- ios代理设置
- andriods代理设置
- Charles实战!!!
-
- 抓包问题分析
- https抓包
- Windows证书配置
- MacOS证书配置
- Charles Https代理配置
- IOS证书配置
- 安卓(andriods)配置ssl证书
- 处理安卓(andriod)手机部分APP可能使用了flutter等框架导致http/https请求无法抓取
- Charles流量配置
- 弱网测试实例
- Charles断点配置&实例演示
学习准备
目标
- 能够用Charles来分析前后端的问题
- 能够用Charles模拟弱网测试环境(弱网:网络不好的情况,或者实现2g,3g情况)
- 能使用Charles的断点构建一场的测试场景(针对特殊测试场景,通过修改请求参数以及修改返回参数)
文章介绍
- Charles介绍
- Charles安装和配置
- Charles实战
Charles介绍
Charles是什么?
Charles中文名叫青花瓷是一个基于http协议的代理服务器,通过成为电脑或者浏览器的代理,然后截取请求和请求结果达到分析抓包的目的
特点:跨平台,半免费
Charles工作原理?
![Charles抓包工具实战教程(完结)_第1张图片](http://img.e-com-net.com/image/info8/f90d37d5bc964ca1975e124c4cbccd1b.jpg)
- 前置步骤:
- 需要运行Charles并配置代理
- 在客户端上面需要配置代理
- 步骤
- 有客户端发送请求
- Charles接收再发送给服务器
- 服务端返回请求结果给Charles
- 由Charles转发给客户端
Charles能做什么?
- 支持HTTP及HTTPS代理
- 支持流量控制
- 支持接口并发请求
- 支持重发网络请求
- 支持断点调试
Charles简介
对比fiddler
- Charles能够支持Linux, MacOs
- Charles支持按域名和按接口查看报文,简洁明了
- Charles支持反向代理
- Charles网络限速可选择网络类型
- Charles可以解析AMF协议
Charles安装和配置
下载地址:https://www.charlesproxy.com/
安装过程不难,要是那装不明白的话,多下载几遍qq或者微信然后安装一下就可以举一反三了
Charles组件介绍
![Charles抓包工具实战教程(完结)_第2张图片](http://img.e-com-net.com/image/info8/cde0d07e9fae45bca90418117b453c21.jpg)
Charles主导航栏介绍
-
清除请求数据
-
开始/取消抓包
-
开/关ssl代理
-
开启/关闭慢速网络
-
开启/关闭断点设置
-
请求数据
-
重新发送请求
-
校验返回的请求
-
工具
-
设置
-
![Charles抓包工具实战教程(完结)_第3张图片](http://img.e-com-net.com/image/info8/a6061bae91cf4360b53472ea0f05cdfa.jpg)
-
![Charles抓包工具实战教程(完结)_第4张图片](http://img.e-com-net.com/image/info8/3d4e61f5e31f4e608defbeb4e666641c.jpg)
-
![Charles抓包工具实战教程(完结)_第5张图片](http://img.e-com-net.com/image/info8/c81588a5b4f347bba6d334bf0b48778e.jpg)
Charles代理配置
- 首先Proxy > Proxy Settings* 点开之后默认的端口号会是8888,这里我们不做修改,但工作中如果有不同端口的话需要及时进行调整
![Charles抓包工具实战教程(完结)_第6张图片](http://img.e-com-net.com/image/info8/662c2d6e3cf2412391db63fe0be1f53a.jpg)
Charles访问控制
-
首先点开Proxy > Access Control Settings
-
点开后
![Charles抓包工具实战教程(完结)_第7张图片](http://img.e-com-net.com/image/info8/93a4d0731df941d7996f8928c31c18b3.jpg)
这里讲解一下点击add会让你添加ip这个ip只的就是你使用设备代理到抓包电脑的的ip,一般来讲就是你需要被抓包的设备的ip
![Charles抓包工具实战教程(完结)_第8张图片](http://img.e-com-net.com/image/info8/ca1f4183cfff468197b34ccff8d689e2.jpg)
当然我这里所填写的192.168.100.1就是我需要被抓包的设备ip,这里一般情况下需要保证被抓包设备已经是和您抓包的设备在同一网络内或者在您抓包设备的子网中,这里如果有不明白的话,可以去打字的看一下计算机网络相关知识.
![在这里插入图片描述](http://img.e-com-net.com/image/info8/92069423af71476f9172bcfe027ad39c.jpg)
我们在上上图中会发现这样一行字,大致的意思就是
- 当你勾选之后您的抓包设备配置了对应的代理网络ip和端口可以对应您抓包设备的ip和您之前在proxy settings中配置的端口相同时,他会向您询问是否将新的被抓包设备ip加入到ip range中
- 如果您不勾选的话那么,如果您不手动添加ip的话,那么是没有办法直接允许使用代理网络的
-
当配置完对应的是没办法马上就可以进行抓包的这时候我们要进行下面的操作设置对应系统的代理才可以进行有效合理的抓包
windows代理设置
-
在对应的浏览器中进入设置,这里推荐使用chrome,在地址栏中输入
chrome://settings/
这个地址仅限于chrome浏览器
-
在搜索框中输入“代理”![Charles抓包工具实战教程(完结)_第9张图片](http://img.e-com-net.com/image/info8/cb9a97eaa2d5498a94028a48aabc4195.jpg)
-
点击“打开您计算机的代理设备”![在这里插入图片描述](http://img.e-com-net.com/image/info8/c32ee42e9d0e4ecdafcac54ef9d6d5ff.jpg)
-
在手动设置代理中开启代理
-
在地址输入框中输入您抓包设备的IP地址以及端口
-
点击“保存”,关闭页面
注意⚠️: 如果您的抓包设备和您被抓包的设备是同一台的win电脑的时候默认情况下,charles会默认配置好的,但是如果不是同一台win的话那么就需要一以上的操作
mac代理设置
待更新
mac快捷代理设置
待更新
ios代理设置
-
首先打开设置
![Charles抓包工具实战教程(完结)_第10张图片](http://img.e-com-net.com/image/info8/5330aac6bbb041a18210796237b29d54.jpg)
-
然后打开wifi(一般情况下是wifi除非您使用了usb或者蓝牙共享网络,这种骚操作暂时不讨论)
![Charles抓包工具实战教程(完结)_第11张图片](http://img.e-com-net.com/image/info8/2f3e83a1ba0442c69641c2d938df6e9a.jpg)
-
接下来点击已经链接上的wifi后面的小感叹号![Charles抓包工具实战教程(完结)_第12张图片](http://img.e-com-net.com/image/info8/b0f7db92abb946f682ea28bd5d751568.jpg)
-
拉到最下面点击 : HTTP代理>配置代理 > 选择手动然后在下方填写,您Charles运行的设备的ip以及您proxy setting中的端口号
![Charles抓包工具实战教程(完结)_第13张图片](http://img.e-com-net.com/image/info8/8fb5e177bcc64cd1a888101236c4386a.jpg)
-
完活!
andriods代理设置
同理ios
-
首先打开设置进入wifi设置(ps:这里需要保证手机和charles设备[这里应该是你的电脑],在同一网络下)这里用的手机是vivo其他手机同理,请自行推理
![Charles抓包工具实战教程(完结)_第14张图片](http://img.e-com-net.com/image/info8/020a2d35e28c4c4eadb8f94251c8b185.jpg)
-
接下来点击上图中的小箭头进入下方界面, 然后选择代理 -> 手动
![Charles抓包工具实战教程(完结)_第15张图片](http://img.e-com-net.com/image/info8/ab6c359f5ee448108fd44fc6909de2f2.jpg)
![Charles抓包工具实战教程(完结)_第16张图片](http://img.e-com-net.com/image/info8/88419dd61da14cb6979db41b1d661a9c.jpg)
-
然后去填写对应的ip和端口号吗, 这里ios也是一样的,需要填写的端口是你charles中设置的代理的端口, 而ip是需要填写您对应的charles设备的ip, 我这里使用的charles设备也就是我的电脑的ip是192.268.14.222, 所以设置如下
![Charles抓包工具实战教程(完结)_第17张图片](http://img.e-com-net.com/image/info8/093ea59f7d5d46edbcf8543512bffb60.jpg)
-
然后退出您的电脑的charles中就会出现如下, 点击allow允许代理, 窗口中的192.168.14.238, 根据上图可以推理得出就是我使用的vivo手机的ip![Charles抓包工具实战教程(完结)_第18张图片](http://img.e-com-net.com/image/info8/040e06d0052b4e4ebe8d7fdd8301a6b2.jpg)
Charles实战!!!
抓包问题分析
模拟具体实战问题:
假如在某一个系统中进行了点击某个按钮后返回以下两种提示信息:
- 数据异常
- 弹出两次数据异常
实施的具体步骤首先: Charles代理配置>客户端代理配置>操作客户端软件>分析请求数据
使用抓包工具,根据请求数据来判断是否为前端还是后端问题…此处详解等待本周休息日我写一个模拟案例之后截图进行讲解
https抓包
-
首先判断Charles是否可以进行https抓包
-
我们打开https://azang.blog.csdn.net
![Charles抓包工具实战教程(完结)_第19张图片](http://img.e-com-net.com/image/info8/6e51828160b24da5997a5000b7630e19.jpg)
-
这里说明我们是可以抓到https的报文的,但是因为「粗浅的解释:HTTP是超文本传输协议,信息是明文传输,HTTPS是具有安全性的SSL加密传输协议,所以HTTPS被报文被进行了加密」,所以对于Charles需要进行的一定的配置. 这里的解决方案就是安装SSL证书
Windows证书配置
- 打开Charles,选择“help” -> “SSL Proxying” -> “install Charles Root Certificate”
- 在打开的证书框中, 点击“安装证书”, 选择“本地计算机”, 点击”下一步“
- 选择“将所有证书都存放下列储存”, 再点击“浏览”
- 选择“收信任的根证书颁发机构”, 点击“确定” -> “下一步” -> “完成”
MacOS证书配置
- 打开Charles,选择“Help” -> “SSL Proxy” -> “Install Charles Root Certificate”
![Charles抓包工具实战教程(完结)_第20张图片](http://img.e-com-net.com/image/info8/965ced72f6c14df28e1f00805f91722e.jpg)
- 出现一个弹窗选择登陆然后添加
![Charles抓包工具实战教程(完结)_第21张图片](http://img.e-com-net.com/image/info8/c4e5ace441114d2d9325a465aba62971.jpg)
- 然后会有一个钥匙串访问在登录中找到对应证书,然后将使用此证书时选择始终信任
![Charles抓包工具实战教程(完结)_第22张图片](http://img.e-com-net.com/image/info8/a1cc1083a59a42c8b260b35f425c6102.jpg)
![Charles抓包工具实战教程(完结)_第23张图片](http://img.e-com-net.com/image/info8/30f1203627934f0c91b9ca6963e1e21a.jpg)
- 点击关闭窗口它会让输入密码,然后输入您的密码点击更新设置
![Charles抓包工具实战教程(完结)_第24张图片](http://img.e-com-net.com/image/info8/23348f6dcd4d4d6f80e8d874b46045a6.jpg)
- 这时候我们可以看见证书的状态发生了改变变成了加号
![Charles抓包工具实战教程(完结)_第25张图片](http://img.e-com-net.com/image/info8/9e7f0b11d95c4a2db68a1cd812e3646a.jpg)
Charles Https代理配置
-
在Charles窗口中点击菜单“proxy” -> “SSL proxying setting”
![Charles抓包工具实战教程(完结)_第26张图片](http://img.e-com-net.com/image/info8/d94fa7e10b124c2bbc7a269729d6e9c1.jpg)
-
在打开的设置窗口中勾选“Enable SSL Proxying”,如果include中没有值的话
![Charles抓包工具实战教程(完结)_第27张图片](http://img.e-com-net.com/image/info8/ffbd1f9046c14d709e19901cf614accb.jpg)
点击add,下图中的host里面填写*表示所有的,如果您只需要特定的话填写特定的域名或者ip
port是端口号,https默认的端口号是443
![Charles抓包工具实战教程(完结)_第28张图片](http://img.e-com-net.com/image/info8/d8e63ad89dcc47d181cec43a487e325d.jpg)
![Charles抓包工具实战教程(完结)_第29张图片](http://img.e-com-net.com/image/info8/14d959ad689741e0948e03cfc0fa41fd.jpg)
-
点击“OK”
-
我们重新打开网站https://azang.blog.csdn.net会发现我们可以得到报文了
![Charles抓包工具实战教程(完结)_第30张图片](http://img.e-com-net.com/image/info8/ec4a84ef00044557adb369b043dd2654.jpg)
IOS证书配置
-
在电脑上运行Charles,并且IOS手机设置好代理,在浏览器中地址栏输入:
http://charlesproxy.com/getssl
![Charles抓包工具实战教程(完结)_第31张图片](http://img.e-com-net.com/image/info8/405cf9ea4499420ab550e692eafb6fb4.jpg)
![Charles抓包工具实战教程(完结)_第32张图片](http://img.e-com-net.com/image/info8/24d7026bf433439f971e1002c6301a61.jpg)
-
然后进入设置点击下载描述文件
![Charles抓包工具实战教程(完结)_第33张图片](http://img.e-com-net.com/image/info8/32a31bead13041d9a47f3192c3c5c362.jpg)
-
点击安装
![Charles抓包工具实战教程(完结)_第34张图片](http://img.e-com-net.com/image/info8/6cb5e689d9b54b87aa909c6de7b96ce5.jpg)
![Charles抓包工具实战教程(完结)_第35张图片](http://img.e-com-net.com/image/info8/20caca5252a148bf8e91137a8c9dd411.jpg)
-
返回“通用”页面选择“关于本机”
![Charles抓包工具实战教程(完结)_第36张图片](http://img.e-com-net.com/image/info8/74ba4c3e0ef947c490708939a9ec9f87.jpg)
-
点击“证书信任设置”,启用Charles Proxy CA证书并确认
![Charles抓包工具实战教程(完结)_第37张图片](http://img.e-com-net.com/image/info8/473d3c66c626479eb796df462e6da535.jpg)
安卓(andriods)配置ssl证书
-
首先Charles -> help中下载ssl证书
![Charles抓包工具实战教程(完结)_第38张图片](http://img.e-com-net.com/image/info8/9f81097a076b4e26b28ac14991c9b0a3.jpg)
-
然后传送到手机上接下来在手机上进行安装证书的操作
-
首先打开设置搜索证书, 且点击WlAN证书(这里使用的是vivo其他手机自行推理)
![Charles抓包工具实战教程(完结)_第39张图片](http://img.e-com-net.com/image/info8/e6e960571bf44b34b8166acc5334b3c8.jpg)
-
然后点击WLAN证书
![Charles抓包工具实战教程(完结)_第40张图片](http://img.e-com-net.com/image/info8/99efe0a49bed4a75b80be31421cb26b1.jpg)
-
接下来需要在你手机存储空间中找到对应的证书文件然后选择
![Charles抓包工具实战教程(完结)_第41张图片](http://img.e-com-net.com/image/info8/8c82fc702f5048ad91230936601627df.jpg)
-
然后编辑一个你可以记住的证书名称. 这里最主要还是示范演示写随便写了一个c
![Charles抓包工具实战教程(完结)_第42张图片](http://img.e-com-net.com/image/info8/c39a792ff9b246b9b16d0603118530c1.jpg)
-
点击确定之后会提示你安装完成, 这里再去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上面随便找找找一个高版本的, 或者请贵公司的安卓大佬们帮忙打个包
-
首先下载并且安装Drony或者其他代理软件此处仅介绍Drony(请尽量找到高版本的因为低版本的话可能会出现问题)
-
打开软件转到设置
![Charles抓包工具实战教程(完结)_第43张图片](http://img.e-com-net.com/image/info8/308a9ee23402404e88d22d14f00b5a1e.jpg)
-
接下来我们填写需要代理的端口号这里是和WIFI代理一样的端口号填写方式是你charles里面设置的代理端口, 我这里是8888所以填写了8888
![Charles抓包工具实战教程(完结)_第44张图片](http://img.e-com-net.com/image/info8/7235f60638b8433dac49474729783ab6.jpg)
-
然后点开无线网络, 或者下面的不是无线网络
这里需要注意, 因为安装包你是下载的, 你也不清楚那个老哥干了啥玩意, 我这个安装包出现的问题就是我即使连的是wifi但是我的无线网络列表中就是没有任何wifi显示, 所以就只能去不是无线网络中填写对应的数据, 但如果你的无线列表中有东西且有你连接的网络那么讲究直接填写就好了
-
依旧是老三样
![Charles抓包工具实战教程(完结)_第45张图片](http://img.e-com-net.com/image/info8/711897e485654b13847679e698323a10.jpg)
-
然后返回上层界面点击关, 一般来说下面显示的是现在的状态, 然后就会打印日志,下方可以看见我们被代理的端口, 以及上方我们转发出去的ip:端口
![Charles抓包工具实战教程(完结)_第46张图片](http://img.e-com-net.com/image/info8/c89d041d38464dc9bd6c10149ec9e3d4.jpg)
-
同时我们可以再次看到charles中提示类似提示, 同样点击allow
![Charles抓包工具实战教程(完结)_第47张图片](http://img.e-com-net.com/image/info8/e0034161b7c54b128eae6d71c4c90db7.jpg)
Charles流量配置
-
在charles窗口中点击菜单“Proxy” -> “Throttle Setting”
![Charles抓包工具实战教程(完结)_第48张图片](http://img.e-com-net.com/image/info8/2bec8042143146629cf2c8a4a2d82de8.jpg)
-
在打开的设置窗口中勾选“Enable Throttling”
-
在“Throttling preset”下拉框中选择对应的网络类型
![Charles抓包工具实战教程(完结)_第49张图片](http://img.e-com-net.com/image/info8/9bbce5208941422ea34ca9daea211bd7.jpg)
参数详解:(待更新)
- Bandwidth: 上传下载速度
- Utilisation
- Round-trip latency
- MTU
- Reliability
- Stability
- Unstable quality range
-
点击“OK”
弱网测试实例
将Charles的网络流量配置成56k modem的网络查看菜单打开情况
-
首先使用正常的去请求您需要进行弱网测试的网站
![Charles抓包工具实战教程(完结)_第51张图片](http://img.e-com-net.com/image/info8/49dc23e714ed4fa2bf2248ce2788b71e.jpg)
我们这里可以观察到我们请求的时间是835ms
-
接下来我们根据流量配置中讲解的方法进行弱网配置,配置成如下
![Charles抓包工具实战教程(完结)_第52张图片](http://img.e-com-net.com/image/info8/8f1866e94f744df0836e2e4f2c502857.jpg)
-
然后重新请求页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传![Charles抓包工具实战教程(完结)_第53张图片](http://img.e-com-net.com/image/info8/3f9c1882651b4d28a8d1b4538b7453e9.jpg)
我们这里发现了时间的明显变化
这里知识测试网站使用的浏览器,一般来说我们正在使用的浏览器不会出现崩溃和闪退的问题,但是对于app来说可能出现类似于闪退或者崩溃的情况,所以一般来说弱网测试多是应用于app测试
重点千万在弱网测试之后不要忘记点击小乌龟关闭弱网测试环境,不然你的网可能会变的巨慢!!!
Charles断点配置&实例演示
作用: 用来构建异常的测试场景
先打开您想测试的位置走一下对应的接口,然后找到接口之后进行如下操作,我们这里使用https://www.baidu.com进行演示
-
右击链接,选择“Breakpoints”
![Charles抓包工具实战教程(完结)_第54张图片](http://img.e-com-net.com/image/info8/e6736b67add3467c9d0c33104656aa96.jpg)
-
在浏览器刷新对应接口的页面(或者重新走对应的接口)
![Charles抓包工具实战教程(完结)_第55张图片](http://img.e-com-net.com/image/info8/8f706ad927b44765bb473aacc157c3dc.jpg)
-
此时会自动跳转到Charles并显示出接口请求信息
-
点击“Edit Request”, 修改请求的信息, 点击“Execute“
![Charles抓包工具实战教程(完结)_第56张图片](http://img.e-com-net.com/image/info8/88b3e9aad8164b57a225f53769e1148d.jpg)
![Charles抓包工具实战教程(完结)_第57张图片](http://img.e-com-net.com/image/info8/4d92c885f1d144c18ca4579efc6ad991.jpg)
-
点击“Edit Request”
-
在数据格式栏中选择合适的显示格式,比如“json”但是这里演示的是“cookie”
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传![Charles抓包工具实战教程(完结)_第58张图片](http://img.e-com-net.com/image/info8/e5c32b453b464221a11c56ac64715025.jpg)
将框中的参数改成0
-
修改对应的数据, 点击“Execute”
![Charles抓包工具实战教程(完结)_第59张图片](http://img.e-com-net.com/image/info8/e8237a9fd2d8453b8aead6079ec3a80e.jpg)
-
回到浏览器查看数据应该为修改之后的Response的信息
—最后断点讲的不太清楚,等我有自己服务器弄一个域名之后自己写一份代码在重新更新一下文档做演示