史上最强 Charles 抓包

  •  📢专注于分享软件测试干货内容,欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!
  • 📢交流讨论:欢迎加入我们一起学习!
  • 📢资源分享:耗时200+小时精选的「软件测试」资料包
  • 📢 软件测试学习教程推荐:火遍全网的《软件测试》教程

内容清单

  • Charles 的简介
  • 安装 Charles
  • Charles 初始化设置
  • 过滤网络请求
  • 截取HTTP/HTTPS数据
  • 模拟弱网环境
  • 修改网络请求
  • 修改服务器返回内容
  • 服务器压力测试
  • 反向代理
  • 解决与科学上网软件的冲突
  • 电脑已经可以科学上网,手机如何科学上网?

Charles 的简介

Charles 是目前最主流的网络调试工具(Charles、Fiddler、Wireshark...)之一,对于一个开发者来说与网络打交道是日常需求,因此很多时候我们需要调试参数、返回的数据结构、查看网络请求的各种头信息、协议、响应时间等等。所以了解 Charles 并使用它

Charles 通过将自己设置为系统的网络访问代理服务器,这样所有的网络请求都会通过它,从而实现了网路请求的截获和分析。

Chareles 不仅可以分析电脑本机的网络请求(HTTP 和 HTTPS),还可以分析移动端设备的网络请求。

Charles 是收费软件,作者开发出这样一个方便开发者使用的伟大工具,我们鼓励使用正版软件,但是对于一些囊中羞涩或者学生来说,有破解版的更好,别担心,这些我都准备好了,下一个 section 会讲解如何下载安装。

安装 Charles

  • 方式1: Charles 官网地址,根据你的电脑操作系统选择合适的下载方式。此时下载下来的是需要收费的,不差钱的同学当然可以直接购买。购买链接
  • 方式2:按照方式1的方式去官网下载,然后下载相应 JAR包。这里以 MAC 为例,打 Finder,选择应用程序,选中 Charles,右击并选择“显示包内容”,看到 Contents 目录,点击进去选择 Java 文件夹,将下载下来的 JAR包 拖进去替换。至此,完成了 Charles 的破解。

Charles 初始化设置

Charles 的工作原理是将自身设置为系统的代理服务器来捕获所有的网络请求。所以使用 Charles ,我们必须设置 Charles 为系统的代理服务器。

打开 Charles,当第一次启动的时候如果没有购买或者没有破解,会有倒计时,之后会看到软件的主界面,然后会请求你赋予它为系统代理的权限。点击授权会让你输入当前系统用户的密码。当然你也可以忽略或者拒绝该请求,然后等想要抓包的时候将它设置为系统的代理服务器。步骤:**选择菜单中的“Proxy” -> "Mac OS X Proxy"。**如下图:

Charles在MAC的初始化

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

看看 Charles 的主界面

Structure模式查看网络请求

Sequence模式查看网络请求

  • 图上红色圈1:这里代表所有网络请求的展示方式。分别名为 “Structure” 和 “Sequence”。
    • Structure 将所有的网络请求按照域名划分并展示
    • Sequence 将所有的网络请求按照时间排序并展示
  • 图上红色圈2:一些的网络请求设置比如 HTTPS 以及端口等信息都在这个菜单栏设置
  • 图上红色圈3:证书设置都在这里进行

过滤网络请求

