12月21, 2017

Charles小书

前言

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

概述

Charles-thumb

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输入框,可以快速的过滤出来当前需要的查看的网络请求。

screenshot-sequence

如何使用

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

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

主要步骤分为以下几步:

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

设置并开启Charles代理

打开菜单,点击 Proxy 一栏,就可以看到 Proxy Settings... 的选项: screenshot-setting-proxy

接着在 Port: 一栏中填入代理的端口号,这里填写的是 8888screenshot-proxy-settings

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

screenshot-local-ip-address

配置移动设备代理

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

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

screenshot-charles-allow-tip

选择 Allow 就可以代理你的iOS了: screenshot-charles-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 的选项: screenshot-install-charles-root-certificate

点击安装以后,会打开本地的 Keychain Access 提示是否添加,选择 Add 即可。 screenshot-add-charles-root-certificate

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

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

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

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

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

开启Charles的SSL Proxying

打开Charles的菜单,点击 Proxy 一栏,就可以看到 SSL Proxy Settings... 的选项,然后增加一项规则即可: screenshot-charles-ssl-proxy-settings

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


2018.04.23

Q: Android 提示 键入凭据存储的密码

A: 检查是否设置了锁屏密码,如果没有需要先设置锁屏密码,再次安装chls.pro/ssl下载的证书,输入锁屏密码即可;


参考

本文链接:https://itony.net/post/charlesproxy.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。