前端人必备的Charles抓包宝典

Nyle
3,023 阅读7分钟

前端人必备的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

avatar
文章
阅读
粉丝