whistle抓包工具的使用介绍

Posted 旅行者1号技术团队

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了whistle抓包工具的使用介绍相关的知识,希望对你有一定的参考价值。

一:简介

1:常用的抓包软件比较

1:mac的Charles

whistle抓包工具的使用介绍_抓包

2:windows的filddler

whistle抓包工具的使用介绍_html_02

有平台限制,配置较繁琐。

2:whistle的优势

免费,开源,跨平台的代理抓包软件。配置相对简单,功能强大,可以通过node模块扩展功能

官网:​​wproxy.org/whistle/​

whistle抓包工具的使用介绍_抓包_03

gitHub: ​​github.com/avwo/whistl…​

whistle抓包工具的使用介绍_html_04

主要的功能简介

whistle抓包工具的使用介绍_css_05

whistle抓包工具的使用介绍_抓包_06

二:安装和启动

1:安装node

https://nodejs.org (官网下载对应的node,一般推荐长期稳定版本 LTS)
需要node的版本是大于 v0.10.0
查看自己本地node 版本号 node -v
复制代码

whistle抓包工具的使用介绍_css_07

whistle抓包工具的使用介绍_html_08

2: 安装 whistle

npm  i -g whistle
复制代码

3: 启动

1)w2 start

whistle抓包工具的使用介绍_css_09

默认端口为8899,若有冲突或者被占用,可以使用 w2 start -p 新的端口号 重置端口

浏览器访问,​​http://127.0.0.1:8899/​​ 出现如下界面说明启动成功

whistle抓包工具的使用介绍_html_10

4:常用命令

w2 或者 whistle help 查看帮助信息

w2 restart 重启(改了userList.json文件中数据之后要重启才生效的)

w2 stop 关闭

三:谷歌浏览器安装插件

安装启动whistle后,通常浏览器需要设置代理指向whistle Server地址127.0.0.1:8899,为了方便切换,chrome下推荐安装使用proxyOmega插件来提高切换效率,这样就可以一键切换代理

下载地址:

​github.com/FelisCatus/…​

whistle抓包工具的使用介绍_css_11

在谷歌的扩展程序中拖入

whistle抓包工具的使用介绍_css_12

whistle抓包工具的使用介绍_css_13

界面效果为

whistle抓包工具的使用介绍_css_14

四:功能和使用

1:监听抓包指定的域名下的请求

whistle抓包工具的使用介绍_抓包_15

效果图

whistle抓包工具的使用介绍_html_16

whistle抓包工具的使用介绍_css_17

2:资源请求转发(将线上资源文件替换为本地的文件)

如果线上环境有特殊问题。没法在生产环境复现,这个时候就可以直接替换js文件到本地进行调试,提高调试效率。


  1. 替换线上的js为本地js(可以排查线上的js文件版本不对啊,内容有错之类)

prepend 表示在前面加,body 表示直接替换,append 表示在后面加

eg: 将百度首页加载的jquery文件替换为自己本地指定的文件

​dss0.bdstatic.com/5aV1bjqh_Q2…​​ file:///Users/Yelei/Desktop/share/baidu_insert.js

在value中的配置(两种方式有差异)

whistle抓包工具的使用介绍_html_18

1)使用绝对路径的引用方式

whistle抓包工具的使用介绍_抓包_19

whistle抓包工具的使用介绍_抓包_20

2) 使用引入value中引入的内容。此方式保留了原文件

whistle抓包工具的使用介绍_css_21

​dss0.bdstatic.com/5aV1bjqh_Q2…​​ jsPrepend://baidu_insert.js

whistle抓包工具的使用介绍_抓包_22


  1. 替换为另一线上路径

比如访问随便一个网址,可以将其指向到想对应域名去

​123.com​​ ​​www.baidu.com​

whistle抓包工具的使用介绍_抓包_23

3: 注入html, css,js

注入的文件内容可以是保存在自己电脑中的文件,也可以写在value中。两种方式都可以


  1. css注入,改变百度首页的字体颜色为红色

存储在自己电脑上

​www.baidu.com​​ css:///Users/Yelei/Desktop/share/baidu_resect.css

存储values中的

​www.baidu.com​​ cssPrepend://baidu_resect.css

whistle抓包工具的使用介绍_css_24

存储在files文件中的

​www.baidu.com​​ css:///$whistle/baidu_resect.css

whistle抓包工具的使用介绍_抓包_25

存储在files中的文件

whistle抓包工具的使用介绍_抓包_26

效果:

whistle抓包工具的使用介绍_html_271: js注入,百度首页注入vconsole.js

方式一:下载源码到本地

将vconsole.js的源码和初始化代码放在values中,在替换即可

​www.baidu.com​​ jsPrepend://vConsole.min.js #引入源码

​www.baidu.com​​ jsPrepend://vconsole.js #引入实例化的js

方式二:使用whistle提供的插件

npm i whistle.inspect

​www.baidu.com​​ whistle.inspect://

whistle抓包工具的使用介绍_css_28

2.html的注入

在百度首页增加一个宽高为100的红色盒子

​www.baidu.com​​ htmlPrepend://addDom.html

whistle抓包工具的使用介绍_抓包_29

4:访问自己的数据,模拟mock

​http://api/users/getUsers​​ file:///Users/Yelei/Desktop/share/users.json

whistle抓包工具的使用介绍_html_30

5: 手机代理到whistle

手机上安装https的证书

安装证书的步骤 参考文章: ​​cloud.tencent.com/developer/a…​

ios的在pc上下载之后(通过扫描pc端的https的二维码弹框下载证书),

或者通过微信/qq,把pc端的下载好了之后的证书文件在传递过去。

安装完成证书之后就可以在pc上使用界面了监听抓包在手机的应用。

设置 => 已下载描述文件 = >

whistle抓包工具的使用介绍_抓包_31

whistle抓包工具的使用介绍_抓包_32

whistle抓包工具的使用介绍_html_33

whistle抓包工具的使用介绍_html_34

将电脑、手机连在同一个局域网下 (一般连同一个 wifi 就可以,公司有网络策略限制得再想办法),点击 whistle 界面右上角的 Online,配置自己手机的代理地址为online中的ip地址即可,就能在桌面端监测抓包手机上的应用

whistle抓包工具的使用介绍_css_35

以上是关于whistle抓包工具的使用介绍的主要内容,如果未能解决你的问题,请参考以下文章

实用抓包工具:whistle

whistle学习之安装使用软件功能了解

使用whistle抓包实战

使用whistle抓包实战

whistle手机抓包

whistle浏览器抓包(以火狐浏览器为例)