一、Whistle 简介
Whistle 是一个基于 Node.js 的跨平台抓包调试代理工具。它不仅支持 HTTP 和 HTTPS 请求的截获和修改,还支持 WebSocket、TCP 等多种协议。通过简单的配置,开发者可以轻松实现流量监控、数据篡改、请求转发、Mock 数据等功能。
1.1Whistle的特点
- 多协议支持:支持 【HTTP、HTTPS】 客户端与服务器通讯协议、WebSocket【网络通讯协议】、TCP 【传输控制协议】等多种协议。
- 灵活配置:可以通过”简单易学“的规则配置拦截和修改网络请求。
- 强大的扩展性:支持插件机制,可以扩展更多功能。
- 跨平台支持:支持 Windows、Mac 和 Linux 多种操作系统。
1.2Whistle优势对比
whistle | finddler | charles | |
---|---|---|---|
跨平台 | 支持 | 不支持macos | 支持 |
实践难度 | 简单 | 中等 | 中等 |
付费 | 否 | 否 | 是 |
产品设计 | 网页 | 客户端 | 客户端 |
说明文档 | 中文 | 英文 | 中文 |
开源 | 是 | 否 | 否 |
二、Whistle 的安装与代理配置
npm install -g whistle
2.1常用命令
whistle stop
whistle start
whistle restart
若是指定端口号把对应的关键内容替换即可 比如w2 start -p 8003 -> w2 stop -p 8003
2.2配置电脑代理
安装完后进入计算机设置界面编辑下自己的代理
或者在控制面板编辑局域网内的代理,二种效果是一样的。
设置ca证书 ,配置如图,一图胜千言
2.3配置浏览器代理
谷歌:
安装brower专用插件-switchomega
https://chromewebstore.google.com/detail/proxy-switchyomega/padekgcemlokbadohgkifijomclgjgif
配置代理服务器、端口号如下 这个插件这里就不多介绍:
火狐:
地址栏:about:preferences
然后找到相关设置 设置自己的代理
2.4配置手机代理
手机扫码安装ca证书
安装证书成功后,手机设置该主机的ip地址
三、Whistle 应用案例
3.1流量监控
可以实时监控所有通过代理的网络流量,包括请求和响应的详细信息
操作步骤
- 打开 Whistle 管理界面,在“Inspectors”选项卡中,可以看到当前设定的所有的网络请求
- 点击具体请求,可以详细查看请求头、响应头、请求体、响应体等信息
3.2请求转发
可以根据配置规则将请求转发到指定的服务器,实现接口代理和调试功能
操作步骤
- 在管理界面“Rules”选项卡中添加转发规则
- 将所有访问某接口的请求转发到本地开发环境 例子:a.com b.com
在监控这里 我们本地访问baidu.com 自动转发请求到了qq.com
如果没有本地开发环境,智研平台提供mock接口服务:
创建好mock规则后,我们在postman上试试结果
可以看到,请求转发 调试成功了。
3.3伪造返回码
我们在测试页面或者接口 不同的返回码表示不同的效果,为了模拟这些极端情况,如果需要后端修改代强制返回后,服务还需要部署,这样测试是比较低效的,我们可以在本地直接设置接口的状态码的返回,达到测试效果。
操作步骤
- 在Rules管理界面,Create一个规则
- 设定自己的规则,a.com statusCode://404
- ctrl+s保存后打钩
3.4伪造返回结果
前端需要调用后端的api接口,这时可以伪造返回的结果来模拟后端的数据
操作步骤
接口请求原先结果
- 在管理界面“Values”选项卡中添加json内容
- xxx.com resBody://{result}
- 查看篡改后的请求结果
3.5请求头替换
相信大家在用postman 鉴权需要更新 或者 H5本地登录经常需要扫码 的情况,
我们可以通过这种方式,直接免修改登录
操作步骤
确认请求头鉴权信息,我把鉴权信息去掉了,请求提示未知的登录用户
1.在管理界面“Values”选项卡中添加内容
2.配置转发 xxx.com reqHeaders://{header}
3.请求成功,返回接口相关提示
3.6延迟响应
应用启动后,短时间内客户端多个接口频繁请求服务器但部分失败进行重试机制的相关case
或
模拟请求超时 页面的是如何处理这种异常情况的
操作步骤
1. 设置接口的延迟数 xx.com reDelay://1000 延迟一秒
2.最终延迟时间= 接口本身请求耗时+ 延迟时间,按需调整
启用强制中断功能,超过了2s就会网络超时
reqDelay://2000 enable://abort
3.7重定向
请求错误或者请求超时的情况下,看看系统能否在异常情况正确处理
注意!!!
请求转发和重定向存在 处理方式、目的 的不同:
重定向:将请求转发到其他url 通过其他服务器代理 缓存 管理,会经过3xx的响应码和一个新的url
请求转发:将请求转发到另一个url ,客户端只发送一个请求给服务器处理,处理结果返回给客户端
操作步骤
1.打开"Rules"选项卡,编辑规则 添加域名 redirect:// 重定向地址
2.查看结果
3.8模拟弱网
体验网络差的情况下,系统的表现,从而发现一些问题,
实际的网络环境和网络延迟可能会有所不同,可能需要调整参数
操作步骤
1.打开选项卡"Rules", 设置 域名、resSpeed://单位kb/s
2.查看结果
3.9自定义样式
对于我们常用的流量,我们可以设定不同的样式标记 我个人比较喜欢绿色,认为是在工具内最好看的颜色
操作步骤
1.打开选项卡”Rules“ 添加规则
https://test.mapugc.tencent.com style://color=@fff&fontStyle=italic&bgColor=green
参数说明:
color = 简化的颜色代码表示法 或者 16进制的颜色代码表示法
fontStyle=字体风格
bgColor=背景色
四、总结
Whistle 是一个功能强大、灵活性高、扩展性好的抓包工具,其多协议支持、灵活配置和良好的性能表现,使其在众多抓包工具中脱颖而出。
五、相关外部链接
- Whistle 官方网站
- Whistle Github 主页
- Whistle 插件市场