Fork me on GitHub

移动APP抓包神器Charles使用教程,产品经理看了都会

由于最近负责的APP又要更新迭代了,所以我特别关注产品体验如何,尤其是一些细小的体验,比如接口的请求时长,请求大小等。加上自己一直是一个爬虫爱好者,所以对抓包工具一直有所研究。今天就分享一款抓包神器Charles。

为什么要抓包

要理解为什么要抓包,首先我们来看下网络抓包的定义:

抓包(packet capture)就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作,也用来检查网络安全。抓包也经常被用来进行数据截取等。

以上是来自百度百科的定义。我们都知道,不论是B/S架构,还是C/S架构的产品,或多或少都会与服务器进行数据交互。也就是定义所说的网络数据的发送与接收,通过抓包,我们可以进行接口传参的数值修改,得到想要的数据。

在WEB产品中,我们可以通过浏览器的开发工具Network来进行网络抓包;在移动APP中,通过抓包工具也可以轻松实现抓包。

那抓包到底有什么用呢?以下我列几个使用场景:

  • 测试单个页面数据请求的数据、大小;
  • 查看页面请求接口的安全验证;
  • 获取某个APP的数据接口,进行数据爬取;

单个页面数据请求大小其实就是Network中的请求时间,为了产品体验更好,接口的响应时间需要尽可能的快,哪怕是弱网环境下也应该很快;经常我们在使用一款APP的时候,会说:”这个APP用起来很慢“,其实APP慢90%的原因都是服务器问题,真正因为手机硬件跟不上导致卡顿的比例极低。既然是跟服务器相关,那么通过抓包工具就可以轻易的测试出来接口返回数据的大小。

我通过抓了一些APP的接口来看,有部分APP接口安全性做的极差,举个例子,登录接口用GET方法,用户名与密码均明文上传;然后一些隐私数据的接口没有任何安全验证手段,直接GET即可请求回数据,有时候我也在想,如果有恶意的人拿这些裸奔的接口干一些坏事,会有什么后果?

最后一个就是我经常用来爬数据的,比如某电商产品的商品列表,通过抓包可以清楚看到一共有多少款商品,商品都是什么价格等等,用来做爬虫会非常方便。

抓包工具的选择

其实抓包工具貌似还不少,我自己了解了两款。

名称 是否收费 平台
Charles 收费 WIN/MACOS
Fiddler 免费 WIN

最后为什么选择了Charles,只能说机缘巧合吧,Fiddler在macos上安装貌似太麻烦了,而Charles安装起来则相当的简单。如何安装这里就不赘述了,点击下面的下载地址直接下载即可,破解版自己可百度谷歌,很简单就可以找到。

Charles下载地址

官网:https://www.charlesproxy.com/download/

Charles工作界面介绍

主界面视图介绍

由于工具是纯英文界面,所以需要一段时间来适应。对于有开发经验的同学来说则不会太陌生;首先介绍下Charles的两种工作界面:

  • Structure:树状结构显示,将网络请求按访问的域名分类;
  • Sequence:水平结构显示,将网络请求按访问的时间排序

其中,structure类似于chrome开发者工具的sources,可以查看到目录下面都请求了哪些服务器:

FJtuU1.png

上图为新浪微博热门微博的评论数据,在structure界面中找起来还是有些麻烦的,但是在sequence界面中找起来则相当方便,见下图:

FJtK4x.png

可以清楚的看到接口的请求地址,两种方式各有优势,实际应用过程中按需自取。

工具导航栏介绍

由于不想放太多图片,这里就以文本介绍描述了。

名称 功能
小扫帚 清除捕获到的所有请求
红点 红色状态表示正在抓取网络请求,灰色状态表示停止了网络抓取请求
小乌龟 灰色状态说明是没有开启网速节流,绿色状态说明开启了网速节流
六边形 灰色状态说明是没有开启断点,绿色状态说明开启了断点
编辑修改请求,点击之后可以修改请求的内容。(可用来修改请求参数)
刷新 重复发送请求,点击之后选中的请求会被再次发送
对勾 验证选中的请求的响应
扳手起子 常用功能,包含了 Tools 菜单中的常用功能
设置 常用设置,包含了 Proxy 菜单中的常用设置

