[网络协议] charles

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 网络协议 -> charles -> 正文阅读

[网络协议]charles

简介及原理

Charles是一个能够查看机器和网络之间所有http和ssl/https流量的HTTP代理/HTTP监视器/反向代理/包括请求，响应和HTTP头（包含cookie和缓存信息）,charles proxy的基本功能以我们的应用程序或网站与为其提供信息的后端服务之间的HTTP请求和响应中心

Charles工作原因

在移动应用中触发一些操作发出某些请求，通过charles作为中间代理发送给服务端，服务端处理创建响应数据，再由charles作为中转返回给应用程序。即：charles对客户端伪装成服务端，对于服务端伪装成客户端

安装与破解

在官网上下载charles安装包，成功安装之后不打开charles
网上下载该版本对应的破解版的jar包文件，将charles.jar文件覆盖安装到charles目录下的lib文件夹下即可完成破解
注：charles破解工具，在线生成链接：Charles破解工具（选择charles版本并给jar包命个名点击生成即可）

打开Charles，help-->Registered-->输入Registered Name和License Key（生成链接生成的）

获取抓包数据

确保手机和电脑处于同一个网络下
设置代理端口，主导航栏【Proxy】先择【Proxy setting..】,在设定代理弹窗中勾选enable transparent HTTP proxying】允许代理，并设定端口号：8888（8888是Charles的默认端口。如果出现了冲突，可以更改此设置，点击OK即可；?

3.查看自己电脑的IP地址
打开cmd，直接输入ipconfig就可查看自己的电脑IP了。如图：

4.第四步：手机连接到该电脑上
确保手机已经连上网络，然后找到手机的http代理--配置代理，点击进入配置代理页面，选择手动，服务器一栏填写自己的电脑IP：192.******，端口号一栏填写charles中设置的端口号：8888；

第五步：电脑上点击同意
手机设置好http代理，连接成功后，PC端的charles 页面便会出现一个是否抓取的相关确认弹窗，直接选择Allow允许即可。
此时操作手机访问相关数据就可以被监听到啦~
?

抓取https请求

按上述步骤操作好了，发现抓取到的https请求前面都是灰色的小锁头，点开一个查看，如图：（大概意思就是还没有为此主机启动ssl代理）
?

所以在PC端的charles启用一下ssl代理，具体操作如下：
第一步：安装证书，主导航栏【help】-~~【SSl proxying】~~-【Install Charles Root Cercificate】

弹出证书弹窗，点击【安装证书】。

弹出证书导入向导弹窗，根据个人需要选择存储的位置，点击【下一步】。

进入到选择存储证书位置的弹窗，先选择"将所有的证书都放入下列存储"，再点击【浏览】，
选择"受信任的根证书颁发机构"，点击【确定】，证书存储框内展示对应文案，点击【下一步】。

展示如下页面，点击【完成】即可。

安装成功后，会有如下的弹窗提示，证明此时已将证书安装成功。（关闭当前的两个弹窗即可）

第二步：在charles设置ssl代理，操作如下：
点击主导航栏中【proxy】--【SSL Proxying Setting】。

进入ssl代理设置页面，勾选Enable SSL Proxying启用ssl代理，点击【Add】，弹出编辑框，如图，在Host一栏中输入通配符：*，在Port一栏输入：443，点击【OK】，编辑框收起，编辑的内容加到设置页面，点击【OK】，ssl代理就已经设好啦~

此时再重启花椒app，看看能不能抓到https，结果如图：（就是说ssl链接证书未知，被预警了）

也就是说，不仅PC端要装证书，连接的手机也需要安装证书，操作如下（可略过第一步，直接走第二步）：
第一步：主导航栏中【Help】-【SSL Proxying】-【Install Charles Root Certificate on a Mobile Device】。

弹出如下图所示的弹窗

