iOS - 网络封包分析工具 Charles

Charles (http://www.charlesproxy.com)是在 Mac 下常用的截取网络封包的工具。Charles 通过将自己设置成系统的网络访问代理服务器,使得所有的网络访问请求都通过它来完成,从而实现了网络封包的截取和分析。

1、Charles 简介
iOS - 网络封包分析工具 Charles_第1张图片

Charles 是收费软件,可以免费试用 30 天。试用期过后,未付费的用户仍然可以继续使用,但是每次使用时间不能超过 30 分钟,并且启动时将会有 10 秒钟的延时。

因此,该付费方案对广大用户还是相当友好的,即使你长期不付费,也能使用完整的软件功能。只是当你需要长时间进行封包调试时,会因为 Charles 强制关闭而受到影响。
Charles 主要的功能包括:

    1. 支持 SSL 代理。可以截取分析 SSL 的请求
    1. 支持流量控制。可以拟慢速网络,以及等待时间(latency)较长的请求。
    1. 支持 AJAX 调试。可以自动将 JSON 或 XML 数据格式化,方便査看。
    1. 支持 AMF 调试。可以将 Flash Remoting 或 Flex Remoting 信息格式化,方便査看。
    1. 支持重发网络请求,方便后端调试。
    1. 支持修改网络请求参数
    1. 支持网络请求的截获和动态修改
    1. 检査 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 文件,这时候在弹出的菜单中选择“总是信任”按钮,如下图所示:


    iOS - 网络封包分析工具 Charles_第2张图片
  • 2.2.1.3、从钥匙串访问中即可看到添加成功的证书,如下图所示:


    iOS - 网络封包分析工具 Charles_第3张图片
    12FE2B0F-1C79-4334-AA92-01D5909D18EF.png

第二种:

  • 2.2.2.1、打开Charles软件,找到Proxy菜单后打开Proxy Settings配置项,勾选图示中的相关选项


    iOS - 网络封包分析工具 Charles_第4张图片

    iOS - 网络封包分析工具 Charles_第5张图片
  • 2.2.2.2、找到Help菜单栏中的SSL Proxying,选择Install Charles Root Certificate,按照提示完成证书的安装工作

iOS - 网络封包分析工具 Charles_第6张图片
  • 2.2.2.3、刚安装之后的证书,是不被系统信任的,将其改成系统信任方式:右键选中Charles证书文件,点击“显示简介”,将信任设置改为“始终信任”模式即可


    iOS - 网络封包分析工具 Charles_第7张图片

此时可以看到Charles证书已经被系统信任了,至此Mac电脑端的证书配置已经完成

问题:当Charles抓取HTTPS请求时,经过上面的配置后,当访问https站点时,会出现如下的情况:

iOS - 网络封包分析工具 Charles_第8张图片
iOS - 网络封包分析工具 Charles_第9张图片
此时就需要下面的额外配置:
在iPhone上安装Charles证书:
  • 1、打开iPhone的无线局域网连接,连上和macOS相同的热点,并在iPhone上配置代理地址为macOS的IP地址,端口号默认为8888.

  • 2、在macOS打开Charles->Help->SSL Proxying->Install Charles Root Certificate on a Mobile Device。


    iOS - 网络封包分析工具 Charles_第10张图片
  • 3、iPhone手机连接电脑代理后,打开手机上的safari浏览器,输入网址:chls.pro/ssl,按提示安装证书。

  • 4、手机弹出提示:此网站正尝试打开“设置”已向您显示一个配置描述文件。您要允许吗?忽略|允许,选择允许,安装描述文件,并信任

  • 5、iOS10.3以上的手机需要在:设置→ 通用 → 关于本机 → 证书信任设置→ 找到charles proxy CA证书,打开信任即可

    iOS - 网络封包分析工具 Charles_第11张图片

  • 6、还需要针对指定网站开启对https的抓取:
    Charles->Proxy->SSL Proxying Settings->勾选Enable SSL Proxying,添加需要抓取的HTTPS地址,端口为443, 通配所有的https请求,然后就能抓到https包了

iOS - 网络封包分析工具 Charles_第12张图片
iOS - 网络封包分析工具 Charles_第13张图片
image

抓包完毕后,不要忘记把添加需要抓取的HTTPS地址,端口为443 的移除,不移除浏览器出于安全性考虑有可能出现浏览器打不开的情况。

3、Charles 主界面介绍
iOS - 网络封包分析工具 Charles_第14张图片

Charles 主要提供两种査看封包的视图,分别名为StructureSequence,它们的功能分别为:

    1. Structure 视图:将网络请求按访问的域名分类。
    1. 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 的类型,如下图所示


iOS - 网络封包分析工具 Charles_第15张图片

如果只想模拟指定网站的慢速网络,可以再勾选上图中的“Only for selected hosts”项,然后在对话框的下半部分设置中增加指定的 Hosts 项即可。

  • 4.3、 高级功能

    • 4.3.1、 截取 SSL 信息

Charles 默认并不截取 SSL 的信息,如果你想截取某个网站上所有的 SSL 网络请求,可以在该请求上单击右键,选择“SSL Proxying“,如下图所示:

iOS - 网络封包分析工具 Charles_第16张图片
  • 4.3.2、 修改网络请求内容

有些时候为了调试服务器的接口,我们需要反复尝试不同参数的网络请求。Charles 可以方便地提供网络请求的修改和重发功能。只需要在以往的网络请求上单击右键,选择“Edit 可创建一个可编辑的网络请求,如下图所示:


iOS - 网络封包分析工具 Charles_第17张图片

我们可以修改该请求的任何信息,包括 URL 地址、端口、参数等,之后单击“Execute”按钮即可发送该修改后的网络请求,如下图所示。Charles 支持我们多次修改和发送该请求,这对于我们调试与服务器端间的接口非常方便。

iOS - 网络封包分析工具 Charles_第18张图片
  • 4.3.3、修改服务器返回内容

有些时候我们想让服务器返回一些指定的内容,方便我们在一些特殊情况下的调试。例如,列表页面为空的情况,数据异常的情况,或部分耗时的网络请求超时的情况等。如果没有 Charles,要服务器配合构造相应的数据显得比较麻烦。这个时候,使用 Charles 相关的功能就可以满足我们的需求。

根据具体的需求,Charles 提供了 Map 功能、Rewrite 功能及 Breakpoints 功能,它们都可以达到修改服务器返回内容的目的。这三者在功能上的差异是:

  1. Map 功能适合长期地将某一些请求重定向到另一个网络地址或本地文件。
  2. Rewrite 功能适合对网络请求进行一些正则替换
  3. Breakpoints 功能适合做一些临时性的修改。
  • 4.4、 Map功能
    Charles 的 Map 功能分 Map Remote 和 Map Local 两种,顾名思义,Map Remote 是将指定的网是将指定的网络请求重定向到本地文作。

在 Charles 的菜单中,选择“Tools”→“Map Remote”或“Map Local”即可进入相应功能的设置页面,如下图所示:


iOS - 网络封包分析工具 Charles_第19张图片

对于 Map Remote 功能,我们需要分别填写网络重定向的源地址和目的地址,对于不需要限制的条件,可以留空。下图是一个示例,将所有 ytkl.yuanku.ws(测试服务器)的请求重定向到了 www.yuantiku.com(线上服务器)。

iOS - 网络封包分析工具 Charles_第20张图片

对于 Map Local 功能,我们需要填写重定向的源地址和本地的目标文件。对于一些复杂的网络请求结果,我们可以先使用 Charles 提供的“Save Response”功能,将请求结果保存到本地,如下图所示。然后稍加修改,使其成为我们的目标映射文件。

iOS - 网络封包分析工具 Charles_第21张图片

下图是一个示例,将一个指定的网络请求通过 Map Local 功能映射到了本地的一个经过修改的文件中。


iOS - 网络封包分析工具 Charles_第22张图片
  • 4.5、 Rewrite 功能

Rewrite 功能适合对某一类网络请求进行一些正则替换,以达到修改结果的目的。

例如,我们的客户端有一个 API 请求是获得用户昵称,而我当前的昵称是“tangqiaoboy",如下图所示:


iOS - 网络封包分析工具 Charles_第23张图片

我们想试着直接修改网络返回值,将“tangqiaoboy”换成“iosboy”。于是我们启用 Rewrite 功能,然后按下图进行设置:


iOS - 网络封包分析工具 Charles_第24张图片

完成设置之后,我们就可以从 Charles 中看到,之后的 API 获得的昵称被自动 Rewrite 成了“iosboy”,如下图所示


iOS - 网络封包分析工具 Charles_第25张图片
  • 4.6、Breakpoints 功能

上面提供的Rewrite 功能最适合做批量和长期的替换,但是很多时侯,我们只是想临时修改次网络请求结果,使用 Rewrite 功能虽然也可以达到目的,但是过于麻烦,对于临时性的修改,我们最好使用 Breakpoints 功能

Breakpoints 功能类似我们在 Xcode 中设置的断点,当指定的网络请求发生时,Charles 会截获该请求,这个时候,我们可以在 Charles 中临时修改网络请求的返回内容。

下图是我们临时修改获取用户信息的 API,将用户的昵称进行了更改,修改完成后单击“Execute”按钮就可以让网络请求继续进行:

iOS - 网络封包分析工具 Charles_第26张图片

要注意的是,在使用 Breakpoints 功能将网络请求截获并修改的过程中,整个网络请求的计时并不会暂停,所以长时间的暂停可能导致客户端的请求超时。

5、总结

通过 Charles 软件,我们可以很方便地在日常开发中截取和调试网络请求内容,分析封包协议,以及模拟慢速网络。用好 Charles 可以极大地方便我们对于带有网络请求的应用的开发和调试。

主要参考文献:
Charles 主要的功能列表
Charles 官方网站
书籍

你可能感兴趣的:(iOS - 网络封包分析工具 Charles)