search

masterkong / blog

文章区
21 stars 2 forks source link

whistle-基于Node实现的跨平台web调试代理工具 #12

Open masterkong opened 5 years ago

masterkong commented 5 years ago

whistle-基于Node实现的跨平台web调试代理工具

whistle 是基于Node实现的跨平台web调试代理工具，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用，基本上可以操作web请求的方方面面，且可以通过Node模块扩展功能。

image

准备工作

安装

npm install -g whistle

安装完成后，执行whistle help或 w2 help，可以查看whistle的帮助信息。

启动

最新版本的whistle支持三种等价的命令whistle、w2、wproxy

w2 start //启动
w2 restart //重启
w2 stop //停止

访问配置页面

whistle的启动命令非常友好，执行后会根据实际环境提示如何访问配置页面。如果能正常打开，whistle安装启动就完成了。 访问配置页面

设置浏览器代理

配置浏览器代理比较简单，不再赘述，也可以参考配置代理。

为了方便切换，Chrome下推荐安装Proxy SwitchyOmega插件来提高切换效率，可以一键切换代理。 SwitchyOmega

规则(Rules)

whistle 的所有操作都可以通过类似如下规则实现： pattern operatorURI

  1. pattern为匹配请求url的表达式，可以为：域名，路径，正则及通配符等多种匹配方式。完整内容参见：匹配模式

  2. operatorURI为对应的操作，由操作协议+操作值组成(operatorURI = opProtocol://opValue):

    opProtocol(操作协议)，对应某类操作，如：

    # 设置请求服务器IP--host
pattern host://opValue

# 本地替换--file协议
pattern file://opValue

    opValue(操作值)， 对应具体操作的参数值，如：

     # 设置请求服务器IP--host协议
 pattern host://127.0.0.1:6666 # 或 pattern 127.0.0.1:6666

 # 本地替换--file协议
 pattern file:///User/test/dirOrFile # 或 pattern /User/test/dirOrFile
 pattern file://E:\test\dirOrFile # 或 pattern E:\test\dirOrFile

    完整内容参见：操作值

  3. pattern 和 operatorURI 在多数情况下位置可以调换，且支持组合模式，具体参见：配置方式
  4. 采用 # 为注释符号

    常用功能

    查看https请求

    HTTPS、Websocket需要开启HTTPS拦截才可以正常抓包及使用所有匹配模式，否则只能用域名匹配。

安装好根证书(只需要在浏览页面的一端安装就行)以及勾选"Capture TUNNEL CONNECTs"才能正常查看HTTPS、Websocket请求。 Network查看https请求

log协议查看页面console输出和js错误

whistle内部实现了类似浏览器console的远程Log平台，只需配置简单的whistle规则即可捕获页面错误及console输出。

如果查看https页面，需要先开启https拦截。

以https://www.baidu.com 为例。规则配置如下：

log协议

Network查看console输出：

Network查看console输出

log协议还可以在查看页面原有的console输出时，注入自己的console信息

m.baidu.com log://

# 如果你想同时注入js脚本，可以用下面一种方式
# 在mac或linux加载本地js文件/User/xxx/test.js
# m.baidu.com log:///User/xxx/test.js
# 在windows上加载本地js文件D:\xxx\test.js
# m.baidu.com log://D:\xxx\test.js
# 直接从whistle的Values配置的key-value里面获取脚本
# m.baidu.com log://{test.js}

key-value方式获取脚本：

key-value方式获取脚本

jsAppend协议注入js

往content-type为html或js的响应内容后面追加数据，如果是html，则会自动加上 script 标签在追加到响应内容，如果是js，则会自动追加到js文本后面

在有些资料上会提到 js 协议，whistle最新版本建议使用 jsAppend 代替

以在 https://xw.qq.com 中注入vConsole为例

# 直接从whistle的Vaules配置的key-value获取vconsole
xw.qq.com jsAppend://{vconsole.js}

image

类似的，通过htmlAppend、cssAppend可以注入html、css

weinre协议查看、修改页面DOM结构及其样式

whistle集成了weinre的功能，只需简单配置pattern weinre://id即可通过Weinre查看修改页面的DOM结构及其样式： weinre

Weinre查看页面DOM结构及样式 image

注意： vConsole和weinre不能同时使用

host协议映射、file协议本地文件替换


www.weiyun.com host://127.0.0.1:12345
h5.weiyun.com host://127.0.0.1:12345

/wy/(.+)/ file:///Users/xxx/code/wy/$1

### tpl协议mock接口数据
> [tpl](http://wproxy.org/whistle/rules/rule/tpl.html)基本功能跟[file](http://wproxy.org/whistle/rules/rule/file.html)一样可以做本地替换，但tpl内置了一个简单的模板引擎，可以把文件内容里面{name}替换请求参数对应的字段(如果不存在对应的自动则不会进行替换)，一般可用于mock jsonp的请求。
```javascript
xxx.jsonp?callback=jsonpcallbackfn tpl://{jsonp.json}
//jsonp.json
{callback}({code:200,data:{}})

上述jsonp的请求最终会返回 jsonpcallbackfn({code:200,data:{}})

resHeaders协议修改响应头

当tpl协议用于非jsonp请求时，可能会出现跨域的问题，可以通过对响应头增加CORS来解决。

xxx.com/headerAjax?cityId=1 tpl://({code:200,data:{}}) resHeaders://{cors}
//cors
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With,vtoken
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Allow-Origin: *

whistle对http请求具有强大的修改能力，具体功能可能查看：协议列表

参考资料

利用whistle调试移动端页面 利用whistle调试WebSocket和Socket请求 抓包调试protobuf请求 轻松篡改WebSocket数据包 使用whistle模拟cgi接口异常：错误码、502、慢网速、超时 whistle真机调试