由于 Charles 可以将电脑或者设置过的手机的所有网络请求捕获到,而且我们分析网络传输应该是针对某个特定的网络下的抓包分析,为了清楚明显地看到我们感兴趣的网络请求通常会用到 Charles 的**“过滤网络请求的功能”**。

  • 方法1:在 Charles 主面板的左侧所有网络请求的下方可以看到看到一个 ”Filter“ 输入栏,在这里你可以输入关键词来筛选出自己感兴趣的网络请求。比如我想分析的网络请求来自于”www.baidu.com" 下,你可以在下面输入"baidu"即可。

    Filter 过滤网络请求

  • 方法2:在 Charles 菜单栏的顶部会看到 “Proxy” 的选项,点击菜单栏选择 “Proxy” -> "Recording Settings" 。选择 “include”。看到面板上面有一个 “Add” 按钮,点击后在弹出的面板里面设置好我们需要分析的网络请求的协议、主机名、端口、路径、参数,当然你也可以只设置一些主要的信息,比如协议和主机名的组合。

    Recording Settings 过滤网络请求

  • 方法3:一般打开 Charles 并设置好配置信息后(比如电脑本机或者设置过代理的手机)所有的网络请求都将在 Charles 的面板上显示,同时我们感兴趣的网络请求如果也在面板上显示的话,“Structure”模式下可以选中需要分析的网络请求,鼠标右击选择**“Focus”“Sequence”模式下可以在面板的网络请求显示面板的右下角看到一个Focus**按钮,点击勾选后 Charles 只会显示你感兴趣的网络请求。

    Structure模式下Focus过滤网络请求

    Sequence模式下Focus过滤网络请求

    截取HTTP/HTTPS数据

    截取 HTTP 请求

    Charles 的主要目的是抓取捕获网络请求,这里以 iPhone 的抓包为例讲解。

    Charles 的设置

    要截获 iPhone 的网络请求就需要为 Charles 开启代理功能。在菜单栏选择**“Proxy” ->"Proxy Settings"。填写代理的端口号并将“Enable transparent HTTP proxying”**勾选上。

    抓取手机网络请求的电脑端设置

    iPhone 上的设置

    在电脑“系统偏好设置”中心打开网络查看本机 IP 地址,打开手机“设置”->“无线局域网”,进入当前使用的网络,点击进入当前 WIFI 的详情页(可以看到当前 WIFI 的基本信息,包括子网掩码、端口、IP地址、路由器),在最下角可以看到**“DNS”和“HTTP代理”2个section。我们点击“配置代理”**,设置 HTTP 代理选中“手动”。服务器处填写电脑ip地址,端口写8888。设置好后,我们打开 iPhone 上的任意需要网络请求的应用,就可以看到 Charles 弹出请求的确认菜单,单击"Allow"按钮,即可完成设置。

    抓取手机网络请求的手机端设置

    截取 HTTPS 请求

    如果你需要捕获 HTTPS 协议的网络请求,那么则需要安装 Charles 的 CA 证书。步骤如下;

    • 首先需要在 MAC 上安装证书。点击 Charles 顶部的菜单栏,选择 “Help” -> "SSL Proxying" -> "Install Charles Root Certificate"

      HTTPS抓包电脑端证书安装

    • 在 keychain 处将新安装的证书设置为永久信任

      HTTPS抓包电脑端证书信任

    • 即使安装了 CA 证书,Charles 默认是不捕获 HTTPS 协议的网络请求,所以我们需要对某个主机下的网络请求抓包分析的话,选中该网络请求右击选中 “SSL Proxying Enabled”。这样就可以看到我们感兴趣的HTTPS 网络请求了。

      Charles确认开启抓取HTTPS

    如果你需要捕获移动设备的 HTTPS 网络请求,则需要在移动设备上安装证书并作简单的设置

    • 选择 Charles 顶部菜单栏选择 “Help” ->"Install Charles Root Certificate on a Mobile Device or Remote Browser"。然后就可以看到 Charles 弹出的安装说明了。

      Charles提示手机端安装CA证书

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

    • 验证刚刚安装的 CA证书

      描述文件的验证

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

      手机端CA证书的信任

    • 在 Charles 菜单栏 Proxy -> SSL Proxying Setting -> 点击 Add 按钮 -> 在弹出的对对话框设置需要监听的 HTTPS 域(*:代表通配符)

      HTTPS抓包端口和主机设置

    • 设置完毕,尽情抓取你想要的 HTTPS 网络请求吧。

      抓取京东HTTPS数据

模拟弱网环境

