whistle代理使用

story.Write(z)發表於2024-04-15

1. 介紹

whistle(讀音[ˈwɪsəl]，拼音[wēisǒu])基於Node實現的跨平臺web除錯代理工具，類似的工具有Windows平臺上的Fiddler，主要用於檢視、修改HTTP、HTTPS、Websocket的請求、響應，也可以作為HTTP代理伺服器使用，不同於Fiddler透過斷點修改請求響應的方式，whistle採用的是類似配置系統hosts的方式，一切操作都可以透過配置實現，支援域名、路徑、正規表示式、萬用字元、通配路徑等多種匹配方式，且可以透過Node模組擴充套件功能

2. 安裝

官方文件-安裝步驟

  • 2.1 npm安裝
npm install -g whistle
  • 2.2 基本命令
// 啟動whistle:
w2 start


重啟whsitle:
w2 restart

停止whistle:
w2 stop

除錯模式啟動whistle(主要用於檢視whistle的異常及外掛開發):
$ w2 run
  • 2.2 配置代理
    詳細步驟見官方文件 官方文件-安裝步驟
    推薦使用瀏覽器代理外掛Proxy SwitchyOmega,而不是直接修改電腦代理，這樣可以不影響其他上網應用
    下載安裝 | Proxy SwitchyOmega (proxy-switchyomega.com)

3. 使用

當所有安裝都已經完成之後，就可以進行使用了

  • 3.1 啟動whistle
// 終端執行命令 
w2 start

啟動完成截圖.png
可以透過本地地址訪問whistle的介面

  • 3.2 配置Proxy SwitchyOmega
    代理模式配置.png

  • 3.2.1 可以直接在對應網站，直接切換你配置的代理
    代理設定方法1_1.png
    代理設定方法1_2.png

  • 3.2.2 使用auto_switch 模式
    在對應域名下,Proxy SwitchyOmega會根據對應的域名，來呼叫你定義的代理伺服器
    auto_switch.png

但是這裡有個問題就是,如果後端訪問介面跟你配置的域名不一致，那麼會走不到這個代理來
比如 前端訪問為 www.example.com 後端伺服器為www.example1.com 那麼 你就需要再配置一個 www.example1.com 呼叫self_proxy 代理 如果,後端有很多介面，那就直接使用第一種最好，直接選擇self_proxy代理，只是這種選擇會影響到瀏覽器其他網頁的訪問

注意域名萬用字元配置 需要這麼配置 假設你的網址為 https://adc.example.com.cn
域名萬用字元配置.png

或者使用網址萬用字元配置 對於這一個存在一些限制 Chromium 完整網址限制 · FelisCatus/SwitchyOmega Wiki · GitHub

網址萬用字元配置.png

github說明.png

如果你不知道該怎麼寫這個萬用字元可以這麼做，代理軟體會幫助你生成一個萬用字元
步驟1.png
步驟2.png

  • 3.3 如果你想抓取https請求則需要在電腦安裝證書

注意：安裝證書也就相當於你把別人的指紋錄入到了你家的密碼鎖，因此安裝三方證書一定要確認這個三方證書是可信的而不是任意一個網站上下載的證書（這個判斷需要個人根據經驗自行判斷）
對於https,傳輸的資料，沒有證書進行加解密，外界是無法破解傳輸內容的，因此計算有第三方攔截了請求，他也不知道具體的內容是什麼（這裡設計到安全與鑑權相關知識，此處僅僅簡單舉例）
但是你安裝與信任了外部證書，就相當於這個新安裝的證書也可以解密你傳輸的資料

雜談： 對於一些公司會要求安裝公司的軟體，以達到了解員工日常活動的目的，就是這個原理，如果員工僅僅是連線公司網路，不安裝公司軟體，那麼公司是無法獲知員工的訪問內容的，而僅僅只能知道員工訪問了那些網站，具體內容是不知道的

  • 3.4 配置whistle

在 Proxy SwitchyOmega配置後 並訪問對應網頁假設 網頁為 www.abc.com 則請求就會走到 www.example.com
whistle 轉發配置.png
這個時候 whistle的這個配置生效 就會把所有訪問www.example.com 的請求 都轉發到 whistle的埠（當然你也可以指定你自己的代理伺服器，不一定是你的本地，也可以是你本地的其他服務或者線上的其他服務,甚至whistle的功能你也可以自己透過node寫一個）

4. 抓取內容

捕獲請求.png

5. 修改內容（功能重點）

對於上面的 代理 也就是如果訪問 a.com 顯示b.com的內容，都是可以透過修改本機的host檔案來實現的（這就涉及到瀏覽器訪問網頁按下回車後，幹了哪些事）

簡單說瀏覽器的域名解析（所有的域名 最終都是要解析為ip，域名是為了方便記憶，以及訪問而產生的）

  • 就是瀏覽器先找自己的快取看有沒有
  • 自己沒有 看本地host檔案有沒有域名與ip對應關係
  • host也沒有 訪問dns伺服器 （dns伺服器會一層一層網上找，類似於 從縣到市再到省再到國家這種）
  • 能查到則訪問對應ip，查不到則瀏覽器會顯示無法訪問

5.1 修改請求返回 header 可以用來跨域（在伺服器暫時無法配置解決跨域，可以本地先透過修改請求返回header來越過，當然也可以關閉瀏覽器的跨域限制，這裡又涉及到了為什麼跨域以及跨域的解決方法 之前文章：瀏覽器跨域與處理方案 - 簡書 (jianshu.com)
）

此處僅舉例 修改請求返回header 其餘功能參考官方文件
5.1.1先在values 定義對應修改header的json檔案
values json檔案配置.png

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

image.png

5.1.2 在Rules中 定義規則 對resHeader 的覆寫修改使用 response.json 檔案中的內容
rules 定義規則.png

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

resHeaders · 官網文件

本地修改 效果截圖.png

相關文章