likes
comments
collection

你还不知道Whistle?打造最舒适的抓包环境!

作者站长头像
站长
· 阅读数 10

前言

大家好,本次分享的内容是Whistle抓包工具。

其实大家都有各自习惯使用的抓包工具。

常见的抓包工具,诸如fiddlercharles, 其实都不错,但是一直都不是我心中满意的抓包工具。虽然有些功能确实很强,但是其他方面又比较薄弱(比如mock功能)。再加上版权收费机制,更加劝退了白嫖党。

你还不知道Whistle?打造最舒适的抓包环境!

下面我就分享一下whistle的强大功能吧。

一、安装

开局,先全局安装whistle

npm i -g whistle

下载完成后启动

w2 start

你还不知道Whistle?打造最舒适的抓包环境!

然后就可以打开http://127.0.0.1:8899的本地站点。

你还不知道Whistle?打造最舒适的抓包环境!

非常nice~ 但是现在还不能抓包,因为还没有安装证书。

1. 电脑安装证书

想要抓包https请求,那当然得先安装证书了。

你还不知道Whistle?打造最舒适的抓包环境!

注意都要勾选

你还不知道Whistle?打造最舒适的抓包环境!

由于本人使用的mac电脑,就只给大家展示mac上如何配置,window可以: 参考文章

点击下载后,直接双击打开

你还不知道Whistle?打造最舒适的抓包环境!

输入密码后,找到whistle证书,并设置始终信任 你还不知道Whistle?打造最舒适的抓包环境!

2. 手机安装证书

手机设置代理步骤如下:

  1. 设置代理 电脑ip:端口
  2. 扫描上面的二维码,安装证书
  3. 信任证书(此处由于各个手机型号不同,就不详细说明了,可以自行百度)

二、UI界面的使用

1. 工具栏

首先我们看一下工具栏有哪些功能:

你还不知道Whistle?打造最舒适的抓包环境!
  • record 开启或关闭请求的记录,如果关闭就看不到请求了

  • import 可以导入别人发给你的请求记录。实现共享!后面会介绍nohost,功能更加强大。

  • export 可以导出当前鼠标选中的某个请求记录。

  • clear 用来清除抓包记录的。

  • replay 重新发送当前选中的请求

  • compose 用于修改当前的请求数据

  • setting 可以设置抓包的展示

    你还不知道Whistle?打造最舒适的抓包环境!

    Exclude FilterInclude Filter中,支持多种写法

       
       /url1 /url2 /url3 # 用url过滤
       h:header1 header2 # 用header过滤
       s:200 # 用状态码过滤
       i:11 77 # 用ip过滤
       m:get # 用请求方法过滤
       b:keyword1 keyword2 # 用请求体或响应体过滤
    

    h:m:s:i:b: 分别表示匹配请求响应头请求方法响应状态码ClientIP 及 ServerIP请求响应内容其它表示匹配 url(以上匹配都不区分大小写),同一行内容多个匹配用空格隔开,最多支持 3 个,表示对应的内容要同时匹配这三个关键字,不同行表示或的关系。

  • Files 可以将请求下载成json文件

  • weinre 远程调试h5页面,功能有bug,不好用,可忽略

  • https 下载证书

  • help 文档

2. Network网络面板

你还不知道Whistle?打造最舒适的抓包环境!

抓包时可以使用下方的筛选工具栏,快速筛选出我们想找的请求,同样支持多种匹配方式:

  • 默认模糊匹配url筛选
  • h:keyword 搜索请求头和响应头
  • c:keyword 搜索内容
  • p:keyword 搜索请求协议
  • i:keyword 搜索ip
  • m:keyword 搜索method
  • s:keyword 搜索状态码

3. 右键工具栏

你还不知道Whistle?打造最舒适的抓包环境!

whistle除了顶部的工具栏还支持右键工具,特别是拷贝cURL,还有生成二维码都非常方便。下面大概罗列下:

  • open 相当于快捷操作,可以打开顶部工具栏或右侧的抓包视图

  • copy 这个功能是用来拷贝请求中的一些信息,比较有用的是拷贝cURL

  • file 可以将请求的一些信息下载成文件

  • remove 快捷删除其他不必要的请求记录

  • filter 快捷筛选请求,会被保存到setting的配置里

  • actions 可以重新发送请求,标记请求等。。

  • import、export 导入或导出请求文件

  • other 该功能只有在nohost中才能使用,可以分享请求给其他人,非常方便。

    你还不知道Whistle?打造最舒适的抓包环境!