在平时开发的时候我们经常需要模拟弱网环境,并作弱网环境下的适配工作。Charles 为我们提供了这个服务。

在 Charles 菜单栏选择 “Proxy” -> "Throttle Settings"。在弹出的面板上设置网络请求的参数(上行,下行带宽、利用率、可靠性等等信息)。如下图所示。

模拟弱网环境

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

设置指定网络请求的弱网模拟

修改网络请求

对于捕获的网络请求,我们经常需要修改网络请求的cookie、Headers、Url等信息。Charles 提供了对网络请求的编辑和重发功能。只需要选中需要修改编辑的网络请求,在对应的右上角看到有一个“钢笔”的按钮,点击后就可以对选中的网络请求进行编辑了,编辑好后可以在右下角看到 Execute 按钮。这样我们编辑后的网络请求就可以被执行了。

修改网络请求

修改服务器返回内容

很多时候为了方便调试代码,我们会有这种需求,修改接口返回的数据节点或者内容、甚至是状态码。比如数据为空、数据异常、请求失败、多页数据的情况。 Charles 为我们提供了超实用的功能,“Map(Map Local、Map Remote)功能”、Rewrite功能、Breakpoints功能 ,都可以实现修改服务端返回数据的功能。但是有区别和适用场景:

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

Map 功能

Map 功能分为 Map Local(将某个网络请求重定向到本地 JSON 文件) 和 Map Remote 功能(将网络请求重定向到另一个网络接口)。

在 Charles 菜单栏选择 “Tools” -> "Map Remote" 或 “Map Local” 即可进入相应的功能模块。

Map Remote 功能

适合于切换线上到本地、测试服务到正式服务的场景。比如下图从正式服务切换到测试服务

Map Remote

Map Local 功能

我们需要填写重定向的原地址信息和本地目标文件。我们可以先将某个接口的响应内容保存下来(选择对应的网络请求,右击点击 Save Response )成为 data.json 文件。然后我们编辑里面的 status 、message、data 等信息为我们想要的目标映射文件。

Save Response

如下所示,我将一个网络请求的内容映射到我本地的一个 JSON 文件。之后这个请求的内容都从网络变为返回我本地的数据了。

Map Local

Map Local 可能会存在一个小缺陷,其返回的 HTTP Response Header 与正常的网络请求不一样,如果程序设置了校验 Header 信息,此时 Map Local 就会失败,解决办法是同时使用 Rewrite功能将相关的HTTP 头部信息 rewrite 成我们需要的信息

Rewrite 功能

Rewrite 适合对某个网络请求进行正则替换,以达到修改结果的目的。

假如我的 App 的界面上的显示的功能模块及其点击事件是根据接口来完成的,我想实现替换功能模块的名称的目的。步骤:点击顶部菜单栏的**“Tools” -> "Rewrite"**。在弹出的面板上勾选 “Enable Rewrite”。点击左下角的 Add按钮,在右上角的 **Name:**处写好本次配置的名称(如果有多个 Rewrite,为了后期容易区分)。

  • 可以针对特定的网络请求进行 Rewrite。可以点击右上角 Location 面板下面的 Add按钮。在弹出的面板上设置网络请求配置信息。注意此时需要同时设置 Protocol、Port、Host、Path信息(我测试加了 Protocol、Host、Port这3个是无效的)

Rewrite 针对特定网络请求的设置

  • 然后对指定的 TypeAction 进行 Rewrite。

    Type 主要有 Add Header、Modify Header、Remove Header、Host、Path等等。

    Where 可以选择 Request 和 Response。指的是下面的修改是针对 Request 还是 Response

    Rewrite 设置范围

  • 完成设置后点击 Apply 按钮,即可生效。下次继续请求该网络,返回的内容就是我们刚刚设置的内容。比如当前的“政策法规”要变成“哈哈哈,我是假的政策法规”。这时候就可以使用 Rewrite 功能

    Rewrite 测试结果

Breakpoints 功能

