安基網 首頁 系統 網絡學院 查看內容

教你配置免費又好用的抓包代理神器,HTTPS 也不在話下

2020-1-13 09:02| 投稿: xiaotiger |來自: 互聯網


免責聲明:本站系公益性非盈利IT技術普及網,本文由投稿者轉載自互聯網的公開文章,文末均已注明出處,其內容和圖片版權歸原網站或作者所有,文中所述不代表本站觀點,若有無意侵權或轉載不當之處請從網站右下角聯系我們處理,謝謝合作!

摘要: 什么是抓包和代理抓包:當我們需要知道一個 HTTP 請求發送和返回的信息時,就需要用到抓包工具。在電腦上 Chrome 自帶有網絡調試工具,如果在移動設備上,就需要一個專門的抓包工具來抓取移動端的流量,來了解網絡請求發送了什么數據,返回了什么數據;代理:當我們在本地調試線上網站的代碼時,由于本 ...


什么是抓包和代理

抓包:當我們需要知道一個 HTTP 請求發送和返回的信息時,就需要用到抓包工具。在電腦上 Chrome 自帶有網絡調試工具,如果在移動設備上,就需要一個專門的抓包工具來抓取移動端的流量,來了解網絡請求發送了什么數據,返回了什么數據

代理:當我們在本地調試線上網站的代碼時,由于本地域名 localhost 沒有線上域名的 cookie,無法鑒權,這時候就需要用代理工具騙過瀏覽器,讓瀏覽器以為訪問的是線上的地址,從而可以用線上的 cookie 來調試本地代碼。代理工具起的作用是把對地址欄 url 的請求替換成指定的 url,但是瀏覽器本身沒有察覺。這里講的是 web 開發時的代理,除此之外還有其他形式的代理,暫不做介紹。

whistle 簡介

抓包

今天要介紹的是 whistle,一個開源免費的抓包代理神器,配置很簡單。

對比它的競品 Charles、Fiddler,wireshark,它有這些優勢:

  1. 開源,不太可能帶有惡意代碼;
  2. 免費(Charles 收費);
  3. 全平臺都可以使用(基于 nodeJS)(Fiddler 在 linux 很難用);
  4. 配置代理非常簡單;
  • Github:https://github.com/avwo/whistle
  • 官網 https://wproxy.org/whistle/

下面是 whistle 的功能圖:

快速上手

先安裝 whistle:

$ npm install -g whistle

安裝成功之后可以使用 w2 start、wproxy start、whistle start 三者之一來啟動 whsitle。啟動之后顯示如下信息:

whistle 啟動成功

啟動完成之后,whistle 會在后臺運行,無法通過 ctrl + c 關閉,關閉和重啟的操作如下:

# 停止$ w2 stop# 重啟$ w2 restart

配置代理:

主推在瀏覽器安裝 SwitchyOmega,它有多強大,用了的都知道。Chrome 和 FF 插件商店都可以找到,找不到可以在 https://github.com/FelisCatus/SwitchyOmega 下載。

以 Chrome 作例子,安裝好了之后插件欄會出現一個圈圈的圖標,點擊圈圈之后點擊選項進行配置。

進入 SwitchyOmega 配置

添加 whistle 配置

按照這張圖來配置即可。

開始使用 whistle 抓包

首先要選擇 SwitchyOmega 中我們剛才創建的那個情景模式,我這里設置的叫 proxy。

然后到一個頁面,以 http://tools.jb51.net/ 為例(非 HTTPS 的網站)。進入頁面之后可以看到 whistle 左側的網絡選項中出現了請求列表:

使用 whistle 代理本地服務器

whistle 代理的匹配規則:https://wproxy.org/whistle/pattern.html

在文章最開始介紹過 web 連接代理,我們來模擬真實會碰到的情況。


以下都是段子:

公司 A 有一個線上的的網站 http://lxfriday.com,另外有一個專做預發布的網站 http://test-lxfriday.com(測試環境)。

公司 A 里來了個新人小劉,老板給了他一個需求,“小劉啊,這幾天客戶提交反饋說個人中心頁面xx的字體太小了,你把字體改大點吧!!!”。

小劉拉了最新的代碼,執行 yarn start 跑起來了,然后小劉到瀏覽器中訪問 localhost:3000 ,發現頁面報了一堆錯!!!

打開控制臺一看,原來向后端發請求時 url 地址都是 http://test-lxfriday.com/api 開頭的,請求被瀏覽器判定為跨域了。

小劉急了,心想:這咋辦,服務端哥們不給開 CORS 跨域,我用 localhost 根本沒法讓頁面正常顯示啊!!!


上面情景中,小劉碰到瀏覽器跨域問題,服務端沒有開啟 CORS,所以 localhost:3000 和 http://test-lxfriday.com 無法直接通信。

這種情況使用代理工具做下代理即可。配置 whistle 代理規則:

# 這條規則會讓 test-lxfriday.com/api 不會被代理,服務端依然請求線上的測試環境test-lxfriday.com/api test-lxfriday.com/api# 代理 test-lxfriday.com 到 localhost:3000test-lxfriday.com localhost:3000

SwitchyOmega 切換到 whistle 對應的配置(我的是 proxy),然后訪問 test-lxfriday.com 將會正常顯示。

我的測試代碼:

