jsp页面被注入js抓包就指着它了whistle晋升前端开辟幸福感的利器

whistle一脱手便是抓包工具的极限，那年它双手插兜不知道什么是对手（doge）。

安装&利用安装与启动whistle

npm install -g whistlew2 start // 启动whistlew2 stop //停滞whistle

启动之后会在本机启动一台做事器，默认端口是8899

在本机打开该地址会进入whistle的掌握面板，如下图所示。
抓包，修正要乞降相应的内容都是在这个掌握面板内进行配置的。
如果要防止其他人访问配置页面，可以在启动时加上登任命户名和密码 -n yourusername -w yourpassword

jsp页面被注入js抓包就指着它了whistle晋升前端开辟幸福感的利器 AJAX

浏览器代理插件

在启动本地启动了whistle之后，要抓包网络的要求并不会经由whistle，这时候我们就须要安装一个插件，让目标网站的要求经由whistle完成抓包等后续的操作。

官方推举的插件是SwitchyOmega，如果你利用的谷歌浏览器须要在运用商店翻墙进行下载。
如果不想翻墙可以直策应用自带的edge浏览器，在edge的运用商店下载可以免翻墙。
点击获取即可轻松下载。

安装完成之后浏览器的工具栏内就会涌现一个圆圈图标。

我们进入选项界面对浏览器代理进行配置，把代理做事器填写whistle启动的端口和地址，然后把switchyOmega的选项改为proxy做事器代理就完成了。

这时候在浏览器内打开想要抓包的网站就可以抓包了。
目前只可以抓http的要求，由于我们还没有进行证书配置，如何配置证书后面会说。

把稳如果利用edge下载的插件就只能在edge插件内进行抓包，如果在谷歌打开网站，并不会有抓包的信息。

配置证书

虽然现在在whistle的network内打印出了一些信息，但全部都是http的要求，并没有https的要求，这是由于我们没有配置证书。
配置证书方法如下，点击二维码进行证书下载（没错这个二维码是可以点击的，绷住了），随后随着步骤走就行了。

安装证书请参考文档: wproxy.org/whistle/web…

配置成功的话https这块会变成一个对勾。

配置完证书之后再次刷新页面，就可以看到所有的https要求了，可以清晰的看到要求体和相应体的内容

手机抓包

首先抓包的条件是手机和电脑要处于一个网络下。
关闭电脑真个防火墙，然后在手机的wifi设置中，把WiFi的代理模式设置为手动代理，主机名和端口号是电脑的ip地址+whistle的端口号。
ip地址可以通过终真个ipconfig查询。

配置完之夹帐机发送的要求在whistle的network列表中就能看到了。
在手机端访问一下掘金的官网。

在工具栏这块可以通过settings选项对要求进行过滤。
可以在whistle中看得手机端访问的列表数据。

运用处景

whistle的强大远远不止能够抓包这么大略，它还有很多其他的功能。

Weinre掌握台

集成weinre的功能，用户只需通过大略配置(pattern weinre://id)即可利用，详细拜会weinre，更多移动端调试方法可以参考：利用whistle调试移动端页面。

相信有过h5开拓经历的同学都碰着过这种情形，我电脑f12仿照移动端调试的时候非常的完美，但是一到真机上会涌现各种奇奇怪怪的问题，而这些问题每每是比较难以定位问题并修复的，由于在真机的h5页面上没有掌握台，我们无法审查元素。

但是当你利用了whistle你会创造只须要配置一行规则，就可以轻松的调出掌握台调试真机的h5页面，这便是Weinre掌握台。
详细效果如下图，这里为了方便展示，真机调试就用pc端仿照手机代替（真实调试的时候，须要先实现上述的手机抓包，即手机电脑在同一网络下，并且修正手机wifi的代理。
）。
可以看到左侧并不是浏览器自带的掌握台，而是whistle自带的功能，在察看与修正左侧元素时，我们手机上的内容也会随之改变。

那么如何实现上面的效果呢？

我们只须要在Whistle掌握台左侧的Rules中添加一条规则即可。

${监听的网址} weinre://${实例名称} 这个实例名称是工具栏中Weinre下拉框中的名字可以任意起

https://juejin.cn/ weinre://juejin

点击工具栏中Weinre下面的juejin即可跳转到Weinre掌握台页面，再刷新下监听网址的页面即可审查元素。

借助Weinre掌握台，我们可以更加随意马虎的办理真机兼容性问题。

修改相应

修正相应体还是很常用的，例如修复bug的时候，如果疑惑是接口返回值有误导致的问题，就可以通过修正相应体，来排查到底是不是后真个问题。

在调试接口的时候，例如后端接口新增了一个返回值，我们须要根据这个返回值进行相应的逻辑处理，这时候我们也可以通过修正相应体的办法mock一下新增的字段，只要确保自己mock的结果和接口返回的构造一样，就可以提前完成接口联调。

详细做法：

前半段是要求地址（支持正则匹配）后半段是相应体的文件。
file://${路径} 默认找的是Values下文件。

Ctrl+右键点击橘色的路径，会自动跳转到Values下对应的文件里，如果没有会自动创建非常方便。

mock.json

可以看到加完配置之后对应接口的相应体就变成了mock.json里面的内容。

办理跨域

办理跨域是修改相应的一种运用，有的后端接口没有配置CORS，导致前端接口跨域

历史办理：通过vite 或者 webpack 等工具做一个反向代理

通过Whistle的resHeaders 可直接修正跨域接口的相应头，增加cors 配置

/getList/ resHeaders://{cors}# cors 文件access-control-allow-credentials: true alwaysaccess-control-allow-headers: access-control-allow-methods: GET, PUT, POST, DELETE, HEAD, OPTIONSaccess-control-allow-origin: access-control-expose-headers: access-control-max-age: 18000Lcontent-type: application/jsondate: Fri, 02 Dec 2022 04:00:28 GMTserver: 123123Access-Control-Allow-Origin:

当然功能远不止这些，还可以修改 API相应韶光、HTTP相应状态码等。
。
。

修改要求

可以利用reqMerge修正修正要求体，它会把merge.json文件的要求体合并到原来接口的要求体中。

/savePerson/ reqMerge://{merge.json}# merge.json{name:'张三'}jsPrepend 进行js注入

利用jsPrepend可以在目标网址的srcipt中添加任意的js代码。
我们这里向页面中注入一个Vconsole移动端调试工具。
${注入到哪个地址} jsPrepend://${注入的js路径}

https://juejin.cn/ jsPrepend://https://cdn.jsdelivr.net/npm/eruda@2.4.1/eruda.min.jshttps://juejin.cn/ jsPrepend://{test.js}

test.js

var vConsole = new window.VConsole();

打开掌握台可以创造，我们注入的js被添加到了head的最顶部。

VConsole成功显示到了页面上

域名映射

# 可以一个ip 配置多个域名并且支持端口号127.0.0.1:9000 ddd.com aaa.com文档