Whistle(基于 Node 实现的跨平台抓包调试工具)的使用

Whistle(基于 Node 实现的跨平台抓包调试工具)的使用

基于Node实现的跨平台抓包调试工具

可以劫持网络请求，并进行请求和响应的修改，来提高我们的开发调试效率

1.一键安装(装包/证书)

npm i -g whistle && w2 start --init

证书的问题

1. 安装证书。确保是绿色

2. 重启wjistle , 敲 w2 restart

https://juejin.cn/post/6930414273327792135

2.浏览器打开

http://localhost:8899

3.安装浏览器拓展(需要科学上网)

Proxy SwitchyOmega

4.浏览器拓展-新建情景模式

填写代理服务器选择填写

HTTP localhost 8899

不代理的地址列表填写

<-loopback>

安装http-server

npm i -g http-server

解决图片跨域

1.新建规则:

(1)Rules中点击上边Create新建规则:www.runoob.com resCors://*

(2)新建规则:www.runoob.com resHeaders://{crosHeader}

Values中新建crosHeader 输入access-control-allow-origin: *

2.勾选

3.网络中停用缓存

忽略代理(过滤)www.baidu.com/s ignore://*

Whistle常见命令

w2 start

w2 stop

w2 restart

w2 add

正则匹配

匹配特定页面 /ke.qq.com/course/\d+/ localhost:8080

匹配所有请求 * localhost:8080

匹配关键词 /api/i test.api.com

路径匹配

匹配指定路径下的所有请求 ke.qq.com/cgi-bin www.test-dev.com

匹配http请求 http://www.test.com/api www.test-dev.com

精确匹配

只匹配单个路径，不包含子路径

**$**www.baidu.com localhost:8081/http

通配匹配

匹配开头 ^www.example.com/test/*** referer://http://www.test.com/$1

匹配开头和结尾 ^www.example.com/test/***test$

绑定转发

将域名转发到本地进行开发 ke.qq.com localhost:8080

在将后台请求分别转发到开发和测试环境 ke.qq.com/api test.ke.qq.com/apike.qq.com/api dev.ke.qq.com/api

修改请求

修改浏览器UA (场景：伪造设备) ke.qq.com ua://{wp_ua}

修改请求referer （场景：伪造来源） ke.qq.com referer://https://baidu.com/

修改请求头 ke.qq.com reqHeaders://{req-headers}

修改响应

修改响应头，加跨域内容 ke.qq.com resHeaders://{res-cors}

往html文档(之前)追加html标签(script,style or normal html tag) ke.qq.com htmlbody://{bodycss}

往js响应追加脚本，如果响应是html文档，则自动用<script></script>包装后插入 ke.qq.com js://{env.js}

往css响应追加样式，如果响应是html文档，则自动用<style></style>包装后插 ke.qq.com css://{css-test}

resReplace，替换响应的某些字符串 ke.qq.com resReplace://{res-replace}

使用线上域名代替本地开发

将 ke.qq.com/user/index 代理到本地 localhost进行开发

设置静态文件转发, ke.qq.com/user/index localhost:8080

发送获取用户信息请求

whistle向页面注入脚本

#注入本地环境变量
htmlPrepend://{env.script} ***.ke.qq.com 
```env.script
<script>
if (typeof window !== 'undefined') {
window.ENV = 'test';
}
</script>
```

whistle实现数据mock功能

ke.qq.com/cig-proxy/user_list {userList}

#list
[
   {name:213},
   {name:213}
]

``` ~~~

whistle实现数据mock功能

ke.qq.com/cig-proxy/user_list {userList}

#list
[
   {name:213},
   {name:213}
]