由于功能较多,推荐大家都上手操作一下!!

4. 抓包查看

4.1 请求概览

你还不知道Whistle?打造最舒适的抓包环境!

在这里我们主要可以看到两部分:

  1. 请求的概览

  2. 命中了哪些规则

    这个就非常有用了,能知道你的规则有没有写对,否则不会匹配上

那什么是规则呢?这里先跳过,后面会讲到

4.2 请求查看

你还不知道Whistle?打造最舒适的抓包环境!

在这里我们能看到请求的所有信息。但是大家注意,可以把鼠标放到请求响应那里,我们会看到右上角有一些小功能。

你还不知道Whistle?打造最舒适的抓包环境!
  • Copy 可以直接拷贝响应值

  • Download 下载响应内容

  • Key

    什么是Key呢?

    首先whistle会将你的请求路径中最后一段,设置为这个数据的Key。然后将该数据保存到最左边的Values中。如下图:

    你还不知道Whistle?打造最舒适的抓包环境! 你还不知道Whistle?打造最舒适的抓包环境!

    这块的作用,后续会讲~

  • Text 直接展示格式化后的响应文本。推荐大家使用这种模式,不需要手动展开。

4.3 Timeline、Composer

详细用法就不多介绍了,也很简单~

  • Timeline 查看请求时间线
  • Composer 修改请求,并重新发送。

4.4 Tools

Tools的功能就比较强大了,能直接看到页面的console.xx日志、以及一些实用工具。

  • Console

支持查看页面的log日志,但是需要一些配置

你还不知道Whistle?打造最舒适的抓包环境!

在你的规则中添加如下代码, 前面是你的页面路径,正常直接填域名就可以了。

你还不知道Whistle?打造最舒适的抓包环境!
www.baidu.com log://
  • Server 可以查看服务端的日志,一般不用

  • Toolbox

    一些常用工具集合,如二维码生成,编码和解码等

    你还不知道Whistle?打造最舒适的抓包环境!

三、什么是Whistle规则?

在whistle中,规则是它最为核心的功能,可以实现非常多有用的抓包功能。

我们可以在Rules中编写规则

你还不知道Whistle?打造最舒适的抓包环境!

hosts为例,正常需要找到电脑中的hosts的文件,然后编写映射,然而,在whislte中你可以这么写, 并且实现了同样的效果。如:

127.0.0.1 www.baidu.com

免除了我们找配置文件的麻烦,并且它的强大远不止于此。

Whistle的规则支持两种写法:

  1. 默认方式

    默认是将匹配模式写在左边,操作uri写在右边

     pattern operatorURI
    

    whistle将请求url与pattern匹配,如果匹配到就执行operatorURI对应的操作

  2. 组合方式

    传统hosts的配置对多个域名对于同一个ip可以采用这种方式:

     127.0.0.1  www.test1.com www.test2.com www.testN.com
    

    whistle完全兼容传统hosts配置方式,且支持更多的组合方式:

     # 传统组合方式
     pattern operatorURI1 operatorURI2 operatorURIN
    
     # 如果pattern部分为路径或域名,且operatorURI为域名或路径
     # 这种情况下也支持一个操作对应多个pattern
     operatorURI pattern1 pattern2 patternN
    

四、匹配模式

whistle的匹配模式(pattern)大体可以分成 域名、路径、正则、通配符匹配

1. 域名匹配

# 匹配域名www.test.com下的所有请求,包括http、https、ws、wss,tunnel
www.test.com operatorURI

# 匹配域名www.test.com下的所有http请求
http://www.test.com operatorURI

# 匹配域名www.test.com下的所有https请求
https://www.test.com operatorURI

# 上述匹配也可以限定域名的端口号
www.test.com:8888 operatorURI # 8888端口
www.test.com/ operatorURI # http为80端口,其它443端口

2. 路径匹配

# 限定请求协议,只能匹配http请求
http://www.test.com/xxx operatorURI
http://www.test.com:8080/xxx operatorURI

# 匹配指定路径下的所有请求
www.test.com/xxx operatorURI
www.test.com:8080/xxx operatorURI

3. 正则匹配

#匹配所有请求
* operatorURI