第二步：用手机自带浏览器输入地址"chls.pro/ssl"，出现下载证书页面，下载好证书，点击安装，输入设备密码，为证书命名即可（IOS部分设备可能需要在通用>关于手机>证书信任设置中找到Charles证书，打开信任开关才可以）。

再次重启花椒app，查看https请求，搞定~

主页面介绍

手机连上代理后，在手机上做过一些操作后，charles页面会出现很多内容，这些条条框框到底是什么东西呢？如图：

顶部的工具导航栏

扫把图标??：点击之后可清除抓取到的所有请求（clear the current session）
录制图标：??红色按下状态说明正在抓取请求（stop recording），??灰色无点击态说明目前不在抓取请求（start recording）
乌龟图标：??灰色乌龟表示网速正常（star throttling），??绿色乌龟表示已开启网速控制（stop throttling）
断点按钮：??灰色为未开启断点设置（enable breakpoints），??红色为正在使用断点截获网络请求（disable breakpoints）
编辑按钮??：编辑请求，点击之后可修改请求的内容（compose a new request based on the selection）
刷新图标??：重发网络请求，未选定请求，按钮置灰，已选中请求/请求组，点击该图标会再次发送已选中的请求（repeat selected requests）
对号图标??：验证所选响应（validate selected responses）
工具图标??：快速设置charles中部分功能（tools）
设置按钮??：设置charles中的情况（settings）
左侧区域：抓取到的链接该代理的所有手机的所有请求

请求内容区域默认选中结构视图【Structure】（以树状结构显示，将网络请求按访问的域名分类），点击每个请求左侧的加号，可以展开该host域名下的所有请求。点击请求之后即可在右上侧区域看到该请求所对应的具体内容。
【Structure】右侧为序列视图【Sequence】（水平结构显示，将网络请求按访问的时间排序），是请求的另一中展示形式，内容都一样，只不过是将所有的请求按照时间排序展示，不再按域名展示。
注：要选择适合自己的视图进行测试哦~
Charles右键功能比fiddler多的几个比较重要的功能：
【Save response】：保存response数据到文件中，方便后面用于重定向功能【map local...】；选择多条记录后再右键就会有【Save All...】，可以方便的把所有response信息一次性导出到某个目录中，然后通过【map local...】结合通配符来批量重定向请求；
【Export】：可以将选中的多个会话信息完整导出成文件(*.chls)，通过【File】--【import】来导入chls文件，方便不同开发人员进行调试或者现象复现分析；
【repeat advanced...】：可以设置重发次数以及并发数，用于进行简单的服务器压测。

右上侧区域：指定某一API的请求内容

选中某一请求后，此区域会出现该请求的请求内容，可以通过切换导航栏查看请求的详细情况。如响应时间、请求头、请求详细内容、请求体、请求方法等。
Overview：展示该请求的一个大体情况，如：请求头、请求响应结束时间，请求开始时间、总耗时、DNS耗时、网络延时以及自己的note等；
Content：该请求的具体内容和服务器的相应内容（配合底部导航栏进行查看该请求的具体内容header、cookies，呈现方式有form、raw）；
Summary：展示该请求的大体资源分布情况，如：服务器响应了多长时间、host是什么等；
Chat：以表格形式展示响应时间的分布情况；
Notes：点击后可在空白处输入对该请求的备注，方便后续查看接口用途，可直接在overview中查看。

