2

背景

Charles 是一个 HTTP 和 SOCKS 代理服务器。代理请求和响应使 Charles 能够在请求从客户端传递到服务器时检查和更改请求,以及从服务器传递到客户端时的响应。

抓包

PC端抓包

1、选择菜单中的Proxy -> Mac OS X Proxy
2、确保 Charles 处于 Start Recording 状态。

移动端抓包

1、手机和电脑在同一个网络:
2、电脑关掉防火墙,打开 Charles 的代理:Proxy -> Proxy Settings 弹窗,填入代理端口(端口默认为 8888,不用修改),勾选 Enable transparent HTTP proxying。
wifi里找到代理,选择手动,填写IP地址,端口8888

HTTPS抓包

pc端证书下载安装:
Help -> SSL Proxying -> Install Charles Root Certificate
方式一:直接下载
image.png

方式二:如果下载不了,去官方下载

证书信任
image.png

移动端证书下载安装:
Help -> SSL Proxying - Install Charles Root Certificate on a Mobile Device。然后会弹出下面的提示。

image-20220727105400854

image-20220727105215977

手机浏览器输入:chls.pro/ssl

  1. 下载后打开手机设置-通用-描述文件与设备管理,选择配置描述文件,选择信任即可,看到已验证就行。
  2. 最后手机设置-通用-关于手机-证书信任设置,选择开就可以使用HTTPS抓包了。

注意:手机和电脑的证书的版本需要对应。
你手机本来就有1个是旧版本的,但是电脑连得是新版本,也要重新下载。

为什么要安装证书

如果是HTTP请求,因为数据本身没有加密,所以请求内容和返回结果是直接展示的。
但HTTPS对数据进行了加密处理,所以Charles面对客户端,把自己伪装成服务器,对服务器把自己伪装成客户端。

  • Charles拦截客户端的请求,伪装成客户端向服务器进行请求,服务器向“客户端”(实际上是Charles)返回服务器的CA证书;
  • Charles拦截服务器的响应,获取服务器证书公钥,然后自己制作一张证书,将服务器证书替换后发送给客户端。(这一步,Charles拿到了服务器证书的公钥);
  • 客户端接收到“服务器”(实际上是Charles)的证书后,生成一个对称密钥,用Charles的公钥加密,发送给“服务器”(Charles);
  • Charles拦截客户端的响应,用自己的私钥解密对称密钥,然后用服务器证书公钥加密,发送给服务器。(这一步,Charles拿到了对称密钥);
  • 服务器用自己的私钥解密对称密钥,向“客户端”(Charles)发送响应;
  • Charles拦截服务器的响应,替换成自己的证书后发送给客户端;
  • 当然,如果用户不选择信任安装Charles的CA证书,Charles也无法获取请求内容。还有一种,如果客户端内置了本身的CA证书,这时如果Charles把自己的证书发送给客户端,客户端会发现与程序内的证书不一致,不予通过,此时Charles也是无法获取信息的。

基础设置

工具导航栏
Charles 顶部为菜单导航栏,菜单导航栏下面为工具导航栏。视图如下图所示:
image.png

  • 清除捕获到的所有请求
  • 红点状态说明正在捕获请求,灰色状态说明目前没有捕获请求。
  • 灰色状态说明是没有开启网速节流,绿色状态说明开启了网速节流。
  • 灰色状态说明是没有开启断点,红色状态说明开启了断点。
  • 编辑修改请求,点击之后可以修改请求的内容。
  • 重复发送请求,点击之后选中的请求会被再次发送。
  • 验证选中的请求的响应。
  • 常用功能,包含了 Tools 菜单中的常用功能。
  • 常用设置,包含了 Proxy 菜单中的常用设置。

image.png
structure 按照域名划分
sequence 按时间排序
太多了可以看工具栏底下按照Filter筛选

使用指南

Proxy

Proxy 菜单包含以下功能:

  • Start/Stop Recording:开始/停止记录会话。
  • Start/Stop Throttling:开始/停止节流。
  • Enable/Disable Breakpoints:开启/关闭断点模式。
  • Recording Settings:记录会话设置。
  • Throttle Settings:节流设置。
  • Breakpoint Settings:断点设置。
  • Reverse Proxies Settings:反向代理设置。
  • Port Forwarding Settings:端口转发。
  • Windows Proxy:记录计算机上的所有请求。
  • Proxy Settings:代理设置。
  • SSL Proxying Settings:SSL 代理设置。
  • Access Control Settings:访问控制设置。
  • External Proxy Settings:外部代理设置。
  • Web Interface Settings:Web 界面设置。
