什么是抓包和代理
抓包：當(dāng)我們需要知道一個(gè) HTTP 請求發(fā)送和返回的信息時(shí)，就需要用到抓包工具。在電腦上 Chrome 自帶有網(wǎng)絡(luò)調(diào)試工具，如果在移動(dòng)設(shè)備上，就需要一個(gè)專門的抓包工具來抓取移動(dòng)端的流量，來了解網(wǎng)絡(luò)請求發(fā)送了什么數(shù)據(jù)，返回了什么數(shù)據(jù)；
代理：當(dāng)我們在本地調(diào)試線上網(wǎng)站的代碼時(shí)，由于本地域名 localhost 沒有線上域名的 cookie，無法鑒權(quán)，這時(shí)候就需要用代理工具騙過瀏覽器，讓瀏覽器以為訪問的是線上的地址，從而可以用線上的 cookie 來調(diào)試本地代碼。代理工具起的作用是把對(duì)地址欄 url 的請求替換成指定的 url，但是瀏覽器本身沒有察覺。這里講的是 web 開發(fā)時(shí)的代理，除此之外還有其他形式的代理，暫不做介紹。
whistle 簡介
抓包
今天要介紹的是 whistle，一個(gè)開源免費(fèi)的抓包代理神器，配置很簡單。
對(duì)比它的競品 Charles、Fiddler，wireshark，它有這些優(yōu)勢：
- 開源，不太可能帶有惡意代碼；
- 免費(fèi)（Charles 收費(fèi)）；
- 全平臺(tái)都可以使用（基于 nodeJS）（Fiddler 在 linux 很難用）；
- 配置代理非常簡單；
- Github：https://github.com/avwo/whistle
- 官網(wǎng) https://wproxy.org/whistle/
下面是 whistle 的功能圖：
快速上手
先安裝 whistle：
$ npm install -g whistle
安裝成功之后可以使用 w2 start、wproxy start、whistle start 三者之一來啟動(dòng) whsitle。啟動(dòng)之后顯示如下信息：
whistle 啟動(dòng)成功
啟動(dòng)完成之后，whistle 會(huì)在后臺(tái)運(yùn)行，無法通過 ctrl + c 關(guān)閉，關(guān)閉和重啟的操作如下：
# 停止
$ w2 stop
# 重啟
$ w2 restart
配置代理：
主推在瀏覽器安裝 SwitchyOmega，它有多強(qiáng)大，用了的都知道。Chrome 和 FF 插件商店都可以找到，找不到可以在 https://github.com/FelisCatus/SwitchyOmega 下載。
以 Chrome 作例子，安裝好了之后插件欄會(huì)出現(xiàn)一個(gè)圈圈的圖標(biāo)，點(diǎn)擊圈圈之后點(diǎn)擊選項(xiàng)進(jìn)行配置。
進(jìn)入 SwitchyOmega 配置
添加 whistle 配置
按照這張圖來配置即可。
開始使用 whistle 抓包
首先要選擇 SwitchyOmega 中我們剛才創(chuàng)建的那個(gè)情景模式，我這里設(shè)置的叫 proxy。
然后到一個(gè)頁面，以 http://tools.jb51.net/ 為例（非 HTTPS 的網(wǎng)站）。進(jìn)入頁面之后可以看到 whistle 左側(cè)的網(wǎng)絡(luò)選項(xiàng)中出現(xiàn)了請求列表：
使用 whistle 代理本地服務(wù)器
whistle 代理的匹配規(guī)則：https://wproxy.org/whistle/pattern.html
在文章最開始介紹過 web 連接代理，我們來模擬真實(shí)會(huì)碰到的情況。
以下都是段子：
公司 A 有一個(gè)線上的的網(wǎng)站 http://lxfriday.com，另外有一個(gè)專做預(yù)發(fā)布的網(wǎng)站 http://test-lxfriday.com（測試環(huán)境）。
公司 A 里來了個(gè)新人小劉，老板給了他一個(gè)需求，“小劉啊，這幾天客戶提交反饋說個(gè)人中心頁面xx的字體太小了，你把字體改大點(diǎn)吧！！！”。
小劉拉了最新的代碼，執(zhí)行 yarn start 跑起來了，然后小劉到瀏覽器中訪問 localhost:3000 ，發(fā)現(xiàn)頁面報(bào)了一堆錯(cuò)！！！
打開控制臺(tái)一看，原來向后端發(fā)請求時(shí) url 地址都是 http://test-lxfriday.com/api 開頭的，請求被瀏覽器判定為跨域了。
小劉急了，心想：這咋辦，服務(wù)端哥們不給開 CORS 跨域，我用 localhost 根本沒法讓頁面正常顯示啊！！！
上面情景中，小劉碰到瀏覽器跨域問題，服務(wù)端沒有開啟 CORS，所以 localhost:3000 和 http://test-lxfriday.com 無法直接通信。
這種情況使用代理工具做下代理即可。配置 whistle 代理規(guī)則：
# 這條規(guī)則會(huì)讓 test-lxfriday.com/api 不會(huì)被代理，服務(wù)端依然請求線上的測試環(huán)境
test-lxfriday.com/api test-lxfriday.com/api
# 代理 test-lxfriday.com 到 localhost:3000
test-lxfriday.com localhost:3000
SwitchyOmega 切換到 whistle 對(duì)應(yīng)的配置（我的是 proxy），然后訪問 test-lxfriday.com 將會(huì)正常顯示。
我的測試代碼：
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 代理手機(jī)
需要手機(jī)和電腦都處于同一個(gè)內(nèi)網(wǎng)下（大多數(shù)情況是同一個(gè) wifi 下，大公司內(nèi)部內(nèi)網(wǎng)是互通的，這種內(nèi)網(wǎng)地址也是可以的）。
以小米手機(jī)為例，點(diǎn)擊已經(jīng)連接的 wifi，往下滑，有一個(gè)【代理】選項(xiàng)，設(shè)為【手動(dòng)】再設(shè)置主機(jī)為電腦的內(nèi)網(wǎng) ip 地址，端口為【8899】，點(diǎn)擊右上角保存，即可代理成功了。
windows 電腦查詢內(nèi)網(wǎng) ip 地址
小米手機(jī)設(shè)置代理：
代理完成之后，訪問頁面：
whistle 抓取 HTTPS 請求
沒有配置 HTTPS 根證書時(shí)，用前面章節(jié)配置的辦法，訪問掘金，查看抓包數(shù)據(jù)，發(fā)現(xiàn)全是 Tunnel to。
開啟抓取 HTTPS 需要先勾選 Capture TUNNEL CONNECTs，然后安裝根證書并信任根證書。
勾選 Capture TUNNEL CONNECTs
根證書在彈窗上面，點(diǎn)擊進(jìn)去下載即可，下面以 windows 10 為例講解安裝并信任根證書的過程：
雙擊下載的根證書，點(diǎn)擊【安裝證書】，選擇【本地計(jì)算機(jī)】，下一步，選擇【將所有的證書都放入下列存儲(chǔ)】，選中后再下一步就完成了。
此時(shí)電腦再次訪問掘金網(wǎng)站，可以看到 HTTPS 請求的內(nèi)容了：
抓取手機(jī) HTTPS 請求
抓取手機(jī) HTTPS 請求是最難配置的一步，在不同手機(jī)上的抓取效果可能不一致，下面所述步驟經(jīng)測試在小米手機(jī)上會(huì)導(dǎo)致頁面圖片無法正常加載。
以華為平板為例來進(jìn)行手機(jī)的配置。首先和前面代理手機(jī)一樣，手機(jī)和電腦連入相同的內(nèi)網(wǎng)，手機(jī)配置代理連接電腦的 whistle 端口。然后手機(jī)掃描下面二維碼：
會(huì)提示下載 root CA 證書，下載下來之后，進(jìn)入設(shè)置，搜索【加密】，點(diǎn)擊【加密和憑據(jù)】，選擇【從存儲(chǔ)設(shè)備安裝】，選擇下載的 CA 證書（最好是在電腦上下載好了，直接拖到手機(jī)的根目錄下方便查找），隨便設(shè)置證書名稱，我設(shè)置為 【whistle】，憑據(jù)和用途選擇【VPN和應(yīng)用】，點(diǎn)擊確定即導(dǎo)入成功。
如果導(dǎo)入成功，可以在【受信任的憑據(jù)】->【用戶】中看到。
導(dǎo)入成功之后，我們在手機(jī)上請求掘金頁面。查看 whistle network，可以看到抓包數(shù)據(jù)。
代理 HTTPS 請求
在和服務(wù)端聯(lián)調(diào)時(shí)，可能服務(wù)端是部署在 HTTPS 上的，而你的代碼必須要在 app 的 webview 中顯示，這個(gè)時(shí)候聯(lián)調(diào)會(huì)比較麻煩，可以考慮使用 HTTPS 代理手機(jī)端請求。
除了在抓取手機(jī) HTTPS 請求這一節(jié)的配置，還需要在 whistle 中配置代理地址：
https://xx.com https://juejin.im
配置好之后，在手機(jī)上訪問 https://xx.com 即可訪問到掘金主頁的內(nèi)容。當(dāng)然我們實(shí)際開發(fā)中更多是下面這樣配置，讓我們訪問線上地址時(shí)訪問到電腦上的代碼：
https://site-online.com http://192.168.0.106:3000
訪問成功之后顯示如下（實(shí)例代碼在前面）：
總結(jié)
總的來說 whistle 的功能是非常完善的，whistle 免費(fèi)而且全平臺(tái)都可以使用，相信這是一個(gè)非常大的亮點(diǎn)。
whistle的匹配模式(pattern)大體可以分成域名、路徑、正則、精確匹配、通配符匹配。
關(guān)于 whistle 配置代理的規(guī)則，官網(wǎng)有詳細(xì)的描述 https://wproxy.org/whistle/pattern.html，這里摘錄一部分：
域名匹配
# 匹配域名www.test.com下的所有請求，包括http、https、ws、wss，tunnel
www.test.com operatorURI
# 匹配域名www.test.com下的所有http請求
http://www.test.com operatorURI
# 匹配域名www.test.com下的所有https請求
https://www.test.com operatorURI
# 上述匹配也可以限定域名的端口號(hào)
www.test.com:8888 operatorURI # 8888端口
www.test.com/ operatorURI # http為80端口，其它443端口
路徑匹配
# 限定請求協(xié)議，只能匹配http請求
http://www.test.com/xxx operatorURI
http://www.test.com:8080/xxx operatorURI
# 匹配指定路徑下的所有請求
www.test.com/xxx operatorURI
www.test.com:8080/xxx operatorURI
精確匹配
包含請求協(xié)議
$http://www.test.com operatorURI
$https://www.test.com/xxx? operatorURI
這種情況分別只能匹配這兩種請求
http://www.test.com # 瀏覽器會(huì)自動(dòng)改為http://www.test.com/
https://www.test.com/xxx?
不包含請求協(xié)議
$www.test.com/xxx operatorURI
這種情況可以匹配如下四種請求
http://www.test.com/xxx
https://www.test.com/xxx
ws://www.test.com/xxx
wss://www.test.com/xxx
最后
感謝閱讀，歡迎關(guān)注我的頭條號(hào) 云影 sky，帶你解讀前端技術(shù)，掌握最本質(zhì)的技能。
