Charles 是很棒棒的跨平台代理调试工具, 能帮助你快速的定位网络问题
介绍
Charles 提供了很多很强大的功能, 能满足很多场景下的调试需求
查看网络请求详细的 request 和 response
拦截修改 request 和 response
Request mapping, remap 网络请求的地址
Bandwidth Throttling 模拟慢速网络
网络请求 黑白名单
其它 key feature
安装
作为一个正经的教程, 只能建议你去买官方的 license : Official Charles Website
幸运的是, 我们大天朝人民可以在 Lizhi.io 折扣购买正版 ~
Charles 默认下载后可以永久免费使用试用版, 和正式版相比, 有如下限制 :
启动需要等待 30s
每 30 分钟 app 自动关闭
安装 Charles 就是拖拽而已, 不解释
第一次打开 Charles, 他会提示请求设置系统网络代理的权限, 如果不允许的话, 后面的功能没法使用
配置
1. HTTP Proxy
打开 Charles 后, macOS proxy 是默认选中的
然后打开 http://httpbin.org/image
可以看到网络请求像下图 :
在 Structure 模式 : 网络请求按照 host 来组织
在 Sequence 模式 : 网络请求按执行顺序排列
2. 配置 HTTPS
目前, 大部分 App 或者网站都在使用 HTTPS 协议, 所以需要配置 Charles 支持 HTTPS 请求的代理
Charles SSL proxy feature
-
开启 HTTPS proxy 之前 :
不能看到网络请求的 url, 也不能看到详细的 request 和 response
-
配置好之后 :
所以的数据清晰可见 ~
选择
Install Charles Root Certificate, 系统钥匙串会自动打开, 然后输入密码信任这个根证书为某个域名开启 HTTPS 调试
6 ~
3. iOS & Android
iOS 和 Android 真机, 需要额外安装一个根证书 ~
根据提示, 用Safari 浏览器浏览chls.pro/ssl, 然后安装证书
iOS 11 以上, 需要额外的操作 : 信任证书
安装完成之后, 需要将真机和电脑连接到同一个 局域网( wifi 信号) 中
- 和 Mac 连接到同一个 wifi
- 点击最右边的
!进入高级设置
- 选择
配置代理
选择手动, 然后输入 Mac 的 ip 地址, 和 Charles 代理的端口 (默认是 8888)
可以从
系统设置 => 网络查看本机的 ip 地址
基本操作
1. 过滤网络请求
[图片上传失败...(image-99c8ce-1529141512655)]
使用关键词去 Filter 需要的网络请求
2. 模拟慢速网络
开启 Throttle 在 Proxy -> Throttle Settings
3. 重复发送请求
重复一次, 或者配置并发多次请求
4. 黑/白 名单
允许或者禁止 制定 host 的请求
高端玩法
1. Map Remote
右键点击某个请求, 启用 map remote 功能
这个配置, 将 匹配 https://slack.com/clog/tracks/* 的请求 map 到 https://mywebsite.com/clog/tracks/*
这个功能在需要切换 Production QA Development 环境时很好用 ~
更多的设置可以在这里看到
2. Map Local
同样的, 右键点击某个请求, 为某个 request 启用 Map local 功能
现在, 所有匹配https://slack.com/clog/track/* 的请求将会被劫持, 网络请求的 response 会是Users/Shawn/Downloads/fake.json 文件中的内容
当需要一直修改某个请求的内容或者做 Mock server 时很有用 ~
3. 断点 !
右键点击, 为某个 request 启用断点 功能, 或者查看更多的设置 : Proxy -> Breakpoint Settings
现在, 所有匹配Get https://jianshu.com/* 的请求将会被劫持
现在 浏览 https://jianshu.com, Charles 会自动停在断点, 并前置当前窗口
可以编辑 request, 修改请求参数, 请求头, cookie, 或者终止请求等,
随后点击 Execute
Charles 获取到服务端的 response 后, 进入 response 断点
我们可以查看 response 的详情, jianshu.com 的 response 应该是 HTML 数据, 然后点击 Execute 让整个网络请求继续执行
很秀的功能 ~
P.S.
1. Charles 怎样实现抓取网络请求 ?
man-in-the-middle
中间人攻击
简而言之 :
正常的网络请求
Charles 中间人攻击
server 代表我们请求的资源, 如
google.combrowser 代表我们发起请求的手机 App 浏览器等
Local Proxy 是代理工具, 如 Charles Wireshark whistle
主要流程 :
Browser 发送请求
Charles 接收请求, 并转发给真正的 server
Charles 接收真正 server 返回的 response, 并转发给 browser
这样, Charles 能同时获得 browser 和 server 发送和返回的数据, 也就实现了抓包的功能
流程看起来很简单, 实际上, HTTPS = HTTP + SSL/TLS, 是一个安全的通信协议
所以前面繁杂的根证书等配置, 来 hack 这层安全的协议
2. SSL Pinning
随便信任未知来源的 证书 是非常危险的操作, 这将允许证书的所有者拦截查看你所有的 HTTPS 请求内容
那么, 有什么办法防止被 MITM 么 ?
在 web 端是没有办法避免 MITM 的
在移动端, 比如 facebook 的 iOS App 采用 SSL Pinning 的方式防止 MITM 攻击
办法也很简单, 将服务端正确的证书打包到 iOS 客户端 App 中, 每次网络连接中, 检查证书是否一致即可
3. 证书
Charles 的证书是成对的, 如果某台手机需要在不同的电脑上抓包, 都需要重新配置对应的证书 ~
FAQ
- 无法通过
chls.pro/ssl安装证书
尝试 Save Charles root certificate 到电脑上, 然后登录 iOS 上自带的邮件客户端, 将证书作为附件, 发送邮件到手机上, 然后使用系统自带的邮件客户端, 打开邮件, 点击附件安装证书
Ref
Charles Proxy Tutorial for iOS
Charles 从入门到精通
Charles Official SSL Certificates
SSL Pinning 总结