A-A+

Charles使用方法教程

2018年01月14日 工具 暂无评论 阅读 427 次

Charles最易上手教程

 

Charles 是在 Mac 下常用的网络封包截取工具,在做开发时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析。本文将会具体的介绍Charles的一些基本用法。

准备工作

为了方便在测试的时候看到明显的效果。在Mac下,我使用node自己在本地返回一个josn数据。很简单容易,如果你的电脑安装了node,拷贝如下代码到一个空的文件然后任意命名。我这里命名为 jspatch.js,如果没有安装先使用brew install node安装node

var http = require('http');
 
var data = {key: 'value', hello: 'my my my world is is is ' ,name: 'name',id:'33333333'};
 
var srv = http.createServer(function (req, res) {
 
res.writeHead(200, {'Content-Type': 'application/json'});
 
res.end(JSON.stringify(data));
 
});
 
srv.listen(8080, function() {
 
console.log('listening on localhost:8080');
 
});

 

然后到文件的目录下使用node jspatch.js既可返回一个json数据。

这里写图片描述
打开浏览器输入https://localhost:8080/返回的数据如下。

这里写图片描述
后面有些操作我将以这个数据接口为例子测试。

安装

去 Charles 的官方网站(https://www.charlesproxy.com)下载进行安装。会有30天试用期。超过试用期后网上也有很多解决的办法,买正版或是其他手段。。。

基本界面介绍

Charles 主要提供两种查看封包的视图,分别名为 Structure 和 Sequence。

这里写图片描述
具体的区别是:

- Structure 视图将网络请求按访问的域名分类。

- Sequence视图将网络请求按访问的时间排序。

设置代理

启动 Charles 后,第一次 Charles 会请求你给它设置系统代理的权限。也可以在以下地方设置系统代理。

这里写图片描述
系统会询问你输入密码,输入密码后就可以完成相应的代理功能。设置之后就可以打开浏览器试试了,相应的数据已经能被截取了。

数据过滤

数据过滤可以使用以下三种方法。

第一张方法是直接输入需要过滤的东西,简单一点的话输入网址什么的就好了。

这里写图片描述
复杂一点可以点击后面的Setting,使用相应的正则表达式。

这里写图片描述
第二种方法是右键需要过滤的网址。点击Focus,然后选中过滤框后面的Focussed

这里写图片描述
第三种方法是在 Charles 的菜单栏选择 Proxy->Recording Settings,然后选择 Include 栏。

这里写图片描述
选择添加一个项目,然后填入需要监控的协议,主机地址,端口号。这样就可以只截取目标网站的封包了。如下图所示.

这里写图片描述
三种方法的区别,第一种和第二种主要是一些临时的过滤。第三种是经常性的过滤。

修改网络请求内容

修改网络请求的内容,点击需要请求的网址。

这里写图片描述
然后可以修改不同的参数进行不同的请求。最后点击 Execute既可执行。

这里写图片描述
当然这其实就是调试接口,使用青花瓷(Charles的本意。。)这个工具可以我觉得小题大做了。我还是更喜欢使用谷歌的插件PostMan

这里写图片描述
亦或是系统自带的Curl,调试接口用简单的命令就好。

curl -l -H "Content-type: application/json" -X POST --data '{"phone_no":"133333","password":"234567"}' "https://ssss.com/apis/request_route/user_apis/user_login"

压力测试

可以是使用Charles来对一个地址做给定次数的请求。打开 Tools->Advanced Repeat

这里写图片描述
选择打压的并发线程数以及打压次数就可以开始打压了。

这里写图片描述
修改服务器返回内容

这是我觉得Charles这个工具的精髓也就是在于这几个核心的功能。

根据具体的需求,Charles 提供了 Map 功能、 Rewrite 功能以及 Breakpoints 功能,都可以达到修改服务器返回内容的目的。这三者在功能上的差异是:

Map 功能适合长期地将某一些请求重定向到另一个网络地址或本地文件。 Rewrite 功能适合对网络请求进行一些正则替换。 Breakpoints 功能适合做一些临时性的修改。

Map功能

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

先说明一点是,有些网站可能做了安全方面的限制(比如www.baidu.com)所以测试总是失败。还有就是不能使用之前使用的https://localhost:8080/。否则会出现无法找到指定iP的错误。

先实验MapLocal功能。

对某个已经抓到的包进行右击->Save Response。存储位置随意,待会后面会用到。我这里使用的是https://www.myexception.cn/

这里写图片描述
然后Tools->Map Local,接着按下图操作。

这里写图片描述
添加网址和定向的文件地址。我这里的网址使用的是我个人博客的地址www.iseedog.com

这里写图片描述
点击确定后,记得所有的Ok都要点击。不然有时候会设置失败。打开浏览器输入 www.iseedog.com

结果如下。我们可以看到地址被重定向到我本地文件了。

这里写图片描述
实验Map Remote功能。

首先Tools->Map Remote,接着按下图操作。

这里写图片描述
点击add后到如下页面填写相应的信息。我这里是把www.myexception.cn定向到我自己的网站www.iseedog.com

这里写图片描述
配置好点击确定回到如下界面,点击确定就可以完成配置。

这里写图片描述
在浏览器输入www.myexception.cn进行测试。网页跳到了我自己的博客地址。

这里写图片描述
Map Local 在使用的时候,有一个潜在的问题,就是其返回的 Http Response Header 与正常的请求并不一样。这个时候如果客户端校验了 Http Response Header 中的部分内容,就会使得该功能失效。解决办法是同时使用 Map Local 以下面提到的 Rewrite 功能,将相关的 Http 头 Rewrite 成我们希望的内容。

Rewitre功能

Rewitre可以对返回的内容进行修改,然后再把修改的数据返回。前提是我需要提前知道返回的内容。然后对内容进行正则修改。

首先Tools->Rewitre。首先在左边添加一个set。

这里写图片描述
然后点击右边的按钮添加替换规则,同样可以使用正则表达式替换。

这里写图片描述
然后点击Apply后就可以到浏览器进行测试了。

这里写图片描述
Breakpoints 功能

Breakpoints和普通IDE一样都是断点调试。只不过Charles的断点可以对返回的值进行修改。

对需要过滤的网址右击->选中Breakpoints.

这里写图片描述
然后选中上方红色的按钮。

这里写图片描述
在网页发起https://localhost:8080/请求。可以看到,程序被断点在了Request。我们这个时候可以修改相关的参数(说明:我这请求没有使用参数所以不需要修改,修改方法和待会介绍的修改返回的类似),然后点击Execute执行断点。

这里写图片描述
从服务器得到返回之后我们可以修改相应的返回数据。我这里把name改为了修改后的名字

这里写图片描述
点击 Execute我们可以看到浏览器返回修改后的数据。

这里写图片描述
反向代理功能

该功能主要是对端口的一个定向。打开proxy->rverse proxies。对相关的设置进行配置。我这里的https://localhost:8080/只是做一个例子。使用本地地址charles会出相应的错误,因为本地IP被一直重定向,找不到对应的IP地址了。

Charles Error Report

Name lookup failed for remote host

Charles failed to resolve the name of the remote host into an IP address. Check that the URL is correct.

The actual exception reported was:

java.net.UnknownHostException: http: unknown error

Charles Proxy, https://www.charlesproxy.com/

所以还是建议用自己线上的域名测试该功能。

这里写图片描述
点击确定后如下。意味着把本地的80033端口映射到远程端口8080。

这里写图片描述
截取手机数据和Https数据

基本功能已经介绍完毕。下面具体介绍一下如何截取手机软件的数据和获取Https的数据

截取手机数据

我这里使用的是iPhone。安卓的我没研究过~

要抓取手机的数据需要手机和电脑在同一个局域网下面。也就是同一个wifi。然后Proxy->Proxy Setting。端口号可以自己设置。

这里写图片描述
然后打开手机网络设置代理为手动并输入电脑IP地址和刚才上一步的端口号。电脑IP地址查看的方法很多,也可以使用charles的help->Local IP Address查看。

这里写图片描述
然后电脑会弹出如下提示,点击确认就可。

这里写图片描述
打开手机软件就可以看到对应的数据被截取到了。当然,很多App的数据是加过密的。所以看看就好。主要还是要调试自己的App。

Https

获取https的数据首先需要安装自带CA证书。

首先如下

这里写图片描述
安装之后需要对证书信任。

这里写图片描述
然后如果要查看手机端Https链接的话,手机端也需要安装证书。

步骤如下

这里写图片描述
然后会弹出安装的地址。在iPhone 中用Safari输入如下弹出的链接按步骤安装证书即可。

这里写图片描述

    资料: https://www.2cto.com/kf/201611/562336.html

              Charles 从入门到精通

 

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利.   Theme  Ality

用户登录