whistle 抓包工具与实践（mock、图片权限处理）-编程实验室

whistle 介绍

背景

在开发移动端原生 H5 或者 hybrid时，会遇到需要抓包、mock数据等需求，经过我自己的一番探索，发现 whistle 这款工具十分好用。我经常运用于如下场景：

HTTP 代理
Mock 数据
抓包、配置规则

使用案例：

比如我在处理图片接口时，会遇到图片源403的问题，这时候我们就可以通过 whislte 代理接口，去除接口请求源，从而能正常从服务器获取数据。

又比如，我需要模拟H5活动页中的特殊场景，比如凌晨活动自动刷新功能，😉 我不可能等到凌晨再刷新页面，这时候就可以mock接口数据，刷时间到凌晨，从而完成刁钻的功能测试。

whistle 介绍

概念：

Whistle 是一款基于 Node.js 开发的跨平台网络抓包与调试代理工具。它通过在本地启动一个代理服务器，拦截、转发并记录所有经过它的网络请求（如 HTTP、HTTPS、HTTP/2、WebSocket 等），从而帮助开发者查看、分析甚至修改网络数据，极大地便利了前端开发、API 调试和移动端测试等工作。

地址：https://github.com/avwo/whistle

安装 whistle

安装Whistle：

npm install -g whistle

启动服务：

w2 start

访问配置页：

域名访问 http://local.whistlejs.com/

问题：

安装https证书后，访问网页可能会提示“您的连接不是私密连接”。

这可能是由于证书没生效导致的。重启一下电脑即可。

移动端调试

注：可以暂时先配置pc端，调通了再配置移动端。

whistle 证书配置

查看代理地址：

nathanchen@NathansMacBook-Pro ~ % w2 start [i] Whistle@2.9.103 started [i] 1. Use your device to visit these URLs and note which one works: http://127.0.0.1:8899/ http://172.16.8.200:8899/ Note: If none are accessible, check your firewall settings For help, see https://github.com/avwo/whistle [i] 2. Set your device's HTTP PROXY to the working IP & PORT(8899) [i] 3. Open Chrome and visit http://local.whistlejs.com/ to begin

配置流程：

“设置”>“通用”>“关于本机”>“证书信任设置”。
在“针对根证书启用完全信任”下，开启对这个证书的信任*

移动端查看页面

基础信息：

XXX_5G：172.20.9.210 // http://172.18.9.210:8080/photo?type=-2

快捷地址：

http://172.16.12.78:8080/

移动端显示页面配置步骤：

确认网络连接

确保你的电脑和iPhone连接到同一个Wi-Fi网络。这是手机能够访问电脑本地服务的基础。

查找电脑的本地IP地址

你需要知道电脑在局域网中的IP地址来代替localhost。

macOS用户：打开系统偏好设置>网络，可以看到IP地址，通常是192.168.x.x或10.x.x.x的形式。也可以在终端输入ifconfig查找。
Windows用户：在命令提示符中输入ipconfig，查找IPv4 地址。

在iPhone上访问本地项目

在iPhone的Chrome浏览器地址栏中，输入以下地址进行访问：

http://<你的电脑IP地址>:8080/photography?type=-2

例如，如果你的电脑IP是192.168.1.100，则访问：

http://192.168.1.100:8080/photography?type=-2

疑问与解答：

1）本地项目，移动端查看页面

需求：电脑本地启动项目，访问地址为 http://localhost:8080/photography?type=-2， 开发者希望在 ios移动端的谷歌浏览器上查看页面，请问该如何实现？

1）本地项目，移动端查看页面

需求：电脑本地启动项目，访问地址为 http://localhost:8080/photo?type=-2，开发者希望在 ios移动端的谷歌浏览器上查看页面，请问该如何实现？

实现步骤：

确认网络连接

确保你的电脑和iPhone连接到同一个Wi-Fi网络。这是手机能够访问电脑本地服务的基础。

查找电脑的本地IP地址

你需要知道电脑在局域网中的IP地址来代替localhost。

macOS用户：打开系统偏好设置>网络，可以看到IP地址，通常是192.168.x.x或10.x.x.x的形式。也可以在终端输入ifconfig查找。
Windows用户：在命令提示符中输入ipconfig，查找IPv4 地址。

在iPhone上访问本地项目

在iPhone的Chrome浏览器地址栏中，输入以下地址进行访问：

http://<你的电脑IP地址>:8080/photography?type=-2

例如，如果你的电脑IP是192.xxx.1.100，则访问：http://192.xxx.1.100:8080/photography?type=-2

Weinre真机远程调试

Weinre(Web Inspector Remote)是一款基于Web Inspector(Webkit)的远程调试工具，它使用JS编写，可以让我们在电脑上直接调试运行在手机上的远程页面。

**使用场景：**页面在手机，调试在电脑。

whistle内置Weinre：

1）配置调试地址：点击dev进入移动端调试页面

2）手机访问 H5 页面

比如：https://juejin.cn/user/2889939852205864

3）在 Weinre 中调试页面

whistle 实践

移动端抓包

基础配置：

手机和PC同一网络下
网络配置代理 ⇒ 手动 ⇒ 配置服务器和端口