#匹配url里面包含多个关键字的请求,且忽略大小写
/keyword/i operatorURI

# 利用子匹配把url里面的参数带到匹配的操作uri
# 下面正则将把请求里面的文件名称,带到匹配的操作uri
# 最多支持10个子匹配 $0...9,其中$0表示整个请求url,其它跟正则的子匹配一样
/[^?#]/([^/]+).html/ protocol://...$1...

4. 通配符匹配

# 以www开头
^www.example.com/test/*** referer://http://www.test.com/$1

# 限定结束位置,以www开头,以test结尾
^www.example.com/test/***test$ referer://http://www.test.com/$1

五、Whistle常用操作汇总

1. 数据Mock

方式1:Key-Values

创建一个名为resData的Value

你还不知道Whistle?打造最舒适的抓包环境!

然后再Rules中编写规则如下: 你还不知道Whistle?打造最舒适的抓包环境!

/api/getInfo resBody://{resData}

在括号中,填写上resData就可以mock你在Values中填写的数据了。

注意,括号里的名字是自己随便取的,要和Values中的Key对应上

方式2:模板写法

你还不知道Whistle?打造最舒适的抓包环境!

直接在规则里面添加```反引号,后面跟一个变量名, 就可以定义一个模板变量(变量名一定要对应上

方式3:模板变量写法

你还不知道Whistle?打造最舒适的抓包环境!

这里注意我的写法

可以看到,我们在模板中使用了一些变量,例如urlportmethod。其实这些都是whislte帮我们注入的,也就是说我们能在返回值中,直接引用请求的一些属性参数等。

方式4:automock插件

虽然上面的mock方式已经够简洁了,但是还不够,我们安装一个插件(注意:如果你是非前端开发者,需要安装Node环境

首先命令行中全局安装下面的插件:

npm i -g whistle.automock

找到Plugins里的automock并打开

你还不知道Whistle?打造最舒适的抓包环境!

你还不知道Whistle?打造最舒适的抓包环境!

/api.juejin.cn/ automock://href

这里我用了正则表达式匹配,你也可以使用前面提到的其他方式

点击打开Mock开关, 然后就可以直接修改响应内容并保存了~ 相关细节大家可以自己摸索

你还不知道Whistle?打造最舒适的抓包环境!

2. 响应状态码Mock

/api.juejin.cn\/xxx/ replaceStatus://200

3. 修改、替换JS

场景1:添加sourcemap并debug线上原始代码

你还不知道Whistle?打造最舒适的抓包环境!

//# sourceMappingURL=https://xxxx/obj/static/xxxx/e66b202.js.map

我们可以为它最后添加sourcemap, 当然, 这里仅仅是个例子,需要你手动build线上的项目,获取到它的sourcemap文件。

Rules中的配置:

# 这一步为js文件插入了sourceMappingURL
/app\.990d7bb3\.js/ jsAppend://`{sourcemap}` 

```sourcemap
//# sourceMappingURL=${url}.map
```

/app\.990d7bb3\.js\.map/ file://{sourcemapfile}

其实就两步:

  • 注入sourceMappingURL注释
  • 请求sourceMappingURL的文件时,返回对应的map.

这里需要你在Values创建一个Key, 名为sourcemapfile, 里面填上你的sourcemap代码即可。

最后的效果如下:

你还不知道Whistle?打造最舒适的抓包环境!

然后你就可以愉快的调试线上代码了~

场景2:修改线上代码查看运行结果

/e66b202\.js/ jsBody://{source}

```source
// 这里填写拷贝过来的线上代码, 然后可以直接修改
```

4. 修改、替换CSS

场景1:替换CSS文件

例如xxx.css的内容替换为cssContent中的内容

/xxx.css/ cssBody://{cssContent}

```cssContent
div {
  color: red
}
```

场景2:添加CSS内容

使用cssAppendcssPrepend就可以在css代码的后面和前面插入代码。

/xxx.css/ cssAppend://{cssContent}

```cssContent
div {
  color: red
}
```

5. 修改、替换HTML

场景1:注入vConsole

这里使用了htmlAppend

www.baidu.com htmlAppend://{injectConsole}

```injectConsole
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  var vConsole = new window.VConsole();
</script>
```
你还不知道Whistle?打造最舒适的抓包环境!

场景2:注入神策或其他需要尽早执行的SDK

这里使用了htmlPrepend

juejin.cn htmlPrepend://{injectConsole}

```injectConsole
<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.14.7/vconsole.min.js"></script>
<script>
  var vConsole = new window.VConsole();
</script>
```

7. 请求转发

场景1:测试环境代理到本地

# 先把请求转到test环境
xxx.dev.cn xxx.test.cn

# 替换dev环境请求中的token
xxx.dev.cn reqHeaders://{testTodev}
```testTodev
authorization: 这里可以填写test环境的token
```

8. log调试

方式1:inspect插件

安装inspect插件,可以注入vConsolemdebug等Log日志工具

npm i -g whistle.inspect

编写规则

# 默认 vConsole
juejin.cn whistle.inspect://

# 注入vConsole
juejin.cn whistle.inspect://vConsole

# 注入mdebug
juejin.cn whistle.inspect://mdebug

# 注入eruda
juejin.cn whistle.inspect://mdebug
你还不知道Whistle?打造最舒适的抓包环境!

方式2:log规则

juejin.cn log://
你还不知道Whistle?打造最舒适的抓包环境!

方式3:chii插件

这个插件内置了Chrome DevTools, 可以直接使用chrome调试页面。

首先安装whistle.chii插件

npm i -g whistle.chii

然后编写规则

juejin.cn whistle.chii://

按如下步骤操作。

你还不知道Whistle?打造最舒适的抓包环境! 你还不知道Whistle?打造最舒适的抓包环境!

点击inspect后就能看到调试页面(不支持debug源码)

你还不知道Whistle?打造最舒适的抓包环境!

9. 设置跨域

通过代理,在开发环境中,我们就不需要后端去设置cors了。

xxx.dev.cn resCors://*

10. 延迟返回

延迟1000ms返回

xxx.dev.cn/api/info resDelay://10000

11. 编写Node代码修改请求和响应

whistle.script为whistle的一个扩展脚本插件,可以直接在界面上引用全局安装的Node模块及Node的内容模块编写脚本操作请求及其响应,所有正常Node程序可以实现的功能,都可以通过该插件实现。

先来安装一下插件:

npm install -g whistle

然后打开插件:

你还不知道Whistle?打造最舒适的抓包环境!

插件界面: 你还不知道Whistle?打造最舒适的抓包环境!

编写好代码后,需要添加上规则,代表哪些请求需要经过插件处理。例如访问www.baid.com时,修改请求信息。

whistle.script://auth www.baidu.com

操作请求

最常用的功能就是操作请求了,我们可以通过如下代码,直接修改请求的一切信息~

exports.handleRequest = async (ctx, request) => {
	// ctx.fullUrl 可以获取请求url
	// ctx.headers 可以获取请求头
	// ctx.options 里面包含一些特殊的请求头字段,分别可以获取一些额外信息,如请设置的规则等
	// ctx.method 获取和设置请求方法
	// ctx.req
	// ctx.res
	const { req, res } = ctx;
	const client = request((svrRes) => {
		res.writeHead(svrRes.statusCode, svrRes.headers);
		svrRes.pipe(res);
		// try {
			// const body = await ctx.getStreamBuffer(svrRes);
			// delete svrRes.headers['content-encoding'];
			// res.writeHead(svrRes.statusCode, svrRes.headers);
			// res.end(body);
		// } catch (err) {}
	});
	req.pipe(client);
};

...其他用法大家参考文档 whistle.script

六、Nohost 抓包调试平台

Nohost 是基于 Whistle 实现的环境配置与抓包调试平台支持多账号、多独立环境。现在已经在我们的团队中部署, 效率确实有一定的提高。它的用法我就不多阐述了。下面是github和相关文档:

nohost的功能亮点

nohost除了提供了Whislte基础的功能以外,还实现了很多实用的功能,下面来简单介绍一下

功能1:分享链接

这个功能就很方便了,不管对方是开发还是测试,都可以通过链接获取完整的请求和响应信息

你还不知道Whistle?打造最舒适的抓包环境!

你还不知道Whistle?打造最舒适的抓包环境!

你还不知道Whistle?打造最舒适的抓包环境!

功能2:共享规则

Rules中输入@符号,就有相应的提示,能直接使用别人写好的规则,非常方便~

你还不知道Whistle?打造最舒适的抓包环境!

参考