whistle学习（一）之安装、使用、软件功能了解

前言

whistle是基于Node实现的跨平台抓包调试代理工具，有以下基本功能：

  • 查看HTTP、HTTPS请求响应内容

  • 查看WebSocket、Socket收发的帧数据

  • 设置请求hosts、上游http/socks代理

  • 修改请求url、方法、头部、内容

  • 修改响应状态码、头部、内容，并支持本地替换

  • 修改WebSocket或Socket收发的帧数据

  • 内置调试移动端页面的weinre和log

  • 作为HTTP代理或反向代理

  • 支持用Node编写插件扩展功能

具体功能如下：

一、安装启动

1、whistle安装过程需要以下步骤（缺一不可）

  • 安装Node

点击nodejs.org，其实安装node是为了安装npm

  • 安装whistle，如果提示没有权限，要以 admin 或 sudo 的方式运行

 npm install whistle -g // 安装whistle

  • 启动whistle

w2 start -p 8899（// 不设置端口默认使用8899）

  • 配置代理

在 whistle 启动完成后，我们需要将浏览器的请求代理到 whistle，这样 whistle 才能处理浏览器发出的请求。代理服务器，如果在本地则为127.0.0.1，如果部署在远程服务器或者虚拟机上，就改成对应IP即可。

  • 安装根证书

2、启动whistle详细说明

1、使用您的设备访问以下URL列表，获取您可以访问的URL的IP

2、将您的设备配置为使用whistle作为IP:8899上的HTTP和HTTPS代理

3、使用Chrome访问http://local.whistlejs.com/来开始

3、配置代理详细说明

说明一：配置方法

方法一：直接配置系统代理

方法二：安装浏览器代理插件，推荐方式

方法三：移动端需要配置当前WIFI的代理

说明二：直接配置系统代理

填写我们选择的IP和端口

说明三：xxxxxxx-xxxxx 安装与配置

【抓取pc端http请求】

1、访问这个链接，点击“添加至 CHROME”，点击弹框“添加扩展程序”，如果被墙了访问不了，可以 点这里 选择 xxxxxxx-xxxxx_Chromium.crx 下载，下载后在浏览器地址栏输入 chrome://extensions/，回车打开页面，将下载的文件拖动到 extensions 那个页面，点击安装扩展即可。

2、页面会自动跳转到 xxxxxxx-xxxxx 的配置页，点击“跳过教程”或观看教程

 

3、点击左侧“新建情景模式…”，弹框提示“情景模式名称”，你可以输入“whistle”

4、点“创建”按钮

5、代理服务器 -> 代理协议，这个下拉选择框选择 HTTP，将 example.com 改为 127.0.0.1，将 80 改为 8899

6、“不代理的地址列表” 的输入框里的所有文本都删掉，因为里面的 host 在本地开发很大概率会用到

7、点击左侧“应用选项”

8、点击 chrome 右上角的圆圈图标，切换成 whistle

9、浏览器输入 local.whistlejs.com，回车，能打开 whistle 的界面，说明 xxxxxxx-xxxxx 的配置 ok

 

 

这样就可以抓取pc端的包了！

4、安装根证书详细说明

抓取 https 请求需要安装证书，官网文档 已经很详细了

安装根证书RootCA

1、下载根证书

2、安装根证书

【抓取pc端https请求】

在抓取到的请求中点一个 https 请求并点上面的 https 按钮会弹出一个二维码，点下载证书下载后打开钥匙串。

 

添加后点箭头的证书会筛选出 whistle 证书，点开证书选择始终信任该证书。

这样就可以抓 https 的包了。 

安装了某台电脑的 whistle 证书，换另一台，还需要继续安装另一台电脑的 whistle 证书！

【抓取移动端http请求】

  • 手机和电脑连接同一网络

  • 在手机上配置代理，手机的网络里，找到链接的wifi，添加代理，将手机的服务器和端口设置为电脑ip和whistle的代理端口（8899）
  • pc上打来whistle web页面 浏览器访问： http://127.0.0.1:8899

  • 手机发请求，就可以在whistle 的web页面上看到抓到的包

1）获取Mac IP

Charles学习（一）之macOS Charles 4.x版本的安装、激活、使用以及软件功能了解中有提到两种方法

也可以通过whistle获取，点击 whistle 界面右上角的 Online

【抓取移动端https请求】

  • 安装证书，不安装证书的话， 是没办法抓取到https请求的内容的，一般的请求头还是有，但是内容是空的。

  • rootCA.crt 之所以能下载，是 whistle 做了代理，所以移动端安装证书时要先连上 whistle 的代理才能安装

  • 代理之后点击whistle web端的https按钮，手机扫描二维码，下载安装证书。然后再请求，就可以抓取到https了

二、whistle 的常用配置

通过w2 start启动后，访问给出的链接（http://127.0.0.1:8899/#rules/http://10.12.162.2:8899/#rules）即可打开whistle界面。

1、配置host

我们可以为某个域名或具体的 url 指定 ip，绕过 dns 解析，让请求直接到达指定的 ip。通常在工作中，开发、测试和预发布境的切换都通过切换 host 来实现，这样访问不同的环境不需要改变代码，或根据环境配置文件访问不同的 url。

以下是常用的配 host 方法:

将 qq.com 映射到 127.0.0.1，你访问 www.qq.com/ 时，请求的是本地的 127.0.0.1

127.0.0.1 qq.com

