Charles (http://www.charlesproxy.com)是在 Mac 下常用的截取网络封包的工具。Charles 通过将自己设置成系统的网络访问代理服务器,使得所有的网络访问请求都通过它来完成,从而实现了网络封包的截取和分析。
1、Charles 简介
Charles 是收费软件,可以免费试用 30 天。试用期过后,未付费的用户仍然可以继续使用,但是每次使用时间不能超过 30 分钟,并且启动时将会有 10 秒钟的延时。
因此,该付费方案对广大用户还是相当友好的,即使你长期不付费,也能使用完整的软件功能。只是当你需要长时间进行封包调试时,会因为 Charles 强制关闭而受到影响。
Charles 主要的功能包括:
-
- 支持 SSL 代理。可以截取分析 SSL 的请求
-
- 支持流量控制。可以拟慢速网络,以及等待时间(latency)较长的请求。
-
- 支持 AJAX 调试。可以自动将 JSON 或 XML 数据格式化,方便査看。
-
- 支持 AMF 调试。可以将 Flash Remoting 或 Flex Remoting 信息格式化,方便査看。
-
- 支持重发网络请求,方便后端调试。
-
- 支持修改网络请求参数。
-
- 支持网络请求的截获和动态修改。
-
- 检査 HTML、CSS 和 RSS 内容是否符合 W3C 标准(http://validator.w3.org)
2、Charles 的安装和使用
-
2.1 安装 Charles
- 1、去Charles的官方网站(http://www.charlesproxy.com)下载最新版的Charles安装包,它是个 dmg 后缀的文件。打开后将 Charles 拖到 Application 目录下即完成安装。
- 2、Charles4.0.2 百度网盘链接:https://pan.baidu.com/s/16Dy3iT21GzMbdbKL_kmlcA 密码:3ggf
2.2、在Mac上安装证书文件( SSL 证书)
如果你需要截取分析 SSL 协议相关的内容,那么需要安装 Charles 的 CA 证书。具体步骤如:
有两种方法:
第一种:
- 2.2.1.1、去 https://www.charlesproxy.com/ssl.zip 下载CA证书文件。
-
2.2.1.2、 解压该 zip 文件后,双击其中的 .crt 文件,这时候在弹出的菜单中选择“总是信任”按钮,如下图所示:
-
2.2.1.3、从钥匙串访问中即可看到添加成功的证书,如下图所示:
第二种:
-
2.2.2.1、打开Charles软件,找到Proxy菜单后打开Proxy Settings配置项,勾选图示中的相关选项
2.2.2.2、找到Help菜单栏中的SSL Proxying,选择Install Charles Root Certificate,按照提示完成证书的安装工作
-
2.2.2.3、刚安装之后的证书,是不被系统信任的,将其改成系统信任方式:右键选中Charles证书文件,点击“显示简介”,将信任设置改为“始终信任”模式即可
此时可以看到Charles证书已经被系统信任了,至此Mac电脑端的证书配置已经完成
问题:当Charles抓取HTTPS请求时,经过上面的配置后,当访问https站点时,会出现如下的情况:
此时就需要下面的额外配置:
在iPhone上安装Charles证书:
1、打开iPhone的无线局域网连接,连上和macOS相同的热点,并在iPhone上配置代理地址为macOS的IP地址,端口号默认为8888.
-
2、在macOS打开Charles->Help->SSL Proxying->Install Charles Root Certificate on a Mobile Device。
3、iPhone手机连接电脑代理后,打开手机上的safari浏览器,输入网址:chls.pro/ssl,按提示安装证书。
4、手机弹出提示:此网站正尝试打开“设置”已向您显示一个配置描述文件。您要允许吗?忽略|允许,选择允许,安装描述文件,并信任
-
5、iOS10.3以上的手机需要在:设置→ 通用 → 关于本机 → 证书信任设置→ 找到charles proxy CA证书,打开信任即可
6、还需要针对指定网站开启对https的抓取:
Charles->Proxy->SSL Proxying Settings->勾选Enable SSL Proxying,添加需要抓取的HTTPS地址,端口为443, 通配所有的https请求,然后就能抓到https包了
抓包完毕后,不要忘记把添加需要抓取的HTTPS地址,端口为443 的移除,不移除浏览器出于安全性考虑有可能出现浏览器打不开的情况。
3、Charles 主界面介绍
Charles 主要提供两种査看封包的视图,分别名为Structure和Sequence,它们的功能分别为:
-
- Structure 视图:将网络请求按访问的域名分类。
-
- Sequence 视图:将网络请求按访问的时间排序。
大家可以根据具体的需要在这两种视图之间来回切换。
对于某一个具体的网络请求,你可以查看其详细的请求内容和响应内容。如果响应内容是 JSON 格式的,那么 Charles 可以自动帮你将 JSON 内容格式化,方便你看。
4、 使用Charles协助iOS 开发
- 4.1、过滤网络请求
通常情况下,我们需要对网络请求进行过滤,只监控向指定目录服务器上发送的请求。对于这种需求,我们有两种办法来设置:
1、在主界面的中部的 Filter 栏中填入需要过滤出来的关键字。例如我们的服务器的地址是 https://www.yuantiku.com ,那么只需要在 Filter 栏中填入yuantiku即可。
-
2、在 Charles 的菜单栏选择“Proxy”→“Recording Settings”,然后选择 Include 栏,选择添加一个项目,然后填入需要监控的协议、主机地址、端口号。这样就可以只載取目标网站的封包了,如下图所示:
通常情况下:我们使用方法 1 做一些临时性的封包过滤,使用方法 2 做一些经常性的封包过滤
4.2、 模拟慢速网络
在做 iphone 开发的时候,我们常常需要模拟慢速网络或者高延迟的网络,以测试在移动网络下应用表现是否正常,Charles对此需求提供了很好的支持。
在 Charles 的菜单上,选择“Proy”→" Throttle Setting”项,在弹出的对话框中,我们可以
勾选上“Enable Throttling”,并且。可以设置 Throttle Preset 的类型,如下图所示
如果只想模拟指定网站的慢速网络,可以再勾选上图中的“Only for selected hosts”项,然后在对话框的下半部分设置中增加指定的 Hosts 项即可。
-
4.3、 高级功能
- 4.3.1、 截取 SSL 信息
Charles 默认并不截取 SSL 的信息,如果你想截取某个网站上所有的 SSL 网络请求,可以在该请求上单击右键,选择“SSL Proxying“,如下图所示:
- 4.3.2、 修改网络请求内容
有些时候为了调试服务器的接口,我们需要反复尝试不同参数的网络请求。Charles 可以方便地提供网络请求的修改和重发功能。只需要在以往的网络请求上单击右键,选择“Edit 可创建一个可编辑的网络请求,如下图所示:
我们可以修改该请求的任何信息,包括 URL 地址、端口、参数等,之后单击“Execute”按钮即可发送该修改后的网络请求,如下图所示。Charles 支持我们多次修改和发送该请求,这对于我们调试与服务器端间的接口非常方便。
- 4.3.3、修改服务器返回内容
有些时候我们想让服务器返回一些指定的内容,方便我们在一些特殊情况下的调试。例如,列表页面为空的情况,数据异常的情况,或部分耗时的网络请求超时的情况等。如果没有 Charles,要服务器配合构造相应的数据显得比较麻烦。这个时候,使用 Charles 相关的功能就可以满足我们的需求。
根据具体的需求,Charles 提供了 Map 功能、Rewrite 功能及 Breakpoints 功能,它们都可以达到修改服务器返回内容的目的。这三者在功能上的差异是:
- Map 功能适合长期地将某一些请求重定向到另一个网络地址或本地文件。
- Rewrite 功能适合对网络请求进行一些正则替换
- Breakpoints 功能适合做一些临时性的修改。
- 4.4、 Map功能
Charles 的 Map 功能分 Map Remote 和 Map Local 两种,顾名思义,Map Remote 是将指定的网是将指定的网络请求重定向到本地文作。
在 Charles 的菜单中,选择“Tools”→“Map Remote”或“Map Local”即可进入相应功能的设置页面,如下图所示:
对于 Map Remote 功能,我们需要分别填写网络重定向的源地址和目的地址,对于不需要限制的条件,可以留空。下图是一个示例,将所有 ytkl.yuanku.ws(测试服务器)的请求重定向到了 www.yuantiku.com(线上服务器)。
对于 Map Local 功能,我们需要填写重定向的源地址和本地的目标文件。对于一些复杂的网络请求结果,我们可以先使用 Charles 提供的“Save Response”功能,将请求结果保存到本地,如下图所示。然后稍加修改,使其成为我们的目标映射文件。
下图是一个示例,将一个指定的网络请求通过 Map Local 功能映射到了本地的一个经过修改的文件中。
- 4.5、 Rewrite 功能
Rewrite 功能适合对某一类网络请求进行一些正则替换,以达到修改结果的目的。
例如,我们的客户端有一个 API 请求是获得用户昵称,而我当前的昵称是“tangqiaoboy",如下图所示:
我们想试着直接修改网络返回值,将“tangqiaoboy”换成“iosboy”。于是我们启用 Rewrite 功能,然后按下图进行设置:
完成设置之后,我们就可以从 Charles 中看到,之后的 API 获得的昵称被自动 Rewrite 成了“iosboy”,如下图所示
- 4.6、Breakpoints 功能
上面提供的Rewrite 功能最适合做批量和长期的替换,但是很多时侯,我们只是想临时修改次网络请求结果,使用 Rewrite 功能虽然也可以达到目的,但是过于麻烦,对于临时性的修改,我们最好使用 Breakpoints 功能。
Breakpoints 功能类似我们在 Xcode 中设置的断点,当指定的网络请求发生时,Charles 会截获该请求,这个时候,我们可以在 Charles 中临时修改网络请求的返回内容。
下图是我们临时修改获取用户信息的 API,将用户的昵称进行了更改,修改完成后单击“Execute”按钮就可以让网络请求继续进行:
要注意的是,在使用 Breakpoints 功能将网络请求截获并修改的过程中,整个网络请求的计时并不会暂停,所以长时间的暂停可能导致客户端的请求超时。
5、总结
通过 Charles 软件,我们可以很方便地在日常开发中截取和调试网络请求内容,分析封包协议,以及模拟慢速网络。用好 Charles 可以极大地方便我们对于带有网络请求的应用的开发和调试。
主要参考文献:
Charles 主要的功能列表
Charles 官方网站