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：

jsx 复制代码

npm install -g whistle

启动服务：

jsx 复制代码

w2 start

访问配置页：

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

问题：

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

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

移动端调试

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

whistle 证书配置

查看代理地址：

jsx 复制代码

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

配置流程：

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

移动端查看页面

基础信息：

jsx 复制代码

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

快捷地址：

markdown 复制代码

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）本地项目，移动端查看页面

jsx 复制代码

需求：电脑本地启动项目，访问地址为 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同一网络下
网络配置代理 ⇒ 手动 ⇒ 配置服务器和端口

scss 复制代码

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）移动端访问本地开发网页

jsx 复制代码

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

2）whistle 配置 weinre

3）weinre 调试移动端网页

线上环境

操作步骤：

1）移动端访问网址

jsx 复制代码

https://m.xxx.com/

2）whistle 配置 weinre

jsx 复制代码

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

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

重定向

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

替换规则：

jsx 复制代码

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

替换请求的数据

摄影数据mock

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

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

json 复制代码

{
    "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账号"。

json 复制代码

{
    "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标签，在规则编辑框中输入上面提到的规则语句，参考如下：

jsx 复制代码

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即可

jsx 复制代码

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

问题与参考

问题：

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

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

参考：