Charles 抓包从入门到精通

语言: CN / TW / HK

Charles 简介

Charles是目前最主流的网络调试工具,也有叫它 花瓶,对于一个开发者来说与网络打交道是日常需求,因此很多时候我们需要调试参数、返回的数据结构、查看网络请求的各种头信息、协议、响应时间等等
Charles 通过将自己设置为系统的网络访问代理服务器,这样所有的网络请求都会通过它,从而实现网路请求的截获和分析
Chareles不仅可以分析电脑本机的网络请求(HTTPHTTPS),还可以分析移动端设备的网络请求

安装 Charles

  • 方式1:Charles 官网地址,根据电脑操作系统选择合适的下载方式,不差钱的同学当然可以直接购买
  • 方式2:破解软件地址,http://xclient.info/s/charles.html

Charles 初始化设置

Charles工作原理是将自身设置为系统的代理服务器来捕获所有的网络请求,设置Charles为系统的代理服务器
打开Charles,设置为系统的代理服务器。选择菜单Proxy -> macOS Proxy
也可以使用快捷键 Shift + command + P

之后你的电脑上的任何网络请求都可以在 Charles 的请求面板中看到
看看 Charles 的主界面

image.png

  • 网络请求的展示方式StructureSequence
  • Structure:将所有的网络请求按照域名划分并展示
  • Sequence:将所有的网络请求按照时间排序并展示

过滤网络请求

可以将电脑或者设置过的手机的所有网络请求捕获到,而且我们分析网络传输应该是针对某个特定的网络下的抓包分析,为了清楚明显地看到需求网络请求 - 设置好配置信息后所有的网络请求都将在面板上显示,底部筛选出数据,Filter输入即可

image.png

截取HTTP/HTTPS数据

截取 HTTP 请求

Charles 的主要目的是抓取捕获网络请求 - Charles 的设置 要截获 iPhone 的网络请求就需要开启代理功能。在菜单栏选择Proxy -> Proxy Settings,填写代理的端口号并将Enable transparent HTTP proxying勾选上

  • iPhone 上的设置 打开手机无线局域网,进入当前使用的网络,点击进入当前 WIFI 的详情页(可以看到当前 WIFI 的基本信息,包括子网掩码、端口、IP地址、路由器),配置代理,设置 HTTP 代理选中手动,服务器处填写电脑ip地址端口号(通常默认都是8888)
    设置好后打开iPhone任意需要网络请求的应用,可以看到 Charles 弹出请求的确认菜单,单击Allow按钮即可完成设置

image.png

截取 HTTPS 请求

如果你需要在Mac捕获 HTTPS 协议的网络请求,那么则需要安装 Charles 的 CA 证书 - 点击顶部的菜单栏,选择Help -> SSL Proxying -> Install Charles Root Certificate - 在 keychain 处将新安装的证书设置为永久信任 - 即使安装CA证书,Charles默认是不捕获HTTPS协议的网络请求,所以我们需要对某个主机下的网络请求抓包分析的话,选中该网络请求右击选中SSL Proxying Enabled

如果你需要捕获移动设备的 HTTPS 网络请求,则需要在移动设备上安装证书并作简单的设置 - 选择顶部菜单栏选择Help -> Install Charles Root Certificate on a Mobile Device or Remote Browser,然后可以看到 Charles 弹出的安装说明

image.png

  • 在手机设置好代理的情况后,在手机浏览器输入chls.pro/ssl,安装提示下载好 CA 证书 image.png

  • 验证刚刚安装的 CA 证书

  • iPhone 打开设置 -> 通用 -> 关于本机 -> 证书信任设置 -> 开启开关 image.png

  • Charles菜单栏 Proxy -> SSL Proxying Setting -> Add image.png

*:代表通配符

模拟弱网环境

在平时开发的时候我们经常需要模拟弱网环境,并作弱网环境下的适配工作
菜单栏选择 Proxy -> Throttle Settings,在弹出的面板上设置网络请求的参数(上行,下行带宽、利用率、可靠性等等信息)

image.png

如果你想对指定主机进行弱网环境下的测试,可以点击上图的Add按钮,在弹出的面板上设置协议、主机、端口来对指定的主机进行弱网设置

修改网络请求

对于捕获的网络请求,需要修改网络请求的cookie、Headers、Url等信息
需要选中需要修改编辑的网络请求,在对应的右上角看到有一个“钢笔”的按钮,点击后就可以对选中的网络请求进行编辑,编辑好后可以在右下角看到 Execute 按钮

image.png

修改服务器返回内容

修改接口返回的数据节点或者内容、甚至是状态码,比如数据为空、数据异常、请求失败、多页数据的情况。

Charles有很多超实用的功能 * Map 功能适合长期地将某一请求重定向到另一个指定的网络地址或者本地 JSON 文件 * Rewrite 功能适合对网络请求进行一些正则替换 * Breakpoints 功能适合对网络请求进行一些临时性的修改(类似于我们开发的断点作用)

Map 功能

菜单栏选择Tools -> Map RemoteMap Local 即可进入相应的功能模块 - Map Remote 功能,将某个网络请求重定向到本地 JSON 文件

适合于切换线上到本地、测试服务到正式服务的场景

image.png

  • Map Local 功能,将网络请求重定向到另一个网络接口

保存某个网络数据,选中某个网络右键将接口的响应内容Save Response保存下来成为data.json文件

之后这个请求的内容都从网络变为返回我本地data.json数据

image.png

Breakpoints 功能

特点是只是针对当前的网络请求,Breakpoints 只存在于设置过的当前的网络请求,Charles 关闭后下次打开 Breakpoints 消失
对于我们设置 Breakpoints 的网络请求,下次继续访问该请求的时候停止掉,就跟 debug 一样

  • 选中某个网络请求 -> 右击 -> 点击Breakpoints

请求网络后Edit Response,点击execute后服务端返回的结果就是Text编辑的内容

服务器压力测试

Repeat功能地对服务器进行并发访问进行压力测试
选中某个网络请求 -> 右键 -> Repeat Advanced -> 设置迭代次数和并发数 -> 点击OK
- Iterations:迭代次数 - Concurrency:并法数 开始执行可以看到以设置的并发数的规模,进行总共达设置的总共迭代次数的访问

image.png

专业的压力测试工具:Load Runner

反向代理

反向代理功能允许将本地指定端口的请求映射到远程的另一个端口,点击顶部菜单栏 Proxy -> Reverse Proxies
将本地的 65407 端口映射到远程的 80 端口上,当继续访问本地的 65407 端口,实际返回的就是远程 80 端口的提供的内容

image.png

解决与翻墙软件的冲突

Charles的工作原理是把自己设置为系统的代理服务器,开发者经常会利用 VPN 翻墙访问谷歌查找资料(翻墙软件的工作原理也是把自己设置成为系统的代理服务器)
解决两者共存可以在 Charles 的External Proxy Settings中将翻墙的代理端口等信息填写,同时我们需要关闭翻墙软件的自动设置,更改为手动模式,使其不主动修改系统代理