Charles 网络抓包工具详解与实战指南

导读

  • 了解网络抓包工具 Charles 的基本原理和核心功能,以及常用功能的使用案例。

软件版本

  • Charles 4.6.4

Charles

  • Charles 是在 PC 端常用的网络包抓取工具,移动端开发者可能接触更多,Web 端使用浏览器开发工具或者 Postman 已经基本可以满足我们开发中的需求,但 Charles 作为一款热门的网络包抓取工具,具备一些高级特性,比如请求重发、请求断点、网速截流、DNS欺骗、动态请求重写、请求名单限制等等,在某些场景能够帮助我们进行更加高效的完成开发工作。

基本原理

  • Charles 通过将自己设置成系统的网络访问代理服务器,使得所有的网络访问请求都通过它来完成,从而实现了网络包的截取和分析。

企业微信截图_16899319907819.png

核心功能

  • HTTP & HTTPS 网络包抓取(PC端、Web端、手机端)
  • 网络请求修改、动态修改、重发、规则重发等
  • DNS欺骗、网速模拟,支持请求白名单黑名单等。
  • 支持 Mac、Win、Linux。

下载及安装

  • 下载及安装比较简单,在 Charles 官网下载最新版,直接安装,使用下面在线激活网站生成激活码激活即可。
  • 官网地址:https://www.charlesproxy.com/documentation/welcome/
  • 激活码在线生成:https://www.zzzmode.com/mytools/charles/

界面介绍

企业微信截图_16899217914191.png

网络包展示

  • Charles 主要提供两种查看网络包的视图,分别名为 Structure 和 Sequence。
Structure: 此视图将网络请求按访问的域名分类。
Sequence: 此视图将网络请求按访问的时间排序。

常用场景介绍

  • Charles 的功能很多,本文主要介绍一些常用的使用场景。

PC 端网络抓包

  • 勾选 Proxy | Windows Proxy
  • 开启 Charles 处于 Start Recording 状态
  • 上述操作完成后,打开浏览器访问,你会发现网络请求并没有被抓取,这是因为还没有配置浏览器的代理,Charles 启动的代理服务器如下图所示,你可以在 windows 设置中进行配置,也可以使用浏览器插件进行配置,本文演示使用 Chrome 代理插件 SwitchyOmega 配置:

企业微信截图_16899269738394.png

企业微信截图_16899265935318.png

移动端网络抓包

  • ++前提PC端和手机端需要在同一网络下++
PC 端配置
  • 开启 Charles 代理功能,代理配置 Enable transparent HTTP proxying
  • 开启 Charles 处于 Start Recording 状态

企业微信截图_16899274666861.png

手机端配置
  • 通过 Charles 的主菜单 Help | Local IP Address 或者通过命令行工具输入 ipconfig 查看本机的 IP 地址。
  • 打开手机端的 WIFI 代理设置,输入PC IP 和 Charles 的代理端口。
  • 完成上述步骤,打开手机浏览器发起请求,看到 Charles 弹出手机请求连接的确认,点击 Allow,Charles 就可以抓取网络请求了。

开启 SSL 代理

  • 上述步骤全部完成后,点击发起一个请求,发现请求内容是乱码的,其实这是因为没有开启 SSL 代理,这是为什么呢?
解答:猜测 + 理解不一定完全正确
这是因为没有开启 SSL 代理时,Charles 只是单纯的转发了客户端和服务端的请求,无法解密客户端和服务端建立 SSL 的通信内容。
开启 SSL 后,Charles 和客户端、服务端分别建立了 SSL 链接,并可以解密通信的内容。
因此,开启 SSL 代理后需要 Charles 生成 CA 证书并安装。

企业微信截图_16899276381870.png

PC 端和移动端 CA 证书安装
Charles 直接安装
  • 电脑端安装 Charles 证书:通过 Charles 的主菜单 Help | SSL Proxying | Install Charles Root Certificate 安装证书。
    设置 SSL 代理:通过主菜单打开 Proxy | SSL Proxy Settings 弹窗,勾选 Enable SSL proxying。
  • 移动端安装 Charles 证书:通过 Charles 的主菜单 Help | SSL Proxying | Install Charles Root Certificate on a Mobile Device or Remote Browser 安装证书。
Charles 下载 CA 文件手动安装
  • Help | SSL Proxying | save Charles Root Certificate(移动端选择.pem、PC端选择.crt)

企业微信截图_16899291019742.png

  • 上述功能都配置完成后,就可以看到如上述的正常的请求,愉快的进行 debug 。

常用操作

请求重发
  • 重新发送该请求。

企业微信截图_16899297036663.png

请求改写、动态改写
  • 修改原请求并进行重新发送;根据动态规则匹配请求修改请求的请求头或请求体。

企业微信截图_16899296571927.png

断点(Breakpoint Settings)
  • 可以在客户端请求服务前以及响应时进行断点。

企业微信截图_16899302539605.png

企业微信截图_1689930316684.png

DNS 欺骗(DNS Spoofing)
  • 当通过 Charles 解析 DNS 时,将使用我们配置的 DNS 进行解析。
节流 Throttle Settings(网速模拟)
  • 模拟上下行网速。

企业微信截图_16899299777475.png

更多功能

  • 参考官网文档:https://www.charlesproxy.com/documentation/welcome/

常见安装问题

  • 手机端安装证书后无法生效,重启一下 Charles
  • Android 7.0 (API 24)之后,做了改动,使得系统安全性增加了,导致APP 默认不信任用户域的证书,需要 root 后将证书放到系统证书。
  • 注意 PC 端 CA 证书存储位置

10a9d6056eccbde1256ab4bde65b2e32.png


37c6c2d09c4ca1a270742ccc29c1f22e.png

  • SSL 配置好证书后仍无法正常抓取(显示 unknown),确认一下是否已经配置 需要开启 HTTPS 代理域名和端口

1697714675931.png

个人简介

相关文章

极简概括: PHP 的开源内存缓存扩展,类比Redis,但是一般都...
请看如下代码: $list = [1,2,4,5]; $list2 = [5,6,7,9]; fo...
一、nginx 安装 1. 在nginx官网下载nginx源码	提供一...
先看图 数据条数:9000+ 第1,2行,golangʾxcelize方...
今天使用Thinkphp5做异步任务传递where参数时遇到一个问题:...
汇总 PHP5.1: autoload PDO MySQLi 类型约束 PHP5.2: JSON...