whistle是一款基于node的跨平台抓包工具, 可以通过配置的方式, 修改各种请求/响应: http、https、websocket等等; 并可以作为代理服务器使用;

安装

先全局安装

npm i -g whistle

基本操作

# 开始
w2 start
# 终止
w2 stop
# 查看状态
w2 status

可以将其设置为全局代理

# 设为全局代理
w2 proxy

# 关闭全局代理
w2 proxy off

当然, 不建议这么做, 毕竟我们不是每时每刻都在抓包, 也没必要, 所以可以安装switchyOmega代理插件, 装上之后, 新建一个情景模式:

输入服务器地址和端口号

因为whistle默认的端口为8899, 所以这里将代理端口设为8899; 如果想改变端口, 可以先stop然后重新start

w2 start -p 1234

点击应用选项保存

抓包界面

此时我们的浏览器上会出现一个圆圈标志, 我们将其点击下拉, 选中刚才创建好的情景模式whistle, 访问我们要访问的页面

然后另起一个tab, 访问localhost:8899, 如果你修改了端口号, 就用你修改后的端口号访问, 其界面如下:

中间大片区域就是抓包抓到的内容; 最左侧一列菜单栏分别是

network 就是上图展示的抓包内容
rules 访问规则
values 变量
plugins 插件

这些内容后续都会使用到

证书

获取证书

如果想要抓https的包, 就要安装CA证书, 这个证书其实可以直接从whistle界面上获取:

点击顶部菜单中的https, 在弹出的弹窗中, 点击Download RootCA, 下载到电脑上; 手机要获得证书则可以直接扫码, 手机就会弹出下载请求:

安装证书

电脑上的, 将证书添加钥匙串访问, 此时其实还是不被信任的, 需要再次双击证书, 在弹出的弹窗中选择始终信任

手机上的则点击设置>通用>关于本机, 选择底部的证书信任设置:

选择刚才下载的证书

移动端调试

日常开发中, 可能需要用到抓包的, 更多是移动端, 移动端抓包也很容易, 首先, 将手机和电脑连接到同一个wifi下, 以苹果手机为例:

配置代理

先进入无线局域网页面:

点击感叹号, 进入配置代理

输入电脑的内网ip地址和代理端口号

这样我们就可以直接在电脑上抓取手机的包了

插入vconsole

vconsole也是我们调试移动端设备重要工具, 但是, 通常情况下我们只能在测试环境使用, 正式环境不可能开启, 而通过whistle, 我们可以让vconsole动态插入到正式环境!

首先, 安装相关插件

sudo npm install -g whistle.inspect

whistle.inspect集成了 vConsole、eruda、mdebug 等调试H5页面工具的插件;

然后配置rules菜单, 即规则部分, 通常由两部分组成:

# whistle将通过pattern匹配来完成对应uri的操作
pattern operatorURI

其中pattern通常形如www.test.com这种, 目的就是为了匹配请求路径

whistle根据这个, 去匹配url, 并对匹配到的url进行对应的操作operatorURI; 如果operatorURI不是请求路径, 那它和pattern的位置可以互相调换!

我们新建一个rule, 然后注入以下rule配置

https://m.baidu.com whistle.inspect://vConsole
https://m.baidu.com whistle.inspect://eruda
https://m.baidu.com whistle.inspect://mdebug

这里的pattern为m.baidu.com目的是匹配百度移动版的协议和域名, 然后注入前面我们安装的插件

此时访问手机百度:

可以看到, vconsole被注入了

调试dom

虽然我们可以动态注入vconsole了, 但是vconsole中查看dom还是颇为麻烦, 所以, 这里就要用到whistle集成的weinre功能了;

可以再新建一个rule, 然后输入以下配置

https://m.baidu.com weinre://test

点击顶部菜单Weinre, 下拉框中我们可以看到一个test按钮

点击test按钮后进入, targets变绿色之后, 点击顶部Elements按钮

此时就可以看到手机页面的dom节点, 我们试着修改下dom的内容

可以看到手机上也会发生改变:

调试样式

前面可以查看编辑dom节点, 但是还是不能调整样式, 此时, 还要安装一个插件

npm i whistle.chii -g

配置对应的rule

https://m.baidu.com whistle.chii://

然后再次打开页面, 选中元素

可以看到, 样式出来了

注意, 我们安装的所有插件, 都在左侧菜单栏的plugins之下:

修改数据

首先, 来尝试修改下请求头

我们在values菜单中新增一个value, 并命名为headers.json, 注意, 要加上后缀, 这样whistle才能正确解析

{
	"custom": "hello"
}

然后在rule中增加配置

刷新浏览器, 可以看到请求头被加上了

还有其他, 修改返回体, 修改响应头等等, 都是类似的

# 修改响应体
# rules
www.baidu.com resBody://{test-resBody.html}

# values
# test-resBody.html
Body body

# 修改响应头
# rules
www.ifeng.com resHeaders://{test-resHeaders.json}

# values
# test-resHeaders.json
x-test1: value1
x-test2: value2
x-testN: valueN

whistle入门

安装