也可以把端口带上

127.0.0.1:3000 qq.com

甚至可以将指定的路径映射到某个 ip 和端口

127.0.0.1:3000 https://www.qq.com/a/b/c

当然，把规则反过来写也是生效的

https://www.qq.com/a/b/c 127.0.0.1:3000

有一个技巧就是在 “Rules” 界面下，可配多套 host 配置，比如 dev、gamma 等满足开发需求。

2、重定向

将 baidu.com 重定向到 qq.com

https://www.baidu.com/ redirect://https://www.qq.com/

此规则在移动端调试时有个场景特别有用：比如想在某个 APP 里打开一个的网页，但是该 APP 没有一个 url 输入框，我们可以随机地点击这个 app 的信息流，如果捕获到有页面请求，重定向为我们的 url 即可。

3、修改返回体

 该功能在后端接口挂了或者没有开发好的时候，可以模拟返回假数据，让前端调试可以不依赖后端

将 getUserList 这个请求的返回替换成本地的 userList.json 文件，如果觉得文件放在磁盘里写路径麻烦，可以放在 whistle 自带的 Values 里，那么上面的规则就更简洁了：

http://example.com/api/getUserList file://{userList.json}

 

创建的文件尽量带文件后缀，有语法高亮，另外如果不是 .json 结尾，whistle 不会在 Response Headers 里自动添加 content-type: application/json; charset=utf-8，那么一些请求库就拿不到正确的返回。

4、替换线上文件

如果有正式环境 bug，可以将 js 替换成本地文件或文件夹，提高调试效率。

http://example.com/cdn/example.js file://D:/path/to/your/file/example.js

5、替换请求 url

http://qq.com/a/b?c=d http://qq.com/v/w?x=y&z=z

注意：这个规则的修改在浏览器的 network 里体现不出来，因为请求已经发出去，到 whistle 层才被修改的，我们可以在 whistle 的 Network 右侧里看到 Real Url

6、修改返回码

通过修改返回码，可以模拟接口出错

https://www.qq.com statusCode://500

7、修改请求、响应的 header

Web 开发有时会遇到请求 header 设置不对带来的一些问题，如果问题出现在正式环境，我们可以通过修改请求 header （比如修改 Cookie、user-agent、Content-Type 等）来模拟修复，等确认问题后，再修改代码，提高效率。

https://www.qq.com reqHeaders://{loginCookie}

同样，我们可以通过 resHeaders 来修改响应头，上文提到我们可以通过 file://{userList.json} 来模拟假数据，但这么做可能导致一些跨域的 header 丢失，对此，我们可以通过 resHeaders 加上跨域相关 header

https://www.qq.com/some/ajax resHeaders://{CORSHeaders}

Values 中的 CORSHeaders 值为

Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, token
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
content-type: application/json
status: 200

8、插入 js  + 引入vConsole

我们可以在不修改页面代码的情况下，通过 whistle 往页面插入 js，比如我们插入一个使页面刷新的 js:

https://www.google.com jsPrepend://{reload.js}

更有用的，是往页面中插入调试相关的 js，比如 vConsole.js，我们当然可以到 github 上将 vConsole.min.js 下载到本地，或放在 Values 中，然后把初始化代码也加上，最后将 vConsole.js 注入到页面来 debug。不过，whistle 提供了更方便的插件:
sudo npm install whistle.inspect -g

https://www.google.com whistle.inspect://

9、插入css

 

 

10、reqScript

考虑一种场景：我们要测一个视频上传接口返回 500 的情况，看是否走到了正常的提示逻辑，通常我们模拟状态码就可以解决，但如果接口跨域了，会先发起一个路径一致的 options 请求，我们希望这个 options 请求依然返回 200，只处理 post 请求，这时我们可以这么做：

http://qq.com/media/video reqScript://{onlyPostRule}

Values 中的 onlyPostRule:

if (method === 'POST') {
rules.push('http://qq.com/media/video statusCode://500');
}

11、使用whistle内置的Weinre调试移动端页面

weinre相信大家都很熟悉，而whistle内置了weinre，使用方法如下：在rules配置：

http://www.qq.com weinre://test.js

这时候，就能在http://127.0.0.1:8899/weinre/client/#test 或界面主菜单 “Weinre” 可打开 inspect 界面调试该页面看：

12、转换 http 协议

转发协议+域名转发，轻松本地模拟 https ，访问线上的 https 域名实际上指向的是本地的 http 调试地址。


https://wq.jd.com http://localhost:9000

注意，涉及到 https 的请求都需要您的电脑和手机等都安装 whistle 提供的证书，详情可看文档。

小结

从上面可以看出 whistle 的大致工作流程：

  • 配置需要修改的 url 地址

  • 编写 URI 协议，如 statusCode://

  • 编写协议对应的参数，如 statusCode://404

可以看出 whistle 的操作都是通过文本配置去实现，比较符合程序员的思维。

whistle 可操作的资源的 request 、respond 的 header、 body， 其中 header 里面的 query 、ua 、 cookie、status Code 等数据对前端来说非常熟悉， 也都有相应的协议去操作这些数据。

实战

参考

Github-English 

Github-Chinese

Whistle，web 抓包与 debug 利器

whistle 使用实践

whistle--跨平台网络抓包调试工具

 

 

posted @ 2019-11-08 11:43  坤嬷嬷  阅读(11108)  评论(0)    收藏  举报