阅读 580

前端人必备的Charles抓包宝典

前端人必备的Charles操作宝典

1、为啥要使用Charles

Chrome DevTool 不能满足所有调试。正常情况下,Chrome DevTool 已经满足了日常 web 开发的需求,但是有的特性功能:编辑 request 的参数、重定向 request 请求的资源、编辑 response 的数据,ChromeDevTool 就很蛋疼了,而且查看和调试移动端资源时候 Chrome 也并不好用;

官网: www.charlesproxy.com/

附上一个注册码,可以在「菜单栏 - Help」页面注册。注册信息如下:

# Registered Name: 
https://zhile.io
# License Key: 
48891cf209c6d32bf4
复制代码

2、Charles主要功能

  • 支持SSL代理,抓取 Http 和 Https 的请求和响应,抓包是最常用的了。

  • 重发网络请求,方便后端调试,复杂和特殊情况下的一件重发还是非常爽的(捕获的记录,直接 repeat 就可以了,如果想修改还可以修改)。

  • 修改网络请求参数(客户端向服务器发送的时候,可以修改后再转发出去)。

  • 网络请求的截获和动态修改。

  • 支持模拟慢速网络,主要是模仿手机上的 2G/3G/4G 的访问流程。

  • 支持本地映射和远程映射,比如你可以把线上资源映射到本地某个文件夹下,这样可以方面的处理一些特殊情况下的 bug 和线上调试(网络的 css,js 等资源用的是本地代码,这些你可以本地随便修改,数据之类的都是线上的环境,方面在线调试);

  • 可以抓手机端访问的资源(如果是配置 HOST 的环境,手机可以借用 host 配置进入测试环境)

3、界面操作介绍

image.png

image.png

俩种视图模式

Structure 以域名层级的形式显示

image.png Sequence 类似Chrome DevTool以队列形式显示

image.png

4、配置证书代理监控https等SSL请求

  1. 安装Charles系统证书

image.png

image.png 添加证书后选择始终信任

image.png 2. 开启 SSL 代理,配置一条规则,允许抓取所有443端口https流量 「Proxy - SSL Proxying Settings」

image.png 3. 已经可以抓取https流量

image.png

抓取https原理

Charles作为一个中间代理,当浏览器和服务器通信时,Charles接收服务器的证书,但动态生成一张证书发送给浏览器,也就是说Charles作为中间代理在浏览器和服务器之间通信,所以通信的数据可以被Charles拦截并解密。由于Charles更改了证书,浏览器校验不通过会给出安全警告,必须安装Charles的证书后才能进行正常访问。

image.png

HTTPS抓包的原理还是挺简单的,简单来说,就是Charles作为“中间人代理”,拿到了 服务器证书公钥 和 HTTPS连接的对称密钥,前提是客户端选择信任并安装Charles的CA证书,否则客户端就会“报警”并中止连接。这样看来,HTTPS还是很安全的。

6、配置证书代理监控移动端设备请求

  1. 给移动端设备安装证书

image.png

image.png

  1. 以ios为例,手机和电脑连接在同一WIFI网络下,配置代理指向电脑IP指定端口

image.png

  1. 手机浏览器访问 chls.pro/ssl 下载charles证书, 系统设置 -> 通用 -> 描述文件安装证书

image.png

  1. 大功告成,移动端现以可以抓取ssl加密的https流量

image.png

7、代理localhost下的请求

Localhost流量不会出现在Charles中,某些系统被硬编码为不使用代理进行本地主机流量,因此当您连接到http:// localhost /时,它不会显示在Charles中。

方法一:使用官方提供的别名localhost.charlesproxy.com/替换http://localhost/

此方法可能在未配置别名的情况下无法正常运行,webpack dev server等需要配置

devServer: {
  compress: true,
  public: 'localhost.charlesproxy.com' // That solved it
}
复制代码

参考资料

方法二: 使用127.0.0.1 或者 本机IP地址替换localhost

