Charles是一款抓包工具,提起抓包工具大家可能比较熟悉的是Fiddler其实我之前接触的也都是Fiddler只不过最近公司给IT部门更换Mac电脑后发现Fiddler也有一个弊端就是操作系统支持的比较少,相对于Fiddler来言charles能够支持的操作系统具有Mac和Windows以及Linux,学会是使用的Charles你们就不会出现像我这种困扰.闲话少数咱们直接上干货看看Charles都能干点啥?
Charles主要功能
- 支持SSL代理,可以截取以及分析SSL的请求
- 支持流量控制,可以模拟网速较慢以及等待时间较长的请求
- 支持AJAX调试,可以自动将
JSON或者XML数据进行格式化 - 支持AMF调试,可以将Flash Remoting或者Flex Remoting信息格式化
- 支持重新发送网络请求,方便后端请求调试
- 支持修改网络请求参数
- 支持网络请求动态截取并修改
- 支持加载本地数据
Charles布局
我们简单的说了一下主要功能后我们现在就直接开始抓包吧, 打开Charles这个软件给大家直观的感觉是比Fiddler界面看着简洁大方.这个界面主要分为三大部分我们逐一来介绍
Charles菜单
现在我们将我目前常用的功能做个介绍:
- 扫把: 点击这个图标是将左侧抓取到的请求全部清空
- 红圈: 这个圈是有两种状态.
- 当这个是红色的时候就是监听请求, 我们访问的内容会在左侧请求列表中展示
- 当这个是灰色的时候就是不监听请求, 我们访问的内容不会在左侧请求列表中展示
- 锁: 这个锁也是有两种状态.
- 当这个锁是锁上状态时就表示我们访问的内容都先请求到了
Charles然后在由Charles转发到目标地址 - 当这个锁是打开状态时我们访问的内容就直接请求到目标地址了
- **示例: **苹果手机连上Charles后, 别的APP都能正常访问唯独
AppStore访问的时候提示是无法连接,放在之前我会打开手机的设置--网络--关闭代理,然后下载一个APP后在到设置--网络--配置一遍代理.但是现在我只需要将锁打开下载完APP后我在锁就搞定了
- 当这个锁是锁上状态时就表示我们访问的内容都先请求到了
- 乌龟: 这个乌龟也是有两种状态.
- 当这个乌龟高亮的时候就是开启限制流量功能
- 当这个乌龟是灰的时候就是关闭限制流量功能
- **示例: **想要进行弱网测试时,可以模拟4G网络,3G网络,2G网络等
- 五边形: 这个五边形也是有两种状态.
- 当这个五边形高亮的时候就是开启请求拦截功能
- 当这个五边形是灰的时候就是关闭请求拦截功能
- **示例: **我们想要更改后端返回的一个数据来测试前端页面展示时就需要使用到这个功能
- 笔: 选择某个请求后点击这个图标就是可以自定义方式发送请求
- 这个平时不怎么常用,但是有的时候我们想要更改请求参数再次请求时就可以使用这个方法,如果不适用这个方法就是将要修改参数的请求进行拦截然后修改参数. 这样就省去了拦截那一步
- 刷新: 选择某个请求后点击这个图标就会重新请求一次
- 工具: 一些常用的工具开关点击这个图标就可以
- 齿轮: 这个就是设置功能
Charles请求数据列表
左侧是请求列表,就是我们连接Charles后访问一个网站或者打开一个App时左侧会有展示, 这个展示分为两种形式
第一种形式就是这样,以域名划分为一个"文件夹", 这个我们一层一层的打开; 第二种是每个请求一行的那种如下图
这两种都可以, 我个人比较喜欢第一种这样看的清晰一些. 两种都是可以的, 图中Filter后边是一个输入这个不是主要的,我们抓包主要是看请求后返回的数据等等,我们现在来看看Charles数据侧
Charles数据相关
如上图Charles右侧是展示数据相关的选项，这些选项分别有Overview Contents Summary Chart Notes
Overview这一栏是显示这个请求的请求方式,请求地址,请求时长等等. 我常常从这里边获取URL和method
主要的数据都在Contents这一栏中,这一栏中展示请求时的参数以及返回的数据,
From就是请求时携带的参数, JSON是请求返回的数据, 这个自动给咱们格式化后方便查看,如果想看源数据就点击JSON Text 这个选项查看. 还有Cookie等等选项可以自己稍微研究一下. 现在简单的介绍了Charles的布局我们就开始来抓个包试一试
Charles使用
我们打开Charles后确认一下圆圈是红色的并且是上锁的状态后打开浏览器访问 www.baidu.com 你会发现好像http请求能够抓取到但是https请求抓不到包,就如下图:
这种能够抓取http请求但是不能抓https请求是因为我们还没有配置Charles现在我们来配置一下
抓取HTTPS请求
首先我们找到顶部的Proxy --- SSL Proxyting Settings点击后出现以下窗口
我们首先第一步将Enable SSL Proxying的勾打上, 然后第二步点击Add点击Add会弹出一个新的窗口
我们在Host这个地方写上*在Post这个地方写上443,然后点击OK. 我们在重复第二步在Host这个地方写上*然后点击OK, 最终的状态如下图
现在我们点击OK再尝试着访问一下 www.baidu.com 你可能又遇到了一个
这样的图标这个是因为咱们没有给电脑安装证书. 现在我们来安装一下证书
安装证书
我们现在能够抓取https请求但是目前不能完全展示出来我们需要给当前电脑安装证书 首先找到顶部Help点击一下选择SSLProxying然后在选择Install Charles Rootificate 点击这个会打开一个新的窗口,窗口如下图:
我们点击安装证书这按钮后选择本地计算机点击下一步,选择将所有的证书都放入下列存储然后点击浏览然后选择受信任的根证书颁发机构点击确定,最后在点击下一步,此时完成出现了我们点一下完成. 最终就会有一个弹窗提示我们证书导入成功了,我们只需要点击确定搞定了. 现在我们大展手脚吧
现在访问http以及https都能正常展示请求了
我们想要知道这个页面为何会展示这些内容就是需要通过抓包来查看返回的数据等等. 但是好像目前为止我们只是停留在WEB方向这边的抓包, 我们现在来看看手机端怎么进行抓包
配置手机抓包
我们首先来看看Charles上有没有配置, 找到顶部Proxy然后选择Proxy Settings 配置内容如下图
如果你的Charles和我的是一样的, 我们就可以按照下图进行操作:
Map Local & Breakpoints
其实我们抓包的目的就是查看后端返回的数据, 试想一下后端返回的数据不用我们是通过什么地方的可以感觉得到?
例如: 京东,淘宝这些电商平台我们购买过一个商品后会发现的我们右上角的消息数量增加了一条, 想这种前端消息需要展示多少条是根据后端返回数据来决定的. 我们现在来试一下的通过更改京东返回的数据让前端进行展示
针对于这个更改后端数据我们就可以分为两个方面来考虑, 一个是临时修改 另一个是长期修改我就先来看看临时修改怎么弄
首先我们把时候连上抓包并且给手机上安装好证书打开京东app, 打开京东app的时候我们需要关注charles的请求. 通过我分析我发现首页请求接口如下图:
我们只需要将这个请求进行拦截然后手动修改返回的数据中cName即可, 具体操作如下
我们在设置拦截请求的时候是通过下图进行设置的
在设置的图中没有我们想要的请求的就刷新一下京东的首页, 下拉一下首页就是在刷新页面
我们更改后数据后手机端显示就是我们更改后的内容, 如下图
细心的人会发现我们拦截请求的时候过了一会又有同样的请求被拦截了 这个是因为京东这边做了n秒后重试, 他认为第一次请求失败了然后就发起了第二次请求. 这就是临时修改请求的弊端, 我们现在来看看怎样长期修改请求数据
最终我们通过手机访问京东页面的时候展示的样式如下图:
通过以上两个小演示我们就能明确的知道后边,如果只是前端页面进行修改后 我们就可以使用的这种方式的来快速的进行验证, 修改请求最终总结为以下两种:
- 临时修改: 针对访问的请求进行拦截然后进行修改
- 长期修改: 就是将数据进行替换
Map Remote
我们测试一般都是有测试环境以及生成环境这两种, 这两种环境需要保证功能是一致的, 我们一般都是现在测试环境中进行测试,测试通过后在到生产环境中进行测试. 但是两种环境也会存在没有完全隔离的情况. 我就遇到过在测试环境发送一个请求却请求到了生产环境的数据, 因为前后的数据对应不上导致页面白屏的事情, 我接下来要说的就是临时解决这个问题的.
我们现在用两个网站来模拟测试环境和生成环境, 百度代表着测试环境; 必应代表着生成环境. 我们来模拟一下但是的现状 我需要访问百度页面, 但是却请求到了必应页面. 我们想要正常访问百度就需要使用代理功能
如上图中, 我们设置了Map Remote功能就是当出现上方请求后统统转发请求给下边的请求