1. 介紹

whistle(讀音[?w?s?l]熏迹，拼音[wēisǒu])基于Node實(shí)現(xiàn)的跨平臺(tái)web調(diào)試代理工具歉糜，類(lèi)似的工具有Windows平臺(tái)上的Fiddler钥飞，主要用于查看汪榔、修改HTTP、HTTPS盒音、Websocket的請(qǐng)求宏悦、響應(yīng)，也可以作為HTTP代理服務(wù)器使用瓜晤，不同于Fiddler通過(guò)斷點(diǎn)修改請(qǐng)求響應(yīng)的方式锥余，whistle采用的是類(lèi)似配置系統(tǒng)hosts的方式，一切操作都可以通過(guò)配置實(shí)現(xiàn)痢掠，支持域名驱犹、路徑、正則表達(dá)式足画、通配符雄驹、通配路徑等多種匹配方式，且可以通過(guò)Node模塊擴(kuò)展功能

2. 安裝

官方文檔-安裝步驟

• 2.1 npm安裝

npm install -g whistle  

• 2.2 基本命令

// 啟動(dòng)whistle:
w2 start


重啟whsitle:
w2 restart

停止whistle:
w2 stop

調(diào)試模式啟動(dòng)whistle(主要用于查看whistle的異常及插件開(kāi)發(fā)):
$ w2 run

• 2.2 配置代理
  詳細(xì)步驟見(jiàn)官方文檔 官方文檔-安裝步驟
  推薦使用瀏覽器代理插件Proxy SwitchyOmega,而不是直接修改電腦代理淹辞，這樣可以不影響其他上網(wǎng)應(yīng)用
  下載安裝 | Proxy SwitchyOmega (proxy-switchyomega.com)

3. 使用

當(dāng)所有安裝都已經(jīng)完成之后医舆，就可以進(jìn)行使用了

• 3.1 啟動(dòng)whistle

// 終端運(yùn)行命令 
w2 start

啟動(dòng)完成截圖.png

可以通過(guò)本地地址訪問(wèn)whistle的界面

• 3.2 配置Proxy SwitchyOmega

  
  
  代理模式配置.png

• 3.2.1 可以直接在對(duì)應(yīng)網(wǎng)站，直接切換你配置的代理

  
  
  代理設(shè)置方法1_1.png
  
  
  代理設(shè)置方法1_2.png

• 3.2.2 使用auto_switch 模式
  在對(duì)應(yīng)域名下,Proxy SwitchyOmega會(huì)根據(jù)對(duì)應(yīng)的域名象缀，來(lái)調(diào)用你定義的代理服務(wù)器

  
  
  auto_switch.png

但是這里有個(gè)問(wèn)題就是,如果后端訪問(wèn)接口跟你配置的域名不一致蔬将，那么會(huì)走不到這個(gè)代理來(lái)
比如 前端訪問(wèn)為 www.example.com 后端服務(wù)器為www.example1.com 那么 你就需要再配置一個(gè) www.example1.com 調(diào)用self_proxy 代理 如果,后端有很多接口，那就直接使用第一種最好央星，直接選擇self_proxy代理霞怀，只是這種選擇會(huì)影響到瀏覽器其他網(wǎng)頁(yè)的訪問(wèn)

注意域名通配符配置 需要這么配置 假設(shè)你的網(wǎng)址為 https://adc.example.com.cn

域名通配符配置.png

或者使用網(wǎng)址通配符配置 對(duì)于這一個(gè)存在一些限制 Chromium 完整網(wǎng)址限制 · FelisCatus/SwitchyOmega Wiki · GitHub

網(wǎng)址通配符配置.png

github說(shuō)明.png

如果你不知道該怎么寫(xiě)這個(gè)通配符可以這么做，代理軟件會(huì)幫助你生成一個(gè)通配符

步驟1.png

步驟2.png

• 3.3 如果你想抓取https請(qǐng)求則需要在電腦安裝證書(shū)