Recording Settings(记录会话设置)

Recording Settings 有 Options、Include、Exclude 三个选项卡:

Options:通过 Recording Size Limits 限制记录数据的大小。当 Charles 记录时,请求、响应头和响应体存储在内存中,或写入磁盘上的临时文件。有时,内存中的数据量可能会变得太多,Charles 会通知您并停止录制。在这种情况下,您应该清除 Charles 会话以释放内存,然后再次开始录制。在录制设置中,您可以限制 Charles 将记录的最大大小; 这根本不会影响你的浏览,Charles 仅会停止录制。
Include:只有与配置的地址匹配的请求才会被录制。
Exclude:只有与配置的地址匹配的请求将不会被录制。

image.png
image.png

或者用Focus进行快速过滤
image.png

Throttle Settings(节流设置)

模拟弱网环境
image.png
Bandwidth:带宽
Utilistation:利用百分比
Round-trip:往返延迟
MTU:字节

Breakpoint Settings(断点设置)
Windows Proxy(记录计算机上的所有请求)

抓取电脑的请求,勾选 Windows Proxy,如果只需要抓取移动端请求,则取消勾选这个选项。

Proxy Settings(代理设置)

设置代理默认端口号
image.pngSSL Proxy Settings(SSL 代理设置)

勾上 Enable SSL proxying 就完成了在 Charles 上的 SSL 代理设置。之后也可以选择 Add,然后填入需要监控的 Host 和 Port 信息,这样就达到了针对某个域名启用 SSL 代理的目的。
image.png

Tools

Tools 菜单包含以下功能:

  • No Caching Settings:禁用缓存设置。
  • Block Cookies Settings:禁用 Cookie设置。
  • Map Remote Settings:远程映射设置。
  • Map Local Settings:本地映射设置。
  • Rewrite Settings:重写设置。
  • Black List Settings:黑名单设置。
  • White List Settings:白名单设置。
  • DNS Spoofing Settings:DNS 欺骗设置。
  • Mirror Settings:镜像设置。
  • Auto Save Settings:自动保存设置。
  • Client Process Settings:客户端进程设置。
  • Compose:编辑修改。
  • Repeat:重复发包。
  • Repeat Advanced:高级重复发包。
  • Validate:验证。
  • Publish Gist:发布要点。
  • Import/Export Settings:导入/导出设置。
  • Profiles:配置文件。
  • Publish Gist Settings:发布要点设置。
Map映射:

Map Remote Settings:远程映射设置。
Map Local Settings:本地映射设置。
Charles 的 Map 功能分 Map Remote 和 Map Local 两种,顾名思义,Map Remote 是将指定的网络请求重定向到另一个网址请求地址,Map Local 是将指定的网络请求重定向到本地文件。

Map Remote Settings使用:
图示,将所有 www.csc.com 的请求重定向到了 www.www.csc.com
image.png

(有些比较复杂的网络请求),可以将请求结构保存到本地,然后再使用Map Local Settings(本地映射)的文件。

Rewrite

Rewrite功能适合对某一类网络请求进行一些正则替换,以达到修改结果的目的。
可以重写接口所有元素的内容:header、host、url、path、query param、response status、body。

Charles功能总结

  • 截取 Http 和 Https 网络封包。
  • 支持重发网络请求,方便后端调试。
  • 支持修改网络请求参数。
  • 支持网络请求的截获并动态修改。
  • 支持模拟慢速网络。
  • Structure 视图将网络请求按访问的域名分类。
  • Sequence 视图将网络请求按访问的时间排序。
  • Map 功能适合长期地将某一些请求重定向到另一个网络地址或本地文件。
  • Rewrite 功能适合对网络请求进行一些正则替换。
  • Breakpoints 功能适合做一些临时性的修改。

兰俊秋雨
5.1k 声望3.5k 粉丝

基于大前端端技术的一些探索反思总结及讨论