nathanchen@172 ~ % w2 start [i] Whistle@2.9.103 started [i] 1. Use your device to visit these URLs and note which one works: http://127.2.0.1:8899/ http://172.18.9.200:8899/

开发环境

操作步骤：

1）移动端访问本地开发网页

http://<你的电脑IP地址>:8080/photo?type=-2

2）whistle 配置 weinre

3）weinre 调试移动端网页

线上环境

操作步骤：

1）移动端访问网址

https://m.xxx.com/

2）whistle 配置 weinre

https://m.xxx.com weinre://xxxm

3）weinre 调试移动端网页（同开发环境）

重定向

**效果：**重定向 github 到 baidu

替换规则：

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

替换请求的数据

摄影数据mock

**需求：**目前本地请求接口http://localhost:8080/photog/big

接口返回部分数据在谷歌开发者工具中查看如下：

{"code":200,"msg":"Succ","data":{"list":[{"uid":134923,"avatar":"https://img.xxx.com/test.jpg?image/0/w/400","username":"test","fanCount":7,"followCount":0,"intro":"test账号","cert":[],"isTal":false,"islow":true,...}

开发者希望将list中的第一个项目的"intro": “test账号”,改为"intro": “nathan账号”,

实现方案：

在 Values 中创建修改后的数据文件
- 在 Whistle 界面点击Values标签。
- 点击Create创建一个新的键值对，例如键名设为modifiedResponse.json。
- 在值的内容区域，将完整的、修改后的 JSON 响应体粘贴进去，确保已将"intro": "test账号"改为"intro": "nathan账号"。
```
{"code":200,"msg":"Succ","data":{"list":[{"uid":1349678,"avatar":"https://img2.xxx.com/test.jpg?imageView2/0/w/400","username":"test账号","fanCount":7,"followCount":0,"intro":"nathan账号","cert":[],"isTal":false,"islow":true,...// 确保其余结构和数据与原响应完全一致},...// 其余 list 项]}}
```
编写并启用规则
- 点击Rules标签，在规则编辑框中输入上面提到的规则语句，参考如下：

http://localhost:8080/app/photos/recommend/master?page=1 resBody://{modifiedResponse.json}

确保规则已启用。
保存规则。

验证结果
- 回到您的浏览器，打开开发者工具的Network选项卡。
- 访问http://localhost:8080/photo/master页面，使其再次请求目标接口。
- 找到名为recommend/master?page=1的请求，查看其Response选项卡，确认intro字段的值已成功变为"nathan账号"。

权限问题

图片 403

问题描述：

当用户访问http://localhost:8080/photography/test页面时，调用接口获取数据，

图片接口：

https://img.xxx.com/ps/2024/07/one/xxx==1720691006008.jpg?imageMogr2/auto-orient/thumb/!500x500r/strip/quality/90

返回状态码Status Code 403 Forbidden

问题分析：

在项目中，开发者一般通过给图片配置 referrerpolicy=“no-referrer” 来解决问题：

<img class="commission__wrap__arrow" referrerpolicy="no-referrer" src="./images/arrow__right.png" />中的referrerpolicy="no-referrer"

但是给项目的每个图片都这么配置，感觉不够优雅。

分析下原因，是由于图片服务器检查 Referer，非白名单域名返回 403

**配置方式：**找到接口，处理掉图片接口的Referer即可

# 图片防盗链 img2.xxx.com referer:// img4.xxx.com referer://

问题与参考

问题：

无法代理本地前端项目（localhost）：

https://github.com/avwo/whistle/issues/1145

参考：

为什么推荐使用Whistle而不是Fiddler、Charles！
Whistle 让你满意的代理工具
Whistle 开发调试最佳实践

whistle 抓包工具与实践（mock、图片权限处理）

whistle 介绍

背景

whistle 介绍

安装 whistle

移动端调试

whistle 证书配置

移动端查看页面

Weinre真机远程调试

whistle 实践

移动端抓包

开发环境

线上环境

重定向

替换请求的数据

摄影数据mock

权限问题

图片 403

问题与参考

Java房屋租赁收租系统vue3

SQL必会必知整理-16-全文本搜索

ZetaChain 跨链原子性解析：技术机制、生态展望与开发实战

港口集装箱起重机防摇辅助系统

2026年AI应用大爆发五大趋势，从70位创业者口中得知，非常详细收藏我这一篇就够了

Java面试也太卷了！投100份简历3个面试，2026年春招有希望吗？如何快速突击？

whistle 介绍

背景

whistle 介绍

安装 whistle

移动端调试

whistle 证书配置

移动端查看页面

Weinre真机远程调试

whistle 实践

移动端抓包

开发环境

线上环境

重定向

替换请求的数据

摄影数据mock

权限问题

图片 403

问题与参考

Java房屋租赁收租系统vue3

SQL必会必知整理-16-全文本搜索

ZetaChain 跨链原子性解析： 技术机制、生态展望与开发实战

港口集装箱起重机防摇辅助系统

2026年AI应用大爆发五大趋势，从70位创业者口中得知，非常详细收藏我这一篇就够了

Java面试也太卷了！投100份简历3个面试，2026年春招有希望吗？如何快速突击？

ZetaChain 跨链原子性解析：技术机制、生态展望与开发实战