注意：安裝證書(shū)也就相當(dāng)于你把別人的指紋錄入到了你家的密碼鎖莉给，因此安裝三方證書(shū)一定要確認(rèn)這個(gè)三方證書(shū)是可信的而不是任意一個(gè)網(wǎng)站上下載的證書(shū)（這個(gè)判斷需要個(gè)人根據(jù)經(jīng)驗(yàn)自行判斷）
對(duì)于https,傳輸?shù)臄?shù)據(jù)毙石，沒(méi)有證書(shū)進(jìn)行加解密廉沮，外界是無(wú)法破解傳輸內(nèi)容的，因此計(jì)算有第三方攔截了請(qǐng)求徐矩，他也不知道具體的內(nèi)容是什么（這里設(shè)計(jì)到安全與鑒權(quán)相關(guān)知識(shí)废封，此處僅僅簡(jiǎn)單舉例）
但是你安裝與信任了外部證書(shū)，就相當(dāng)于這個(gè)新安裝的證書(shū)也可以解密你傳輸?shù)臄?shù)據(jù)

雜談： 對(duì)于一些公司會(huì)要求安裝公司的軟件丧蘸，以達(dá)到了解員工日常活動(dòng)的目的遥皂，就是這個(gè)原理力喷，如果員工僅僅是連接公司網(wǎng)絡(luò)，不安裝公司軟件演训，那么公司是無(wú)法獲知員工的訪問(wèn)內(nèi)容的弟孟，而僅僅只能知道員工訪問(wèn)了那些網(wǎng)站，具體內(nèi)容是不知道的

• 3.4 配置whistle

在 Proxy SwitchyOmega配置后 并訪問(wèn)對(duì)應(yīng)網(wǎng)頁(yè)假設(shè) 網(wǎng)頁(yè)為 www.abc.com 則請(qǐng)求就會(huì)走到 www.example.com

whistle 轉(zhuǎn)發(fā)配置.png

這個(gè)時(shí)候 whistle的這個(gè)配置生效 就會(huì)把所有訪問(wèn)www.example.com 的請(qǐng)求 都轉(zhuǎn)發(fā)到 whistle的端口（當(dāng)然你也可以指定你自己的代理服務(wù)器样悟，不一定是你的本地拂募，也可以是你本地的其他服務(wù)或者線上的其他服務(wù),甚至whistle的功能你也可以自己通過(guò)node寫(xiě)一個(gè)）

4. 抓取內(nèi)容

捕獲請(qǐng)求.png

5. 修改內(nèi)容（功能重點(diǎn)）

對(duì)于上面的 代理 也就是如果訪問(wèn) a.com 顯示b.com的內(nèi)容，都是可以通過(guò)修改本機(jī)的host文件來(lái)實(shí)現(xiàn)的（這就涉及到瀏覽器訪問(wèn)網(wǎng)頁(yè)按下回車(chē)后窟她，干了哪些事）

簡(jiǎn)單說(shuō)瀏覽器的域名解析（所有的域名 最終都是要解析為ip陈症，域名是為了方便記憶，以及訪問(wèn)而產(chǎn)生的）

• 就是瀏覽器先找自己的緩存看有沒(méi)有
• 自己沒(méi)有 看本地host文件有沒(méi)有域名與ip對(duì)應(yīng)關(guān)系
• host也沒(méi)有 訪問(wèn)dns服務(wù)器 （dns服務(wù)器會(huì)一層一層網(wǎng)上找震糖，類(lèi)似于 從縣到市再到省再到國(guó)家這種）
• 能查到則訪問(wèn)對(duì)應(yīng)ip录肯，查不到則瀏覽器會(huì)顯示無(wú)法訪問(wèn)

5.1 修改請(qǐng)求返回 header 可以用來(lái)跨域（在服務(wù)器暫時(shí)無(wú)法配置解決跨域，可以本地先通過(guò)修改請(qǐng)求返回header來(lái)越過(guò)吊说，當(dāng)然也可以關(guān)閉瀏覽器的跨域限制论咏，這里又涉及到了為什么跨域以及跨域的解決方法 之前文章：瀏覽器跨域與處理方案 - 簡(jiǎn)書(shū) (jianshu.com)
）

此處僅舉例 修改請(qǐng)求返回header 其余功能參考官方文檔
5.1.1先在values 定義對(duì)應(yīng)修改header的json文件

values json文件配置.png

{
  "Access-Control-Allow-Origin": "http://abc.com",
    "Access-Control-Allow-Credentials":true
}

image.png

5.1.2 在Rules中 定義規(guī)則 對(duì)resHeader 的覆寫(xiě)修改使用 response.json 文件中的內(nèi)容

rules 定義規(guī)則.png

https://example.com resHeaders://`{response.json}`

resHeaders · 官網(wǎng)文檔

本地修改 效果截圖.png