Whistle 前端抓包

whistle文档：http://wproxy.org/whistle/install.html

1.确保电脑安装了node

node -v
1

如果能正常输出Node的版本号，表示Node已安装成功

2.安装whistle

npm install -g whistle
1

whistle安装完成后，执行命令 whistle help 或 w2 help，查看whistle的帮助信息
如果能正常输出whistle的帮助信息，表示whistle已安装成功。

3.配置代理

• 全局代理（推荐）
  Mac: System Preferences > Network > Advanced > Proxies > HTTP or HTTPS

• 浏览器代理（推荐）
  安装Chrome代理插件：推荐安装SwitchyOmega
  
• 移动端需要在设置中配置当前Wi-Fi的代理，以 iOS 为例：
  

访问配置页面
启动whistle及配置完代理后，用Chrome浏览器(由于css兼容性问题界面只支持Chrome浏览器)访问配置页面，如果能正常打开页面，whistle安装启动完毕，可以开始使用。

可以通过以下两种方式来访问配置页面：

方式1：域名访问 http://local.whistlejs.com/
方式2：通过ip+端口来访问，形式如 http://whistleServerIP:whistlePort/ e.g. http://127.0.0.1:8899
方式2：通过命令行参数 -P xxxx 自定义webui的端口(xxxx表示要设置的端口号)，自定义端口支持上述两种方式访问，也支持 http://127.0.0.1:xxxx

安装到这步访问http://127.0.0.1:8899正常，就证明可以抓取HTTP包啦
如果需要抓取HTTPS的包，则需要安装证书

4.安装证书

如上图下载完根证书后点击rootCA.crt文件，弹出根证书安装对话框。

• Windows:
  
• Mac:
  Mac 安装证书后，需要手动信任证书，步骤如下：
  双击刚才下载的文件，会自动跳转到证书管理界面
  
  双击证书后，点击 Trust 左边展开选项，红色部分选择 Always Trust （总是信任），点击左上角关闭当前界面会要求输入密码；输入密码后可 以看到证书上面红色的图标 x 不见了，到这一步说明完成证书安装。
  
• 手机
  iOS
  1.手机设置代理后，Safari 地址栏输入 rootca.pro，按提示安装证书（或者通过 whistle 控制台的二维码扫码安装，iOS安装根证书需要到连接远程服务器进行验证，需要暂时把Https拦截功能关掉）
  2.iOS 10.3 之后需要手动信任自定义根证书，设置路径：Settings > General > About > Certificate Trust Testings
  
  Android
  1.whistle 控制台二维码扫码安装，或者浏览器地址栏 rootca.pro 按提示安装
  2.部分浏览器不会自动识别 ca 证书，可以通过 Android Chrome 来完成安装
  3.android 6.0 之后的一些app在成功安装证书后仍然无法对https连接进行手抓包，有可能是该app没有添加信任用户自定义证书的权限。请确认该app是否有如下配置：

<base-config cleartextTrafficPermitted="true">
   <trust-anchors>
       <certificates src="system" />
       <certificates src="user" />
   </trust-anchors>
</base-config>
1
2
3
4
5
6

配置好以上的内容，此时whistle就能看到HTTPS、Websocket的请求啦