Breakpoints 相比于其他几个修改网络请求的特点是只是针对当前的网络请求,Breakpoints 只存在于设置过的当前的网络请求,Charles 关闭后下次打开 Breakpoints 消失了。想要修改网络请求 Breakpoints 步骤最简单,跟我们调试工具里面设置的断点一样方便。

对于我们设置了 Breakpoints 的网络请求, Charles 会在下次继续访问该请求的时候停止掉,就跟 debug 一样。此时我们可以 Edit Request,修改过 Request 之后点击右下角的 Execute 按钮。然后等到服务端返回的时候继续是断点状态,此时可以 Edit Response。步骤: 选中某个网络请求 -> 右击 -> 点击“Breakpoints”。

如下图:对该接口设置了 Breakpoints。请求网络后 Edit Response,点击 execute 后服务端返回的结果就是我们编辑的内容了。

对指定的网路请求设置断点

在Reponse的时候修改返回的数据

再次请求该接口返回的数据为我们设置过的

服务器压力测试

我们可以使用 Charles 的 Repeat 功能地对服务器进行并发访问进行压力测试。步骤:**选中某个网络请求 -> 右击 -> Repeat Advanced -> 在弹出的面板里面设置总共的迭代次数(Iterations)、并发数(Concurrency) -> 点击“OK” 。**开始执行可以看到以设置的并发数的规模,进行总共达设置的总共迭代次数的访问。(专业的压力测试工具:Load Runner

简单压力测试

反向代理

Charles 的反向代理功能允许我们将本地指定端口的请求映射到远程的另一个端口上。设置:点击顶部菜单栏 Proxy -> 点击 Reverse Proxies

如下所示,我将本地的 8080 端口映射到远程的 80 端口上,点击 OK 生效后,当我继续访问本地的 80 端口,实际返回的就是远程 80 端口的提供的内容了。

反向代理设置

解决与科学上网软件的冲突

Charles 的工作原理是把自己设置为系统的代理服务器,但是我们开发者经常会利用科学上网软件访问谷歌查找资料(这些软件的工作原理也是把自己设置成为系统的代理服务器),为了2者和平共处。我们可以在 Charles 的 External Proxy Settings 中将科学上网软件的代理端口等信息填写。同时我们需要关闭科学上网软件的自动设置,更改为**“手动模式”**。(使其不主动修改系统代理)

电脑已经可以科学上网了,手机如何科学上网?

我们有时候会面临这样的问题,我们的电脑有科学上网能力,手机没有。这时候可以利用 Charles 强大的 External Proxy Setting 能力。

前提条件是:电脑具备科学上网能力、手机通过 Charles 设置代理到电脑上。

具体操作路径:顶部菜单栏 -> Proxy -> External Proxy Settings,点击勾选后弹出设置面板,如下图

查看你电脑上科学上网工具的代理端口。我使用的是 clashX,打开:菜单栏 -> Help -> Ports 可以查看端口信息

然后:

  • 将顶部的 Use external proxy servers checkbox 进行勾选
  • 将 Web Proxy(HTTP)进行勾选。另外在右侧的输入框填写 127.0.0.1,端口填写 ClashX 中查看到的端口信息,这里是 7890
  • 将 Secure Web Proxy进行勾选。另外在右侧的输入框填写 127.0.0.1,端口填写 ClashX 中查看到的端口信息,这里是 7890
  • 将 SOCKS Proxy 进行勾选。另外在右侧的输入框填写 127.0.0.1,端口填写 ClashX 中查看到的端口信息,这里是 7890

这样我们的手机也具备科学上网能力啦。

Tips:iPhone 的 App Store 内置了苹果证书(Certificate pinning),所以抓包(也就是伪造证书)的方式是不行的。

总结

Charles 功能强大、界面简洁,读完这篇文章并做出练习,相信你能很快掌握它,“工欲善其事,必先利其器” ,掌握了它,相信可以为你大大提高开发中调试网络的效率。Enjoy yourself


最后

如果想学习提升找不到资料,没人答疑解惑时,请及时加入群,里面有各种测试开发资料和技术可以一起交流哦。

最后: 下方这份完整的软件测试视频教程已经整理上传完成,需要的朋友们可以自行领取 【保证100%免费】

软件测试面试文档

我们学习必然是为了找到高薪的工作,下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料,并且有字节大佬给出了权威的解答,刷完这一套面试资料相信大家都能找到满意的工作。在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/226751.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python中如何判断List中是否包含某个元素

更多资料获取 📚 个人网站:ipengtao.com 在Python中,判断一个列表(List)是否包含某个特定元素是常见的任务之一。在本文中,将深入探讨多种判断List成员包含性的方法,并提供丰富的示例代码&…

嵌入式工程师校招经验与学习路线总结

前言:不知不觉2023年秋招已经结束,作者本人侥幸于秋招中斩获数十份大差不差的OFFER,包含:Top级的AIGC,工控龙头,国产MCU原厂,医疗器械,新能源车企等。总而言之,秋招总体情…

量子纠缠通讯:未来信息技术的革新者

量子纠缠通讯:未来信息技术的革新者 引言 在科技日新月异的今天,我们正逐步走进一个全新的科技时代——量子时代。量子纠缠通讯作为量子技术的重要分支,以其独特的优势和巨大的潜力,成为了当今世界研究的热点。本文将带您深入探讨量子纠缠通讯的奥秘,了解其原理、优势、…

架构师-3.用户体系

系统提供了 2 种类型的用户,分别满足对应的管理后台、用户 App 场景。 1.AdminUser 管理员用户,前端访问 s-ui-admin-vue3管理后台,后端访问 /admin-api/** RESTful API 接口。 2.MemberUser 会员用户,前端访问 s-ui-user用户 App,后端访问 /app-api/** RESTful API 接口。…

Java中lambda表达式的使用

💕"我不要麻木的死去"💕 作者:Mylvzi 文章主要内容:Java中lambda表达式的使用 一.背景 lambda表达式是Java SE 8中一个重要的新特性,允许你使用一个表达式来代替功能接口。lambda表达式可以看作一个没有返…

基于SpringBoot+Vue实现的小区物业管理系统

文章目录 系统介绍技术选型成果展示账号地址及其他说明 系统介绍 基于SpringBootVue实现的小区物业管理系统是为物业管理打造的一款在线管理平台,它可以实时完成信息处理,对小区信息、住户等进行在线管理,使其系统化和规范化。 系统功能说明…

架构师一1.功能权限

1. RBAC 权限模型 系统采用 RBAC 权限模型&#xff0c;全称是 Role-Based Access Control 基于角色的访问控制。 简单来说&#xff0c;每个用户拥有多个角色&#xff0c;每个角色拥有多个菜单&#xff0c;菜单中存在菜单权限、按钮权限。这样&#xff0c;就形成了 “用户<-…

画好一张规范的原理图,这些点你可要注意了!

不光是代码有可读性的说法&#xff0c;原理图也有。很多时候原理图不仅仅是给自己看的&#xff0c;也会给其它人看&#xff0c;如果可读性差&#xff0c;会带来一系列沟通问题。所以&#xff0c;要养成良好习惯&#xff0c;做个规范的原理图。此外&#xff0c;一个优秀的原理图…

msvcp140_ATOMIC_WAIT.dll丢失的相关解决方法分享

在计算机使用过程中&#xff0c;我们可能会遇到一些错误提示&#xff0c;其中之一就是msvcp140_CODECVT_IDS.dll丢失。这个错误通常会导致某些应用程序无法正常运行&#xff0c;给用户带来困扰。本文将详细介绍msvcp140_CODECVT_IDS.dll的作用和影响&#xff0c;并提供5个解决办…

【C语言】函数递归--输出n的k次方

题目描述&#xff1a; 递归实现n的k次方 代码如下&#xff1a; #include<stdio.h> int nk(int n, int k) {if (k > 0)return n * nk(n, k - 1); } int main() {int ret 0;int n 0;int k 0;scanf("%d", &n);scanf("%d", &k);ret nk(n…

基于springboot + vue的社区医院信息系统

qq&#xff08;2829419543&#xff09;获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;springboot 前端&#xff1a;采用vue技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xf…

C:算术移位和逻辑移位傻傻分不清楚

1. 算术移位与逻辑移位概念 算术移位指令对带符号数进行移位。 逻辑移位指令对无符号数进行移位。 算术左移、右移&#xff0c;逻辑左移、右移 如图所示 &#xff1a; 这里有一个进位位C&#xff0c;它就是标志寄存器 &#xff08;即状态寄存器&#xff0c;亦称程序状态字寄…

ESP32-Web-Server编程-通过 Base64 编码在网页中插入图片

ESP32-Web-Server编程-通过 Base64 编码在网页中插入图片 概述 不同于上节 ESP32-Web-Server编程-在网页中通过 src 直接插入图片&#xff0c;本节引入 Base64 编码来显示图片。 Base64 是一种用64个字符来编码表示任意二进制数据的方法。任何符号都可以转换成 Base64 字符集…

实例分割 Mask-RCNN

参考文章 使用LabelMe标注目标检测数据集并转换为COCO2017格式_labelme转coco-CSDN博客 数据集选择 voc 这次不选择voc&#xff0c;因为文件组织太难了 voc2012文件夹组织 COCO COCO介绍 MC COCO2017年主要包含以下四个任务&#xff1a;目标检测与分割、图像描述、人体关…

想要精通GO语言?这些网站是你的最佳选择!

介绍&#xff1a;Go&#xff08;又称 Golang&#xff09;是由 Google 的 Robert Griesemer&#xff0c;Rob PGo&#xff08;又称 Golang&#xff09;是由 Google 的 Robert Griesemer&#xff0c;Rob Pike 及 Ken Thompson 开发的一种静态强类型、编译型语言。它在2009年11月10…

全网最新最牛的Java代码接口自动化测试 REST Assured接口测试 HTTPClient接口测试

近几年接口自动化变得越来越热门&#xff0c;相对比于UI自动化&#xff0c;接口自动化有一些优势 1.运行比UI更稳定&#xff0c;让BUG更容易定位 2.UI自动化维护成本太高&#xff0c;接口相对低一些 接口测试其实有很多方式&#xff0c;主要有两种&#xff0c;一个是工具&am…

有效解决wordpress的502 Bad Gateway错误提示

摘要&#xff1a;最近有客户反映使用阿里云虚拟云主机&#xff0c;wordpress常提示502 Bad Gateway错误&#xff0c;网关错误是网站上遇到的常... wordpress的502 Bad Gateway错误如何修复&#xff1f; 第1步&#xff1a;偶发错误可尝试重新加载网站 偶尔出现流量突发爆增或是服…

el-pagination 纯前端分页

需求&#xff1a;后端把所有数据都返给前端&#xff0c;前端进行分页渲染。 实现思路&#xff1a;先把数据存储到一个大数组中&#xff0c;然后调用方法进行切割。主要使用数组的slice方法 所有代码&#xff1a; html <template><div style"padding: 20px&qu…

创建第一个 Flink 项目

一、运行环境介绍 Flink执行环境主要分为本地环境和集群环境&#xff0c;本地环境主要为了方便用户编写和调试代码使用&#xff0c;而集群环境则被用于正式环境中&#xff0c;可以借助Hadoop Yarn、k8s或Mesos等不同的资源管理器部署自己的应用。 环境依赖&#xff1a; 【1】…

SpringbootWeb登录认证

登录校验 会话技术 会话&#xff1a;用户打开浏览器&#xff0c;访问web服务器的资源&#xff0c;会建立会话&#xff0c;直到有一方断开连接&#xff0c;会话结束。在一次会话中可以包含多次请求和响应。会话跟踪&#xff1a;一种维护浏览器状态的方法&#xff0c;服务器需要…