Charles 是很棒棒的跨平台代理调试工具, 能帮助你快速的定位网络问题

介绍

Charles 提供了很多很强大的功能, 能满足很多场景下的调试需求

1. 查看网络请求详细的 request 和 response

2. 拦截修改 request 和 response

3. Request mapping, remap 网络请求的地址

4. Bandwidth Throttling 模拟慢速网络

5. 网络请求 黑白名单

6. 其它 key feature

安装

作为一个正经的教程, 只能建议你去买官方的 license : Official Charles Website

幸运的是, 我们大天朝人民可以在 Lizhi.io 折扣购买正版 ~

Charles 默认下载后可以永久免费使用试用版, 和正式版相比, 有如下限制 :

1. 启动需要等待 30s

2. 每 30 分钟 app 自动关闭

安装 Charles 就是拖拽而已, 不解释

第一次打开 Charles, 他会提示请求设置系统网络代理的权限, 如果不允许的话, 后面的功能没法使用

配置

1. HTTP Proxy

打开 Charles 后, macOS proxy 是默认选中的

image

然后打开 http://httpbin.org/image

可以看到网络请求像下图 :

在 Structure 模式 : 网络请求按照 host 来组织

image

在 Sequence 模式 : 网络请求按执行顺序排列

image image

2. 配置 HTTPS

目前, 大部分 App 或者网站都在使用 HTTPS 协议, 所以需要配置 Charles 支持 HTTPS 请求的代理

Charles SSL proxy feature

1. 开启 HTTPS proxy 之前 :

   不能看到网络请求的 url, 也不能看到详细的 request 和 response

image

1. 配置好之后 :

   所以的数据清晰可见 ~

image

---

image

1. 选择 Install Charles Root Certificate , 系统 钥匙串 会自动打开, 然后输入密码信任这个根证书

2. 为某个域名开启 HTTPS 调试

image

6 ~

3. iOS & Android

iOS 和 Android 真机, 需要额外安装一个根证书 ~

image image

根据提示, 用Safari 浏览器浏览chls.pro/ssl, 然后安装证书

image

iOS 11 以上, 需要额外的操作 : 信任证书

image

---

安装完成之后, 需要将真机和电脑连接到同一个 局域网( wifi 信号) 中

1. 和 Mac 连接到同一个 wifi

image

1. 点击最右边的 ! 进入高级设置

image

2. 选择 配置代理

image

3. 选择手动, 然后输入 Mac 的 ip 地址, 和 Charles 代理的端口 (默认是 8888)

4. 可以从 系统设置 => 网络 查看本机的 ip 地址

image

基本操作

1. 过滤网络请求

[图片上传失败...(image-99c8ce-1529141512655)]

使用关键词去 Filter 需要的网络请求

2. 模拟慢速网络

开启 Throttle 在 Proxy -> Throttle Settings

image

3. 重复发送请求

image

重复一次, 或者配置并发多次请求

4. 黑/白 名单

image

允许或者禁止 制定 host 的请求

高端玩法

1. Map Remote

右键点击某个请求, 启用 map remote 功能

image image

这个配置, 将 匹配 https://slack.com/clog/tracks/* 的请求 map 到 https://mywebsite.com/clog/tracks/*

这个功能在需要切换 Production QA Development 环境时很好用 ~

image

更多的设置可以在这里看到

2. Map Local

同样的, 右键点击某个请求, 为某个 request 启用 Map local 功能

image

现在, 所有匹配https://slack.com/clog/track/* 的请求将会被劫持, 网络请求的 response 会是Users/Shawn/Downloads/fake.json 文件中的内容

当需要一直修改某个请求的内容或者做 Mock server 时很有用 ~

3. 断点 !

右键点击, 为某个 request 启用断点 功能, 或者查看更多的设置 : Proxy -> Breakpoint Settings

image

现在, 所有匹配Get https://jianshu.com/* 的请求将会被劫持

image

现在 浏览 https://jianshu.com, Charles 会自动停在断点, 并前置当前窗口

可以编辑 request, 修改请求参数, 请求头, cookie, 或者终止请求等,

随后点击 Execute

image

Charles 获取到服务端的 response 后, 进入 response 断点

我们可以查看 response 的详情, jianshu.com 的 response 应该是 HTML 数据, 然后点击 Execute 让整个网络请求继续执行

很秀的功能 ~

P.S.

1. Charles 怎样实现抓取网络请求 ?

man-in-the-middle

中间人攻击

简而言之 :

正常的网络请求

Charles 中间人攻击

1. server 代表我们请求的资源, 如 google.com

2. browser 代表我们发起请求的手机 App 浏览器等

3. Local Proxy 是代理工具, 如 Charles Wireshark whistle

主要流程 :

1. Browser 发送请求

2. Charles 接收请求, 并转发给真正的 server

3. Charles 接收真正 server 返回的 response, 并转发给 browser

这样, Charles 能同时获得 browser 和 server 发送和返回的数据, 也就实现了抓包的功能

流程看起来很简单, 实际上, HTTPS = HTTP + SSL/TLS, 是一个安全的通信协议

所以前面繁杂的根证书等配置, 来 hack 这层安全的协议

2. SSL Pinning

随便信任未知来源的 证书 是非常危险的操作, 这将允许证书的所有者拦截查看你所有的 HTTPS 请求内容

那么, 有什么办法防止被 MITM 么 ?

1. 在 web 端是没有办法避免 MITM 的

2. 在移动端, 比如 facebook 的 iOS App 采用 SSL Pinning 的方式防止 MITM 攻击

办法也很简单, 将服务端正确的证书打包到 iOS 客户端 App 中, 每次网络连接中, 检查证书是否一致即可

3. 证书

Charles 的证书是成对的, 如果某台手机需要在不同的电脑上抓包, 都需要重新配置对应的证书 ~

FAQ

1. 无法通过 chls.pro/ssl 安装证书

尝试 Save Charles root certificate 到电脑上, 然后登录 iOS 上自带的邮件客户端, 将证书作为附件, 发送邮件到手机上, 然后使用系统自带的邮件客户端, 打开邮件, 点击附件安装证书

Ref

• Charles Proxy Tutorial for iOS

• Charles 从入门到精通

• Charles Official SSL Certificates

• SSL Pinning 总结