Charles的启用
官网
地址:https://www.charlesproxy.com/
介绍
- charles 产品
- charles 主要功能
1. Charles 产品:
-
Charles是在 Mac 下常用的网络封包截取工具,在做移动开发时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析。
-
Charles 通过将自己设置成系统的网络访问代理服务器,使得所有的网络访问请求都通过它来完成,从而实现了网络封包的截取和分析。
-
除了在做移动开发中调试端口外,Charles 也可以用于分析第三方应用的通讯协议。配合 Charles 的 SSL 功能,Charles 还可以分析 Https 协议。
-
Charles 是收费软件,可以免费试用 30 天。试用期过后,未付费的用户仍然可以继续使用,但是每次使用时间不能超过 30 分钟,并且启动时将会有 10 秒种的延时。因此,该付费方案对广大用户还是相当友好的,即使你长期不付费,也能使用完整的软件功能。只是当你需要长时间进行封包调试时,会因为 Charles 强制关闭而遇到影响。
2. Charles 主要功能:
- 截取 Http 和 Https 网络封包
- 支持重发网络请求,方便后端调试
- 支持修改网络请求参数
- 支持网络请求的截获并动态修改
- 支持弱网测试
- 给服务器做压力测试
- 修改服务器返回内容
- 截取 phone 上的网络封包
- 过滤网络请求
适用范围
- 本教程只在 Mac 上进行的正常安装、配置、以及使用
- 后边介绍的移动端抓包也是 IOS 系统的操作方法
- Windows 和 Android 的操作方法,大同小异于,可借鉴于此,不过具体教程需要后续尝试操作后做记录。
安装
- 去下载
- 下载后得到
.dmg
文件,正常按照提示安装 - 如果想要破解版,网上自行查找 破解方法,很多
配置
重点部分:如何配置代理
- Charles 基础配置
- PC 端代理配置
- 移动端代理配置
- 前提
- IOS 手机代理设置
- Android 手机代理设置
1. Charles 基础配置:
操作步骤:
1. Proxy --> Proxy Settings --> 设置代理端口 默认:8888(可更改,如需抓取移动端的包 记得代理端口号要一致)
(图)
2. Proxy --> 选中 macOS Proxy ( 以 macOS 自己作为代理服务器 开启)
(图)
2. PC端 代理配置:
做过 Charles 基础配置 后,此时,Charles 已经可以抓取 pc 端 HTTP 的请求了!
3. 移动端 代理配置:
- 前提:
-
保证手机与Mac连接到了同一局域网
-
Charles 已做过基础配置
-
查看本机 ip 地址
法1: Mac 系统偏好 --> 网络 --> 状态查看 ip
(图)
法2:option + 点击 wifi
(图)
- *IOS 手机代理设置:
- 找到
设置
- 选择
无线网络
- 点击
已连接wifi 后边的 "!"
- 进入
网路设置页
- 选择
配置代理
- 进入
配置代理页
- 选择
手动
- 配置
服务器
:Mac 上已查看到的 ip - 配置
端口
:Charles 上已设置的代理端口,必须保持一致
(图)
- Android 手机代理设置:
- 找到
设置
- 点击
WLAN
- 找到
已连接 wifi
- 进入
网络设置页
(各型号手机进入方式会有所不同,请自行查找使用手机的网络设置页的进入方式) - 选择
代理
- 选择
手动
- 设置
主机名
:Mac 上已查看到的 ip - 设置
端口
:Charles 上已设置的代理端口,必须保持一致
以华为手机为例:
(图)
此时,当手机进行网络请求时,Charles 将弹出是否允许连接此代理(选择允许 allow),之后便可进行http抓包啦!
HTTPS 代理配置
上述配置完成后,会发现抓到的 PC上的网络请求 和 移动端上的网络请求,HTTP请求是可以正常查看 request & response 的,但是抓取到的 https 请求全是乱码,此时就要需要做 https代理(SSL代理)的配置了。
- Charles SSL 代理配置
- Mac 上做 Charles SSL证书认证
- 移动端 之 ios 系统做 Charles SSL证书认证
- 移动端 之 android 系统做 Charles SSL证书认证
Charles SSL 代理配置:
- 菜单点击
Proxy
- 点击
SSL Proxying Settings
- 进入
SSL Proxying Settings 设置页
- 选中
Enable SSL Proxying
- 添加信任地址 【host】:443 ( 全信任的话 可以配置 *:443 )
(图)
此时应该还是查看不到 https 的 request && response, 还需要做 Charles SSL 证书的安装!
1. Mac 上做 Charles SSL证书认证:
安装 与 信任:
-
菜单点击
help
-
选择
SSL Proxying
-
点击
Install Charles Root Certificate
-
此时会出现是否将证书加入到 系统钥匙串中,选择
添加
即可;可能因为版本的原因未出现,可在
钥匙串
中去查找charles-proxy-ssl-certificate.cer 的证书
-
找到证书后,去
信任该证书
-
双击
证书
-
弹窗中展开
信任
-
选择
始终信任
(图)
此时,Charles 可以抓取到 PC 端的 HTTPS 请求的包了,并且 request & response 不再是乱码啦!
2. 移动端 之 ios 系统做 Charles SSL证书认证:
安装 与 信任:
step 1: 安装证书:
- 菜单 帮助
- 选择 SSL Proxying
- 选择 Install Charles Root Certificate on a Mobile Device or Remote Browser
- 此时 charles 会出现个弹窗 ( 作用:提示 手机端浏览器访问
chls.pro/ssl
),点击OK
- 打开 ios 手机 safri 浏览器,访问
chls.pro/ssl
- 会出现下载文件弹窗,选择
允许
(图)
step 2: 证书验证:
- 手机
设置
- 点击
通用
- 点击 扫描文件
- 点击
安装
- 进入
警告页
- 点击
安装
- 进入
已扫描文件页
- 发现文件由 未验证变成已验证
- 点击
完成
(图)
step 3: 证书信任:
- 手机
设置
- 点击
通用
- 点击
关于本机
- 点击
证书信任设置
- 进入
证书信任设置页
- 打开 对
Charles Proxy CA
的信任
(图)
3. 移动端 之 android 系统做 Charles SSL证书认证:
安装 与 信任:
同上,机型不同 安装验证和信任过程 可能稍有不同,可网络执行查找;
问题总结
问题 1:Charles 抓不到包的情况,解决方法:
Step 1: 确认 Charles 配置
-
确认 Charles 是否已开启本机代理
操作:Proxy --> MacOS Proxy 选中
尝试刷新浏览器,如果 charles 还没有抓到包,继续向下看。
-
确认是否已经开始抓取
操作:Proxy --> Start Recording 打开
尝试刷新浏览器,如果 charles 还没有抓到包,继续向下看。
-
确认 recording setting
操作:Proxy --> Recording Settings --> 点击
add
--> 出来弹窗,什么也不填点OK
--> 列表中出现*
-->点OK
尝试刷新浏览器,如果 charles 还没有抓到包,继续向下看。
-
检查证书安装情况
操作:打开Mac上的 钥匙串-->搜索charles字样-->已有证书-->检查是否信任-->没信任-->设置
始终信任
尝试刷新浏览器,如果 charles 还没有抓到包,继续向下看。
-
检查证书已安装,并且信任后还是抓不到包
操作:重新启动charles尝试刷新浏览器,如果 charles 还没有抓到包,继续向下看。
-
安装证书
如果已安装,右键删除,如果还没安装那么重新安装
操作:Help ---> SSL Proxying-->Install Charles Root Certificate-->钥匙串中查找charles CA证书-->设置
始终信任
尝试刷新浏览器,如果 charles 还没有抓到包,继续向下看。
以上操作结束后,基本是可以抓取到包了
-
如果要抓取 https 包,再设置下 SSL Proxy
操作:
i. Proxy --> Proxy Settings --> 选中 Support HTTP/2
(图)
ii. Proxy --> SSL Proxying Settings --> 选中 Enable SSL Proxying
--> Include添加 *:443
(图)
尝试刷新浏览器,如果 charles 还没有抓到包,继续向下看。
Step 2: 确认本地网路代理配置
Mac 上:
操作:系统偏好设置 --> 网络 --> 高级 --> 打开 代理
tab --> 不选择自动代理
尝试刷新浏览器,如果 charles 还没有抓到包,继续向下看。
(图)
Step 3: 确认本地浏览器是否配置了其它代理
如果有配置的话,设置成系统代理,即可!
问题 2:Charles 配置代理后,浏览器打不开网页,解决办法:
- 确认本地网络代理配置,不选择自动代理,参考
问题 1 Step 2
; - 确认本地浏览器是否配置了其它代理,如有,设置成系统代理,参考
问题 1 Step 3
以上为解决在使用 charles 时,常用到的问题!后续遇到问题还会继续收录解决方案!
参考自: