前端開發(fā)必須知道的抓包神器！

前言

好多人認為whistle是抓包工具，殊不知抓包只是whistle能力的冰山一角。除了抓包外，它還能修改請求與響應、真機調(diào)試h5移動端、解決跨域、域名映射等等等。總而言之，使用whistle能夠提升我們的開發(fā)效率，改善開發(fā)體驗。

whistle一出手就是抓包工具的極限，那年它雙手插兜不知道什么是對手（doge）。

安裝&使用

安裝與啟動whistle

npm install -g whistle
w2 start // 啟動whistle

w2 stop //停止whistle

啟動之后會在本機啟動一臺服務器，默認端口是8899

在本機打開該地址會進入whistle的控制面板，如下圖所示。抓包，修改請求和響應的內(nèi)容都是在這個控制面板內(nèi)進行配置的。如果要防止其他人訪問配置頁面，可以在啟動時加上登錄用戶名和密碼 -n yourusername -w yourpassword

瀏覽器代理插件

在啟動本地啟動了whistle之后，要抓包網(wǎng)絡的請求并不會經(jīng)過whistle，這時候我們就需要安裝一個插件，讓目標網(wǎng)站的請求經(jīng)過whistle完成抓包等后續(xù)的操作。

官方推薦的插件是SwitchyOmega，如果你使用的谷歌瀏覽器需要在應用商店翻墻進行下載。如果不想翻墻可以直接使用自帶的edge瀏覽器，在edge的應用商店下載可以免翻墻。點擊獲取即可輕松下載。

安裝完成之后瀏覽器的工具欄內(nèi)就會出現(xiàn)一個圓圈圖標。

我們進入選項界面對瀏覽器代理進行配置，把代理服務器填寫whistle啟動的端口和地址，然后把switchyOmega的選項改為proxy服務器代理就完成了。

這時候在瀏覽器內(nèi)打開想要抓包的網(wǎng)站就可以抓包了。目前只可以抓http的請求，因為我們還沒有進行證書配置，如何配置證書后面會說。

注意如果使用edge下載的插件就只能在edge插件內(nèi)進行抓包，如果在谷歌打開網(wǎng)站，并不會有抓包的信息。

配置證書

雖然現(xiàn)在在whistle的network內(nèi)打印出了一些信息，但全部都是http的請求，并沒有https的請求，這是因為我們沒有配置證書。配置證書方法如下，點擊二維碼進行證書下載（沒錯這個二維碼是可以點擊的，繃住了），隨后跟著步驟走就行了。

安裝證書請參考文檔: https://wproxy.org/whistle/webui/https.html

配置成功的話https這塊會變成一個對勾。

配置完證書之后再次刷新頁面，就可以看到所有的https請求了，可以清晰的看到請求體和響應體的內(nèi)容

手機抓包

首先抓包的前提是手機和電腦要處于一個網(wǎng)絡下。關閉電腦端的防火墻，然后在手機的wifi設置中，把WiFi的代理模式設置為手動代理，主機名和端口號是 電腦的ip地址+whistle的端口號。ip地址可以通過終端的ipconfig查詢。

配置完之后手機發(fā)送的請求在whistle的network列表中就能看到了。在手機端訪問一下掘金的官網(wǎng)。

在工具欄這塊可以通過settings選項對請求進行過濾。可以在whistle中看到手機端訪問的列表數(shù)據(jù)。

應用場景

whistle的強大遠遠不止能夠抓包這么簡單，它還有很多其他的功能。

Weinre控制臺

集成weinre的功能，用戶只需通過簡單配置(pattern weinre://id)即可使用，具體參見weinre，更多移動端調(diào)試方法可以參考：利用whistle調(diào)試移動端頁面。

相信有過h5開發(fā)經(jīng)歷的同學都遇到過這種情況，我電腦f12模擬移動端調(diào)試的時候非常的完美，但是一到真機上會出現(xiàn)各種奇奇怪怪的問題，而這些問題往往是比較難以定位問題并修復的，因為在真機的h5頁面上沒有控制臺，我們無法審查元素。

但是當你使用了whistle你會發(fā)現(xiàn)只需要配置一行規(guī)則，就可以輕松的調(diào)出控制臺調(diào)試真機的h5頁面，這就是Weinre控制臺。具體效果如下圖，這里為了方便展示，真機調(diào)試就用pc端模擬手機代替（真實調(diào)試的時候，需要先實現(xiàn)上述的手機抓包，即手機電腦在同一網(wǎng)絡下，并且修改手機wifi的代理。）。可以看到左側(cè)并不是瀏覽器自帶的控制臺，而是whistle自帶的功能，在視察與修改左側(cè)元素時，我們手機上的內(nèi)容也會隨之改變。

那么如何實現(xiàn)上面的效果呢？

我們只需要在Whistle控制臺左側(cè)的Rules中添加一條規(guī)則即可。

${監(jiān)聽的網(wǎng)址} weinre://${實例名稱} 這個實例名稱是工具欄中Weinre下拉框中的名字可以任意起

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

點擊工具欄中Weinre下面的juejin即可跳轉(zhuǎn)到Weinre控制臺頁面，再刷新下監(jiān)聽網(wǎng)址的頁面即可審查元素。

借助Weinre控制臺，我們可以更加容易的解決真機兼容性問題。

篡改響應

修改響應體還是很常用的，例如修復bug的時候，如果懷疑是接口返回值有誤導致的問題，就可以通過修改響應體，來排查到底是不是后端的問題。

在調(diào)試接口的時候，例如后端接口新增了一個返回值，我們需要根據(jù)這個返回值進行相應的邏輯處理，這時候我們也可以通過修改響應體的方式mock一下新增的字段，只要確保自己mock的結果和接口返回的結構一樣，就可以提前完成接口聯(lián)調(diào)。

具體做法：

前半段是請求地址（支持正則匹配） 后半段是響應體的文件。file://${路徑} 默認找的是Values下文件。

Ctrl+右鍵點擊橘色的路徑，會自動跳轉(zhuǎn)到Values下對應的文件里，如果沒有會自動創(chuàng)建非常方便。

mock.json

可以看到 加完配置之后對應接口的響應體就變成了mock.json里面的內(nèi)容。

解決跨域

解決跨域是篡改響應的一種應用，有的后端接口沒有配置CORS，導致前端接口跨域

歷史解決：通過vite 或者 webpack 等工具做一個反向代理

通過Whistle的resHeaders可直接修改跨域接口的響應頭，增加cors 配置

/getList/ resHeaders://{cors}

# cors 文件
access-control-allow-credentials: true always
access-control-allow-headers: *
access-control-allow-methods: GET, PUT, POST, DELETE, HEAD, OPTIONS
access-control-allow-origin: *
access-control-expose-headers: *
access-control-max-age: 18000L
content-type: application/json
date: Fri, 02 Dec 2022 04:00:28 GMT
server: 123123
Access-Control-Allow-Origin: *

當然功能遠不止這些，還可以 篡改 API響應時間、HTTP響應狀態(tài)碼等。。。

篡改請求

可以使用reqMerge修改修改請求體，它會把merge.json文件的請求體合并到原本接口的請求體中。

/savePerson/ reqMerge://{merge.json}

# merge.json
{
    name:'張三'
}

jsPrepend 進行js注入

使用jsPrepend可以在目標網(wǎng)址的srcipt中添加任意的js代碼。我們這里向頁面中注入一個Vconsole移動端調(diào)試工具。${注入到哪個地址} jsPrepend://${注入的js路徑}

https://juejin.cn/ jsPrepend://https://cdn.jsdelivr.net/npm/[email protected]/eruda.min.js
https://juejin.cn/ jsPrepend://{test.js}

test.js

var vConsole = new window.VConsole();

打開控制臺可以發(fā)現(xiàn)，我們注入的js被添加到了head的最頂部。

VConsole成功顯示到了頁面上

域名映射

# 可以一個ip 配置多個域名 并且支持端口號
127.0.0.1:9000 ddd.com aaa.com

文檔

whistle文檔

結尾

頭一次接觸到抓包工具，感覺打開了新世界的大門。使用whistle，以后不管是開發(fā)mock接口數(shù)據(jù)，還是定位bug都方便了很多。

希望大家能有所收獲！