nolebase
Search K

Appearance

41 Charles 全功能速通（上） ​

Charles 做为主流的代理工具，有很多强大好用的功能，这两节我们就快速过一遍：

charles 代理的两种配置方式 ​

网页默认是走系统代理。

可以把 Charles 也设置为系统代理，点击 Proxy > macOS Proxy 即可：

这样就能抓到网页的数据包了。

或者不把 charles 设置为系统代理，而是 SwitchyOmega 单独指定网页的代理服务为 charles：

这里的代理服务的端口可以在 Proxy > proxy Settings 里看到：

当然，更好的方式是 auto switch，也就是根据条件自动切换。

也就是我们在选项里配置的情景模式：

这两种还是很容易理解的：

  • 默认都是走系统代理，所以把 charles 配置为系统代理服务器就可以抓包了
  • 网页也可以通过 SwitchyOmega 单独指定代理服务器，这时候请求会直接走 charles

no caching ​

可以让 http 请求禁用缓存，在 Tools > No Caching 里开启：

当开启之后，你会发现 header 会带上 cache-control: no-cache：

no-cache 的意思是会用本地的缓存，但每次都协商。

而不开启的时候，header 里没有这个：

这就是禁用缓存的实现原理。

其实浏览器的强制刷新也是这么实现的，你可以强刷一下，抓包看看 header。

除了全部请求禁用缓存外，还可以单独指定某些 url 禁用缓存：

block cookies ​

这个也很容易理解，就是禁用 cookie 和 set-cookie 的 header：

在 Chrome DevTools 的 Network 里开启这两个 header 的展示：

在开启 block cookies 之前，是有请求携带或设置 cookie 的：

开启 block cookies 之后，你会发现所有的 set-cookie 都没有了：

但请求还是会带上 cookie，这是因为还没到 charles 那层。

同样的请求，到 charles 看下，就会发现没有 cookie 了：

关闭 block cookies 之后又有了：

同样，它也可以单独 block 某些 url：

map remote ​

charles 可以把请求转发给另一个 url，用 Tools > map remote 的功能：

比如把 https://juejin.cn 转发到 https://www.baidu.com

除了在 Tools > map remote 里开启之外，也可以右键 url 来开启：

好处是请求信息不用自己填一遍了：

之后也可以在 Tools > map remote 里管理：

map local ​

可以把请求转发给另一个 url，也同样可以读取本地的文件内容作为响应，也就是 map local。

在 Tools > map local 里，或者右键请求都可以设置：

比如把这个 json 文件的请求换成本地的一个 svg 文件：

map 之前是这样：

map 之后就是这样了：

map local 功能在移动端开发的时候还是挺常用的，比如把请求的 js、css 等换成本地刚打包出来的，就可以在线上环境调试本地代码。

Mirror ​

mirror 可以把响应内容保存在本地：

在 Tools > Mirror 里开启 mirror 功能：

指定保存的位置，之后再访问 url，就会把响应内容保存下来：

当然，我们没必要全部保存，也可以开启只 mirror 选择的 url，然后指定 url：

之后在保存的目录下就可以看到该请求的响应数据的文件：

但是这个内容是不能修改的，每次刷新都会覆盖，这也是 mirror 镜像的含义。

但是可以配合 map local 使用，比如把这个响应保存下来，然后再复制到别的地方修改之后再 map local。

rewrite ​

除了转发请求外，自然也支持对请求做修改，也就是 rewrite 功能。

在 Tools > rewrite 里开启：

支持修改的包括 header、host、path、url、query，response status、body，也就是所有的内容都可以改：

比如我添加一个 query param：

效果如下：

这里操作的时候，如果希望 charles 一直在最上面，可以在 charles > preferences 里开启 always on top：

它就一直在上面了：

block list ​

block list 可以禁止一些 url 的请求：

在 Tools > block list 里：

处理方式可以是 断开连接或者返回 403。

当然，也可以右键请求来把它加入到 block list：

比如当设置 block 的 url 的时候：

效果是这样的：

当你需要模拟请求失败的时候，可以用这个功能。

allow list ​

allow list 和 block list 正好反过来，这个是只允许列表中的 url 的请求：

比如当设置了 allow list 的时候：

所有不在列表中的请求都会失败，可以通过 status-code:0 的过滤器过滤出来：

ssl proxying ​

https 的代理是很常用的，这个我们上节讲过，需要安装证书到系统。

默认抓取到的 https 的数据是加密过的：

因为 https 会用证书里的公钥加密请求，用私钥加密响应数据：

想要抓取明文数据，需要把证书换成 charles 的：

首先，在 Proxy > SSL Proxying Settings 里开启这个功能：

然后点击 help > SSL Proxying > Install Charles Root Certificate，把 charles 证书安装到系统的钥匙串中并信任：

这样证书就换成了 charles 的并被标记为信任：

也就能抓到明文数据了：

breakpoints ​

断点同样是很常用的功能，这个上节也讲过。

在 Proxy > Enable breakpoints 开启这个功能：

然后在 Proxy > Breakpoint Settings 里配置：

可以单独开启请求/响应的断点：

或者右键请求来设置：

再发送请求的时候或响应的时候就会断住：

可以修改各种内容：

然后 execute 即可。

总结 ​

这节我们过了 charles 一些常用的功能：

首先设置代理可以用 SwitchyOmega 单独指定网页的代理服务器为 charles，也可以直接把 charles 设置为系统代理。

然后我们学习了常用的 charles 代理功能：

  • no caching：禁用缓存
  • block cookies：禁用 cookie
  • map remote：转发请求到另一个 url
  • map local：用本地的文件作为该请求的响应内容
  • mirror：把响应保存在本地文件
  • rewrite：重写请求或响应的各种数据
  • block list：禁止一些 url 的请求
  • allow list：只允许一些 url 的请求
  • SSL Proxying：代理 https 请求，用 charles 自己的证书，需要安装 charles 证书到系统并信任
  • breakpoints：断点修改请求/响应

这些功能中有重合的部分，比如可以通过 rewrite 实现 no caching 的功能，也就是修改 cache-control 的 header，比如 rewrite 的功能和 breakpoint 的功能很类似，但不同的场景下直接用对应的功能会更方便。

这些是比较常用的 charles 代理功能了，下节我们继续学习其余的功能。