Charles小书

前言

日常开发中，经常会有与App联调的工作，除了iOS的Safari和Android的adb，用来查看console的信息，往往还需要抓取一下HTTP的数据包，用来确认网络情况。

概述

Charles就是一款非常优秀的跨平台网络代理工具，支持Windows、Mac、Linux，不过最重要的是它的功能非常强大，当然这么好的工具当然不是免费的，官方需要 $30 / license， 不过通过一些合作的代理商可能会便宜一些。

功能特点

• 支持SSL代理 - 以纯文本格式查看SSL请求和响应；
• 支持限制带宽 - 模拟低速的移动网络或者网络延迟的使用场景；
• 支持AJAX调试 - 以树或文本的形式查看XML和JSON请求和响应；
• 支持AMF调试 - 以Flash的形式查看Flash Remoting / Flex Remoting消息的内容；
• 支持重复请求以便于后端开发；
• 支持编辑Request参数；
• 支持拦截和编辑Request和Response的内容；
• 支持检查HTML，CSS和RSS内容是否符合W3C标准。

基本介绍

如何安装本文就不累述了，官网介绍的很详细了，也很简单，对照着自己的环境，下载安装包安装即可。

Charles的界面很简洁，分为Structure和Sequence模式，这2种模式可以获取的信息是差不多的，不过Sequence模式下多了一个便捷的Filter输入框，可以快速的过滤出来当前需要的查看的网络请求。

如何使用

Charles启动时默认会抓取本机的网络请求，所以一开始，你可能会看到很多网络请求的信息，如果你想停止或者清理，可以用工具条上的便捷键来操作：

下面就说说在Mac下如何通过Charles抓取移动设备上的网络请求。

主要步骤分为以下几步：

1. 设置并开启Charles代理；
2. 配置移动设备代理；
3. 如果需要抓取HTTPS，则需要配置SSL证书；

设置并开启Charles代理

打开菜单，点击 Proxy 一栏，就可以看到 Proxy Settings... 的选项：

接着在 Port: 一栏中填入代理的端口号，这里填写的是 8888：

点击 OK 即可生效设置，然后再打开菜单，点击 Help 一栏，找到到 Local IP Address 获取本机当前局域网中的IP地址：

配置移动设备代理

以iOS为例，操作步骤 设置 -> 无线局域网 -> wifi设置(叹号图标) -> HTTP代理 -> 配置代理 -> 手动 -> 服务器(上一步获取的本机局域网IP) 和 端口(上一步设置的端口号)**：

如果一切顺利，你的本机Charles会有一个提示出现：

选择 Allow 就可以代理你的iOS了：

如果你仅仅是需要HTTP的代理，那么上述的应该就可以满足了，不过随着HTTPS的推广，就需要额外的设置SSL证书来获取HTTPS的内容了。

配置SSL证书，抓取HTTPS

如果我们在自己的服务上已经配置了SSL，开启了HTTPS，那么用HTTP的方式抓包就只能看到一堆的乱码了。

这时候，不过我们可以用 Charles 作为中间人来进行 HTTPS 的代理，用它的根证书动态签发一张证书，同时让你的浏览器收不到服务端证书的，然后 Charles 来伪装服务端的证书，你的浏览器接受 Charles 的证书用于SSL加密，而 Charles 仍然用目标服务器的 SSL 证书与服务端进行通信，所以Charles就可以用它自己的根证书来解码你发出的请求了，如果想了解的更多，可以去找找有关于中间人攻击的资料。

具体到操作其实就3步：

1. 在本机安装 Charles 根证书；
2. 在客户端安装 Charles 提供的证书；
3. 开启Charles的SSL Proxying；

在本机安装 Charles 根证书

Charles提供了非常简单的方式来安装，你只需要打开菜单，点击 Help 一栏，选中 SSL Proxying 就可以看到 Install Charles Root Certificate 的选项：

点击安装以后，会打开本地的 Keychain Access 提示是否添加，选择 Add 即可。

由于Charles的提供的SSL根证书是它自己颁发的，并未经过权威机构的认证，所以，有时候会经常提示证书的安全性问题，这个时候，你可以在 Keychain Access 中找到这个证书，并在 Trust 一项中选择 Always Trust即可：

在客户端安装 Charles 提供的证书

打开菜单，点击 Help 一栏，选中 SSL Proxying 就可以看到 Install Charles Root Certificate on a Mobile Device or Remote Browser 的选项，它会提示你用需要连接的设备去访问 chls.pro/ssl 这个URL：

客户端在访问 chls.pro/ssl，会得到一个证书文件，不论是iOS还是Android，都会进入证书的添加环节，下面以iOS为例：

这里需要注意一点，iOS 10.3以后的系统，需要在 证书信任设置 中启用才行（Charles-ssl-certificates），操作步骤 设置 -> 通用 -> 关于本机 -> 证书信任设置 -> 开启对应证书：

开启Charles的SSL Proxying

打开Charles的菜单，点击 Proxy 一栏，就可以看到 SSL Proxy Settings... 的选项，然后增加一项规则即可：

好了，本文就先介绍到这，最多也就是操作6步，你就可以通过Charles截取HTTPS的数据包了，当然Charles的功能远不止如此，更多的惊喜，你可以慢慢的去挖掘。

---

参考

• charlesproxy
• 细说 Charles 配置 HTTPS 代理的乱码问题
• Charles 抓包配置流程(Charles4.1.2 iOS)

本文先发布于我的个人博客《Charles小书》，后续如有更新，可以查看原文。