const http = require('http')const server = http.createServer((req, res) => {  console.log('req.url', req.url)  res.writeHead(200, {    // 'content-type': 'application/json',    // 'access-control-allow-origin': '*',    // 'access-control-allow-headers': 'name'    // 'access-control-allow-method': 'get,post,put,option,delete'  })  res.end(    JSON.stringify({      name: 'lxfriday',      age: 1111    })  )})server.listen(3000)console.log('listenning')

頁面效果:

頁面效果

用 whistle 代理手機

需要手機和電腦都處于同一個內網下(大多數情況是同一個 wifi 下,大公司內部內網是互通的,這種內網地址也是可以的)。

以小米手機為例,點擊已經連接的 wifi,往下滑,有一個【代理】選項,設為【手動】再設置主機為電腦的內網 ip 地址,端口為【8899】,點擊右上角保存,即可代理成功了。

windows 電腦查詢內網 ip 地址

小米手機設置代理:

代理完成之后,訪問頁面:

whistle 抓取 HTTPS 請求

沒有配置 HTTPS 根證書時,用前面章節配置的辦法,訪問掘金,查看抓包數據,發現全是 Tunnel to。

開啟抓取 HTTPS 需要先勾選 Capture TUNNEL CONNECTs,然后安裝根證書并信任根證書。

勾選 Capture TUNNEL CONNECTs

根證書在彈窗上面,點擊進去下載即可,下面以 windows 10 為例講解安裝并信任根證書的過程:

雙擊下載的根證書,點擊【安裝證書】,選擇【本地計算機】,下一步,選擇【將所有的證書都放入下列存儲】,選中后再下一步就完成了。

此時電腦再次訪問掘金網站,可以看到 HTTPS 請求的內容了:

抓取手機 HTTPS 請求

抓取手機 HTTPS 請求是最難配置的一步,在不同手機上的抓取效果可能不一致,下面所述步驟經測試在小米手機上會導致頁面圖片無法正常加載。

以華為平板為例來進行手機的配置。首先和前面代理手機一樣,手機和電腦連入相同的內網,手機配置代理連接電腦的 whistle 端口。然后手機掃描下面二維碼:

會提示下載 root CA 證書,下載下來之后,進入設置,搜索【加密】,點擊【加密和憑據】,選擇【從存儲設備安裝】,選擇下載的 CA 證書(最好是在電腦上下載好了,直接拖到手機的根目錄下方便查找),隨便設置證書名稱,我設置為 【whistle】,憑據和用途選擇【VPN和應用】,點擊確定即導入成功。

如果導入成功,可以在【受信任的憑據】->【用戶】中看到。

導入成功之后,我們在手機上請求掘金頁面。查看 whistle network,可以看到抓包數據。

代理 HTTPS 請求

在和服務端聯調時,可能服務端是部署在 HTTPS 上的,而你的代碼必須要在 app 的 webview 中顯示,這個時候聯調會比較麻煩,可以考慮使用 HTTPS 代理手機端請求。

除了在抓取手機 HTTPS 請求這一節的配置,還需要在 whistle 中配置代理地址:

https://xx.com https://juejin.im

配置好之后,在手機上訪問 https://xx.com 即可訪問到掘金主頁的內容。當然我們實際開發中更多是下面這樣配置,讓我們訪問線上地址時訪問到電腦上的代碼:

https://site-online.com http://192.168.0.106:3000

訪問成功之后顯示如下(實例代碼在前面):

總結

總的來說 whistle 的功能是非常完善的,whistle 免費而且全平臺都可以使用,相信這是一個非常大的亮點。

whistle的匹配模式(pattern)大體可以分成域名路徑正則精確匹配通配符匹配

關于 whistle 配置代理的規則,官網有詳細的描述 https://wproxy.org/whistle/pattern.html,這里摘錄一部分:

域名匹配

# 匹配域名www.test.com下的所有請求,包括http、https、ws、wss,tunnelwww.test.com operatorURI# 匹配域名www.test.com下的所有http請求http://www.test.com operatorURI# 匹配域名www.test.com下的所有https請求https://www.test.com operatorURI# 上述匹配也可以限定域名的端口號www.test.com:8888 operatorURI # 8888端口www.test.com/ operatorURI # http為80端口,其它443端口

路徑匹配

# 限定請求協議,只能匹配http請求http://www.test.com/xxx operatorURIhttp://www.test.com:8080/xxx operatorURI# 匹配指定路徑下的所有請求www.test.com/xxx operatorURIwww.test.com:8080/xxx operatorURI

精確匹配

包含請求協議

$http://www.test.com operatorURI$https://www.test.com/xxx? operatorURI

這種情況分別只能匹配這兩種請求

http://www.test.com # 瀏覽器會自動改為http://www.test.com/https://www.test.com/xxx?

不包含請求協議

$www.test.com/xxx operatorURI

這種情況可以匹配如下四種請求

http://www.test.com/xxxhttps://www.test.com/xxxws://www.test.com/xxxwss://www.test.com/xxx

最后

感謝閱讀,歡迎關注我的頭條號 云影 sky,帶你解讀前端技術,掌握最本質的技能。



小編推薦:欲學習電腦技術、系統維護、網絡管理、編程開發和安全攻防等高端IT技術,請 點擊這里 注冊賬號,公開課頻道價值萬元IT培訓教程免費學,讓您少走彎路、事半功倍,好工作升職加薪!

本文出自:https://www.toutiao.com/a6781000231895958027/

免責聲明:本站系公益性非盈利IT技術普及網,本文由投稿者轉載自互聯網的公開文章,文末均已注明出處,其內容和圖片版權歸原網站或作者所有,文中所述不代表本站觀點,若有無意侵權或轉載不當之處請從網站右下角聯系我們處理,謝謝合作!


鮮花

握手

雷人

路過

雞蛋

相關閱讀

最新評論

 最新
返回頂部
创业如何赚钱