菜单介绍

Charles 的主菜单包括:FileEditViewProxyToolsWindowHelp。用的最多的主菜单分别是 ProxyTools

Proxy 菜单包含以下功能:

名称 说明
Start/Stop Recording 开始/停止记录会话
Start/Stop Throttling 开始/停止节流
Enable/Disable Breakpoints 开启/关闭断点模式
Recording Settings 记录会话设置
Throttle Settings 节流设置
Breakpoint Settings 断点设置
Reverse Proxies Settings 反向代理设置
Port Forwarding Settings 端口转发
Windows Proxy 记录计算机上的所有请求
Proxy Settings 代理设置
SSL Proxying Settings SSL代理设置
Access Control Settings 访问控制设置
External Proxy Settings 外部代理设置
Web Interface Settings Web 界面设置

在实际使用过程中,由于我只是单纯的抓包,所以其实菜单用到的并不多,所以暂时这块不做详细描述,后续用到了再来更新。

开始抓包

客户端设置(MAC/WIN)

  1. 查看本机IP地址

首先需要知道自己的本地IP地址。但如何要知道自己的IP地址呢?

  • 在终端输入ifconfig
  • 打开系统偏好设置-网络;
  • 打开Charles-Help-Local IP Address;
  1. 设置端口

打开Charles,选择Proxy->Proxy Setting->Proxies:

设置HTTP PROXY的端口(PORT)为8888,然后勾选下方的enable transparent HTTP proxying;到这里客户端的设置就完毕了。

手机端的设置(IOS/Android)

打开手机,连接跟客户端同个网络环境下的WIFI,然后设置代理,代理模式选手动,服务器地址填客户端设置中第一步找到的IP地址,端口填8888(上文设置的端口)。到了这一步,还没真正的成功,只有当手机成功连接到电脑的时候,电脑会弹出一个connect from X.X.X.X的弹窗,这就表示连接成功了,点击”allow“,也就是表示同意,然后就可以愉快的抓包了。

但是这个时候还只能抓取到http(80端口)的数据,要抓取https,就需要安装证书。抓包成功请参考上文的图片。

为什么要设8888?我也不知道,所有的教程中都是这么写的,手动摊手.jpg

抓取https的包

安装证书这块其实没多少好说的,首先打开Charles,选择Help->SSL Proxy->Install Charles Root Certificate,手机端的也差不多,点击proxy官网的证书下载,然后下载到手机即可。

安装其实很简单,但这个地方一定要特别注意一点!!!就是一定要信任证书,我一开始在这里研究了好久,就我两个设备证书都安装了,没问题啊,但https的接口还是没法抓取,但后来发现了,macos跟ios都必须要信任刚刚安装的证书才行,不会信任证书的自行百度。

给你的服务器来一次压力测试

其实我一直都有听说过压力测试,但我不是专业测试,所以有的时候我喜欢研究一些好玩的东西,正好发现Charles可以利用抓取到的接口开始打压,在抓取到的接口点右键->Repeat Advanced,这个功能还挺好的,我在另一个博主的分享中看到了,可以利用这个功能来刷票,比如一个账号一天可以投N次票,利用这个功能就可以重复给接口喂数据,当数据量大的时候就相当于压力测试了。

  • Iterertions:并发线程;
  • Concurrency:打压次数;

不过这个功能我研究的不深,也还没遇到实际的这种场景,就发现用来刷票还蛮不错的。

TIPS

  • 不抓包请关闭手机HTTP代理,否则断开与电脑连接后会连不上网;
  • Charles搭配Postman效果极佳,后续考虑写一篇Postman的教程;

参考资料:
Charles 功能介绍和使用教程
Charles 从入门到精通
charles抓包的安装,使用说明以及常见问题解决(windows)