文章目录
大家好,我是洋子(B站 Bug挖掘机),目前是一名测试开发工程师,在上篇文章【2021年软件测试工具总结(1)】中,我提到了3个抓包工具,其中一个是Charles,它可以说是测试领域当中最主流的抓包工具了。可能有的小伙伴还不知道怎么使用Charles,那这篇热乎的Charles使用教程一定不要错过,该教程非常全面,已涵盖了Charles绝大多数功能,再不会的话,我就去…
简介
Charles 是在 PC 端常用的网络封包截取工具,在做软件测试/APP开发时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析。Charles支持 抓取HTTP和HTTPS协议的网络请求和响应,也可以用于分析第三方应用的通讯协议
Charles 实现原理
Charles 是一个代理服务器。配置好PC或手机网络代理后,Charles就像一个中间人,能够捕获到从客户端发到服务器的请求,以及服务器再传递回客户端时的响应,所以我们打开Charles 能够看到HTTP(HTTPS)请求和响应的详细信息
安装Charles
- 访问Charles 的官方网站(http://www.charlesproxy.com)
- 下载最新版的 Charles 安装包,MAC版安装包打开后将 Charles 拖到 Application 目录下即可,Windows版打开可执行程序安装即可
在测试开发Guide 微信公众号后台回复【测试工具】可以获取Charles最新安装包和安装教程
Charles 主界面
Charles 主要提供两种查看请求的视图,分别名为 “Structure” 和 “Sequence”
- Structure 视图将网络请求按访问的域名分类(推荐)
- Sequence 视图将网络请求按访问的时间排序
主页面右侧上方可以看到请求详情,包括Header,请求参数,Cookies等信息。右侧下方展示返回结果,如果是JSON,会自动进行格式化方便查看;如果返回的是图片,还可以显示出图片的预览效果
Filter 功能:作用是筛选出指定的请求
- 方法一:可以输入关键字来快速筛选出 URL 中带指定关键字的网络请求
- 方法二:在 Charles 的菜单栏选择 “Proxy”->”Recording Settings”,然后选择 Include 栏,选择添加一个项目,然后填入需要监控的协议,主机地址,端口号。这样就可以只截取目标网站的封包
- 方法三(推荐):在想过滤的网络请求上右击,选择 “Focus”,之后在 Filter 一栏勾选上 Focussed 一项
Charles 抓包教程
PC端抓包
启动 Charles 后,第一次 Charles 会请求你给它设置系统代理的权限。你可以输入登录密码授予 Charles 该权限。你也可以忽略该请求,然后在需要将 Charles 设置成系统代理时,选择菜单中的 “Proxy” -> “Mac OS Proxy” 来将 Charles 设置成系统代理。如下所示:
设置Mac OS Proxy后,可以再检查Mac的WIFI代理设置。默认情况下网页代理(HTTP)和安全网页代理(HTTPS)选项中网络代理服务器显示为127.0.0.1端口为8888
到了这一步,正常情况下,你的PC就可以捕获到HTTP请求了,若还是无法正常捕获,检查WIFI代理是否设置了自动代理配置,若设置了会导致无法捕获到Chrome 和 Firefox 浏览器的请求,使用时可以先取消勾选该选项
移动端抓包
这里的抓包教程以iPhone为例子,安卓操作步骤与iPhone一致。首先需要将 Charles 的代理功能打开。在 Charles 的菜单栏上选择 “Proxy”->”Proxy Settings”,填入代理端口 8888,并且勾上 “Enable transparent HTTP proxying” 就完成了在 Charles 上的设置。如下图所示:
获取 Charles 运行所在电脑的 IP 地址,Charles 的顶部菜单的 “Help”->”Local IP Address”,即可在弹出的对话框中看到 IP 地址,如下图所示:
在 iPhone 的 “ 设置 “->” 无线局域网 “ 中,可以看到当前连接的 WIFI 名,通过点击右边的详情键,可以看到当前连接上的 WIFI的详细信息,包括 IP 地址,子网掩码等信息。在其最底部有「HTTP 代理」一项,我们将其切换成「手动」,然后填上 Charles 运行所在的电脑的 IP(见上张图片),以及端口号 8888,如下图所示:
设置好之后,我们打开 iPhone 上的任意需要网络通讯的程序(如手机上百度APP),就可以看到 Charles 弹出 iPhone 请求连接的确认菜单(如下图所示),点击 “Allow” 即可完成设置。现在就可以进行HTTP抓包了,如果还想再进行HTTPS抓包,需要安装和信任对应的证书
HTTPS 抓包
上面PC端与移动端抓包步骤设置好以后,Charles就可以正常捕获HTTP请求了,但是现在还无法解析HTTPS请求。如果还想解析HTTPS请求,需要在PC端和手机端安装证书
(1)PC端安装证书
点击 Charles 的顶部菜单,选择 “Help” -> “SSL Proxying” -> “Install Charles Root Certificate”,然后输入系统的帐号密码,即可在 KeyChain 看到添加好的证书。如下图所示:
然后再进行信任证书,在 Mac 上的“钥匙串访问” App 中,选择其中一个钥匙串列表中的钥匙串,然后连按一个证书,设置Charles的证书为始终信任
完成以上步骤,你的MAC就可以正常抓取和解析HTTPS协议了
证书过期处理方式,当我们使用Charles超过两年以上,Charles Root证书过期,可以通过下方这种方式重置并重新安装证书
(2)移动端安装证书
点击 Charles 的顶部菜单,选择 “Help” -> “SSL Proxying” -> “Install Charles Root Certificate on a Mobile Device or Remote Browser”
弹出提示框,上面有代理的IP与端口,以及下载证书的地址
拿出手机,以安卓为例子。打开WIFI将代理调整为手动,然后输入charles弹出来的主机ip,再将端口号输入:8888
-
下载证书:点击确认后Charles会出现连接是否允许的选项,点击allow,然后就可以在手机浏览器输入
chls.pro/ssl
下载证书 -
安装与信任证书:
安卓手机(华为)安装证书的方式
【设置-安全-更多安全设置-加密和凭据-从存储设备安装-证书的路径】
注意:证书用途一定要选择VPN和应用,不然华为手机无法信任用户安装的证书IOS信任证书的方式【设置-通用-关于本机-证书信任设置】
Charles 常用功能
重复请求
在测试过程中,有时候需要对服务器重复相同发送请求,用于定位服务器问题或者压力测试,在请求上双击右键菜单,点击Repeat按钮就可以重复发送请求
点击Repeat Advanced… ,还可以设置重复发送的次数,是否多线程发送,以及每次发送的时间间隔
模拟弱网
在做软件测试的时候,我们常常需要模拟慢速网络或者高延迟的网络,以测试在弱网下,APP的各个功能是否正常使用,以及是否有对应的网络提示
在 Charles 的菜单上,选择 “Proxy”->”Throttle Setting” 项,在之后弹出的对话框中,我们可以勾选上 “Enable Throttling”,并且可以设置 Throttle Preset 的类型,可以模拟3G或者其他指定kbps 的网络,设置下载和上传的速率。如下图所示:
修改请求和响应
在测试时,我们时常会重定向请求的地址,以及修改请求或者响应的内容。Charles提供了MAP、Rewrite、Breakpoints三大功能来实现
- Map 功能适合长期地将某一些请求重定向到另一个网络地址或本地文件
- Rewrite 功能适合对网络请求进行一些正则替换
- Breakpoints 功能适合做一些临时性的修改
MAP
Map功能分为Map Remote和Map Local。Map Remote 是将指定的网络请求重定向到另一个网址请求地址,Map Local 是将响应的内容重定向到本地文件
在 Charles 的菜单中,选择 “Tools”->”Map Remote” 或 “Map Local” 即可进入到相应功能的设置页面
对于 Map Remote 功能,分别填写网络重定向的源地址和目的地址,对于不需要限制的条件,可以留空。下图是一个示例,我将所有 baidu.baidu.com(线上地址)的请求重定向到了 11.102.135.33:8505(线下测试地址)
对于 Map Local 功能,我们需要填写的重定向的源地址和本地的目标文件。对于有一些复杂的网络请求结果,我们可以先使用 Charles 提供的 “Save Response…” 功能,将请求结果保存到本地(如下图所示),然后稍加修改(比如修改某个返回字段的数据),成为我们的目标映射文件
将一个指定的网络请求通过 Map Local 功能映射到了本地的一个经过修改的文件中,图中的Map From就是源请求地址,而Map To 就是本地的返回结果文件
Map Local 在使用的时候,有一个潜在的问题,就是其返回的 HTTP Response Header 与正常的请求并不一样。这个时候如果客户端校验了 HTTP Response Header 中的部分内容,就会使得该功能失效。解决办法是同时使用 Map Local 以下面提到的 Rewrite 功能,将相关的 HTTP 头 Rewrite 成我们希望的内容
在测试时,我们通常有线上和线下两套环境,而我们的APP直接打开是请求的线上环境,这时候就需要通过Charles的Map Remote功能,实现重定向请求到线下环境进行测试。也可以使用Map Local 来修改响应结果
Rewrite
修改请求或者返回结果Body或者Header内容,支持正则表达式。
Rewrite还可以和Map Remote配合使用。即先重定向地址,然后修改请求头或返回结果等,注意如果需要在Map Remote勾选Preserve host in header fields,不然Rewrite无法命中
Breakpoints
上面提供的 Rewrite 功能最适合做批量和长期的替换,如果只是想临时替换一次,可以 Breakpoints 功能。
Breakpoints 功能类似我们在 Xcode 中设置的断点一样,当指定的网络请求发生时,Charles 会截获该请求。勾选Breakpoints后,可以点击repeat,打开断点调试面板后,点击add 临时修改网络请求的请求/返回内容,然后点击Execute执行即可
反向代理
Charles 的反向代理功能允许我们将本地的端口映射到远程的另一个端口上。例如,在下图中,我将本机的 65383 端口映射到了远程(www.baidu.com)的80端口上了。这样,当我访问本地的 65383 端口时,实际返回的内容会由 www.baidu.com 的 80 端口提供
好了,以上就是Charles教程的全部内容,它是我们测试工程师几乎必备的工具,用它来模拟弱网,重定向和修改请求都是非常方便的
整理不易,辛苦大家点个【赞】,后面更多精彩教程等着你