URL：进行网络请求的链接；
Status：当前状态，complete表示请求完成；
Responce Code：返回码。不同的接口，不同的请求结果，返回码都不同；
Protocol：使用的协议；
Method：请求方式，如GET请求，POST请求等；
Kept Alive：判断当前是否正在链接（活跃）；
Content-Type:发送的内容类型，如这里用的是XML文本，以UTF8的方式发送；
Client Address：客户端的IP地址；
Remote Address：远程服务器的IP；
Request Start Time：请求开始的时间；
Request End Time：请求结束的时间；
Response Start Time：返回开始的时间；
Response End Time : 返回结束的时间；
Duration : 总时间；
Request Header ：请求的头部大小；
Response Header：返回的头部大小；
Request : 请求发送的大小；
Response：返回数据的大小；
Total：所有数据大小；
Request Compression : 请求压缩；
Response Compression : 返回压缩；
Request ：查看请求内容（底下的Headers，Query String，Cookies，Raw。）
Headers：发送请求的头部信息；
Query String : 发送参数列表；
Cookies：浏览器缓存；
Raw：发送的原生数据，包括了头部和参数；
Reponse : 查看响应内容
Headers：是返回的头部信息；
Text：返回信息（除去头部）后的文本；
Hex：返回信息的16进制表示；
XML：我返回的数据是XML。如果你返回的是JSON，这里就会显示JSON；
XML Text：如果你返回JSON，这里会显示JSON Text；
Raw：返回的所有原生数据，包括头部；
Summary: 查看发送数据的一些简要信息（主机，状态码，数据的类型，header和body大下，加载时间，总时间）
Chart: Summary中简要信息以图表形式展示
Notes: 其他信息
抓包接口测试需要了解下相关HTTP状态码所对应说明：
HTTP状态码详解

右下侧区域：上述API的服务器响应内容（只有在请求中选择content才能看到响应内容）

响应内容可根据底部导航栏查看响应的不同形式和各详细情况。
Headers：响应的头信息，如server、date、content-type等；
Text：文本形式的响应内容
Hex：16进制形式的响应内容（还有一个compressed压缩，不知道是啥）
JavaScript：
Json：以json格式查看响应内容
Json Text：将json格式的内容展开展示
Raw：详情内容的详细情况
在json中可以看到响应主体中的某些值如何与花椒App中的各UI元素对应

常用功能

过滤请求

①通过Sequence--Filter进行临时过滤：在 Filter 栏中输入想要过滤出来的关键字，比如只想查看包含关键字：bar的请求，只需要在 Filter 栏中输入关键字：bar即可；当然也支持通配符。

②在Sequence中，选择要过滤的请求，右键–Focus，然后勾选Focused

③在Structure中选择要过滤的请求，右键--Focus，其他请求就会被放到other Host的文件夹里面

④直接在Structure下方的Filter中输入要过滤的域名

⑤Proxy--Recording?Settings–Include（只抓取所设置的请求，用于经常性的过滤）

修改请求及响应

有些时候我们想让服务器返回一些指定的内容，方便我们调试一些特殊情况。例如列表页面为空的情况，数据异常的情况，部分耗时的网络请求超时的情况等。如果没有 Charles，要服务器配合构造相应的数据显得会比较麻烦。但是使用charles就比较容易实现。

Charles 提供的Map功能、Rewrite功能以及Breakpoints功能，都可以修改服务器返回的内容。这三者在功能上的差异是：

①Map 功能适合长期地将某一些请求重定向到另一个网络地址或本地文件。

②Rewrite 功能适合对网络请求进行一些正则替换。

③Breakpoints 功能适合做一些临时性的修改。

Charles的Map功能分Map Remote和Map Local两种：Map Remote是将指定的网络请求重定向到另一个网址请求地址，Map Local是将指定的网络请求重定向到本地文件。

Map Remote功能

对于Map Remote功能，我们需要分别填写网络重定向的源地址和目的地址，对于不需要限制的条件，可以留空。下图是一个示例，将所有setting.com（线上获取云控的域名）的请求重定向到了setting.test.com（测试环境获取云控的域名）。

Map Local功能?

对于Map Local功能，需要填写重定向的源地址和本地的目标文件。对于有一些复杂的网络请求结果，我们可以先使用?Charles?提供的“Save Response…”功能，将请求结果保存到本地，然后稍加修改，成为我们的目标映射文件。将一个指定的网络请求通过?Map Local?功能映射到了本地的一个经过修改的文件中。?