8、VPN直连使用Charles

VPN直连的原因,导致 Fiddler 和 Charles 抓包工具无法正常进行抓包

解决方案,步骤如下:

  • 使用 Chrome下载并安装 proxy-switchyomega插件:
  • chrome.google.com/webstore/de…
  • 在插件设置界面新建一个情景模式,相关设置如下:

image.png

  • 打开Charles,取消勾选macOSProxy:

image.png

  • 在开发调试页面时,切换到VPNProxy模式即可

image.png

  • 正常使用Charles来抓包,如下图:

image.png

9、实现switchHost fake dns 功能

Tools -> DNS SpooFing

image.png

10、实现 Postman 调试请求参数功能

image.png

操作后点击 execute

image.png

11、反向代理 Map Remote

Map Remote工具根据配置的映射更改请求位置,以便从新位置透明地提供响应,就好像这是原始请求一样。 此映射使您能够从一个站点为另一个站点提供全部或部分服务。例如,您可以使用从xk72.com/charles/到localhost/charlesdev/的映射为另一个站点的子目录提供服务,或者使用从xk72.com/*.php到的映射为另一个站点提供具有给定后缀的所有文件

image.png

转发请求

  • 本地开发获取不到接口数据,需要切换代理到不同测试环境
  • 线上有个bug,想定位问题,但是线上代码都压缩过没法debug,这时可通过重定向到本地实现调试

image.png

map隐射可以使用的模式匹配符有三种:

  1. *: 可以匹配0个或者多个字符
  2. ?: 可以匹配一个字符
  3. [...]: 范围选择符,可以匹配范围中的任意一个字符

假设Map From配置中的各个项为空,表示匹配所有请求,然后Map To项的配置不同,代表不同含义,下表列出一个简单例子

image.png

12、反向代理 Map Local

使用 Map Local,您可以使用本地文件,就像它们是远程网站的一部分一样。您可以在本地开发文件,并将其作为实时文件进行测试。本地文件的内容被返回给客户端,就好像它是正常的远程响应一样。 Map Local可以极大地加快开发和测试的速度,否则您就必须将文件上传到网站来测试结果。使用Map Local,您可以在开发环境中安全地进行测试。

mock特定接口请求到本地json

  • 可用于抓取线上问题数据在本地环境进行复现
  • 不依赖后端进行异常case测试与复现

image.png

13、禁用缓存

工作原理:通过修改请求和响应头来防止缓存;从请求中删除If-Modified-Since和If-None-Match头,添加Pragma:no-cache和Cache-control:no-cache。 从响应中删除Expires,Last-Modified和ETag标头,添加Expires:0和Cache-Control: no-cache。 因为客户端的所有请求和服务端响应都经过charles进行处理,所以charles可以很容易的做到这些

image.png

14、ReWrite

rewrite功能重写对应的内容,主要可以对某些匹配请求的header、host、url、path、query param、response status、body进行rewrite。

  1. 创建rewrite

image.png

  1. 配置规则

image.png

常用功能

  • Add/Modify/ Header 添加修改Header字段,比如修改Cookies,单点登录鉴权
  • Host 主要是对请求进行host修改,以达到本地请求获取指定host环境中的数据,常见于mock数据
  • Add/Modify/Remove Query Param 有时请求可能多传递了不必要的参数,这时可以rewirte功能去掉多余的参数;另外也可以添加请求必须而暂时无法提供的参数
  • Response Status 对response的状态码进行rewrite
  • Body 对请求的响应内容做修改,一般是对某一个或几个值进行rewrite,用新的值来替代返回的值,可以用来mock数据,比方说在开发中为了测试功能需要请求的某个数组字段有值,但是当前环境无法给出,那么就可以使用该功能

15、类似工具推荐

  1. 一款设计更苹果原生风格的代理调试工具

proxyman.io/

image.png 2. fiddler

文章分类
前端
文章标签