whistle 抓包工具调试实践

Whistle简介

whistle 是基于 Node 实现的跨平台抓包工具

• 特点
• 可以查看、修改 HTTP、HTTPS、 的请求、响应
• 替换线上文件
• 注入css、js
• whistle 的功能非常强大，由于上手几小时暂时只用到上述几个功能

whistle 代理配置

• 安装

  • npm install -g whistle

• 常用命令

  • 查看本机运行的 whistle 实例
    • w2 status
  • 启动
    • w2 start (默认端口：8899)
    • w2 start -p 8888
  • 重启
    • w2 restart
  • 关闭
    • w2 stop
  • 关闭全局代理
    • w2 proxy off

• 开启后打开浏览器 http://127.0.0.1:8899

• 先安装证书到电脑上（左上角的 Download RootCA）

• 点击顶部工具栏 create 新建规则

配合插件 Proxy SwitchyOmega

• chrome 安装插件 Proxy SwitchyOmega
• 因为全局代理的话可能会影响到其他客户端请求，使用插件使仅对 chrome 生效
• 创建
• 开启

实践

代理域名

• 情景
  • 比如一些什么Key之类的必须白名单域名下才行
• 规则如下

# 把本地接口 192.xxx 改为访问真实线上域名
http://192.168.123.94:8080/ManageInfo/GetSignature https://xxxx.com/ManageInfo/GetSignature

修改掘金矿石数量（修改接口返回）

• 先看图
• 改接口返回值（特殊情况下需要特定值，不需要去盲敲逻辑代码，或假数据）
• 无论刷新多少次都会生效
• 规则如下

# 掘金矿石数量接口
* resCors://enable
https://api.juejin.cn/growth_api/v1/get_cur_point file://{get_cur_point.json} 

注入JS片段

• 注入js代码，会在网页最后以 script 标签的形式插入
• 规则如下

https://www.baidu.com js://{test.js}

• Values 添加文件 test.js

console.log('===========注入JS代码===================');

替换文件

• 替换已上线项目的文件 (语法前面替换后面)
• ps:这是angularJs的旧项目
• 规则如下

//(本地文件) (远程文件)
file:///Users/13521/Desktop\team.js https://xxx.com/static/js/xxx.js

手机端项目调试

• APP中嵌入的 webview、或者公众号中的网站出问题，想要查看控制台怎么办？（仅测试公司项目http协议）

• 准备工作

  • 电脑和手机在同一个局域网下
  • 先安装证书到手机上（CA）
  • 手机在 WIFI 设置中手动设置代理配置
    • 代理主机名为电脑 IP
    • 代理端口为 whistle 端口
    • 安装证书（在 whistle 中点击工具栏 HTTPS）
  • 如果配置完代理，手机无法访问，可能是 whistle 所在的电脑防火墙限制了远程访问 whistle 的端口，需要关闭电脑的防火墙

• 可以利用注入 js 文件，把 vconsole 注入。代码如下

https://xxxxx.com/index.html js://{vconsole.min.js}

按住键盘ctrl+鼠标左击 会创建vconsole.min.js这个文件，需要复制vconsole源码进去，并写调用的代码。

• 官方介绍