前端人必備：詳解抓包原理和抓包工具whistle的用法

php零基礎(chǔ)到就業(yè)直播視頻課：進(jìn)入學(xué)習(xí)

時(shí)隔 3 年，重新接觸了移動(dòng)端 h5 頁(yè)面開(kāi)發(fā)，上一次還是大四實(shí)習(xí)。這一次是 hybrid 開(kāi)發(fā)，涉及到 h5 頁(yè)面與原生 app 的交互，h5 頁(yè)面需要與原生打通登錄態(tài)，以及調(diào)用原生app 的接口，比如調(diào)用原生相機(jī)進(jìn)行二維碼掃描。跟微信小程序開(kāi)發(fā)不同，本地開(kāi)發(fā)時(shí)微信有提供微信開(kāi)發(fā)者工具，可以本地模擬調(diào)用而我這邊需要每次都打包靜態(tài)文件，上傳服務(wù)器才能調(diào)試，非常麻煩。

能不能在原生 app 加載線上 h5 時(shí)，跑本地的代碼呢？答案是可以的，通過(guò)抓包工具比如 whistle 就可以做到攔截線上頁(yè)面請(qǐng)求數(shù)據(jù)，再響應(yīng)本地代碼，本文主要講述抓包的原理和抓包工具 whistle 使用。

1. 抓包的原理

1.1 什么是抓包？

抓包就是將網(wǎng)絡(luò)傳輸發(fā)送與接收的數(shù)據(jù)包進(jìn)行截獲、重發(fā)、編輯、轉(zhuǎn)存等操作，通過(guò)抓包可以：

• 分析網(wǎng)絡(luò)問(wèn)題

• 業(yè)務(wù)分析

• 分析網(wǎng)絡(luò)信息流通量

• 網(wǎng)絡(luò)大數(shù)據(jù)金融風(fēng)險(xiǎn)控制

• 探測(cè)企圖入侵網(wǎng)絡(luò)的攻擊

• 探測(cè)由內(nèi)部和外部的用戶(hù)濫用網(wǎng)絡(luò)資源

• 探測(cè)網(wǎng)絡(luò)入侵后的影響

• 監(jiān)測(cè)鏈接互聯(lián)網(wǎng)寬頻流量

• 監(jiān)測(cè)網(wǎng)絡(luò)使用流量（包括內(nèi)部用戶(hù)，外部用戶(hù)和系統(tǒng)）

• 監(jiān)測(cè)互聯(lián)網(wǎng)和用戶(hù)電腦的安全狀態(tài)

• 滲透與欺騙

• …

回顧下計(jì)算機(jī)網(wǎng)絡(luò)知識(shí)，數(shù)據(jù)在網(wǎng)絡(luò)上是以很小的幀的單位傳輸?shù)?，幀通過(guò)特定的稱(chēng)為網(wǎng)絡(luò)驅(qū)動(dòng)程序的程序進(jìn)行成型，然后通過(guò)網(wǎng)卡發(fā)送到網(wǎng)線上，通過(guò)網(wǎng)線到達(dá)目的機(jī)器，在目的機(jī)器的一端執(zhí)行相反的過(guò)程。接收端機(jī)器的以太網(wǎng)捕獲到這些幀，并告訴操作系統(tǒng)幀已到達(dá)，然后對(duì)其進(jìn)行存儲(chǔ)。在這個(gè)傳輸和接收的過(guò)程，就可以使用抓包工具（Sniffers）進(jìn)行抓包，作為前端開(kāi)發(fā)者，通常是抓取應(yīng)用層的 HTTP/HTTPS 的包。

1.2 HTTP/HTTPS 抓包原理

HTTP/HTTPS 是應(yīng)用層使用的通信協(xié)議，常見(jiàn)的應(yīng)用層體系結(jié)構(gòu)是客戶(hù)端-服務(wù)器體系。

對(duì)運(yùn)行在不同端系統(tǒng)上的客戶(hù)端程序和服務(wù)端程序是如何互相通信的么？實(shí)際上，在操作系統(tǒng)上的術(shù)語(yǔ)中，進(jìn)行通信的實(shí)際上是進(jìn)程而不是程序，一個(gè)進(jìn)程可以被認(rèn)為是運(yùn)行在端系統(tǒng)中的一個(gè)程序。

在 web 應(yīng)用程序中，一個(gè)客戶(hù)瀏覽器進(jìn)程與一臺(tái)服務(wù)器進(jìn)程進(jìn)行會(huì)話(huà)交換報(bào)文。

瀏覽器進(jìn)程需要知道接收進(jìn)程的主機(jī)地址，以及定義在目的主機(jī)中的接收進(jìn)程的標(biāo)識(shí)符，也就是目的端口。

多數(shù)應(yīng)用程序由通信進(jìn)程對(duì)組成，每對(duì)中的兩個(gè)進(jìn)程互相發(fā)送報(bào)文。進(jìn)程通過(guò)一個(gè)稱(chēng)為套接字的軟件接口向網(wǎng)絡(luò)發(fā)送報(bào)文和從網(wǎng)絡(luò)接收?qǐng)?bào)文。

進(jìn)程可以類(lèi)比一座房子，而它的套接字可以是它的門(mén)，套接字是應(yīng)用層與運(yùn)輸層之間的端口。

知道了兩個(gè)進(jìn)程的通信流程，我們要怎么抓包呢？舉一個(gè)生活中的例子，小明暗戀小雯，于是他寫(xiě)了一封情書(shū)，但他有點(diǎn)害羞，找了小雯的好朋友小花幫忙傳遞情書(shū)。這個(gè)時(shí)候，小花可以負(fù)責(zé)小雯與小明之間的情書(shū)傳遞，作為中間人，她可以偷偷查看他們的情書(shū)內(nèi)容。

思路就是設(shè)置一個(gè)中間人進(jìn)程負(fù)責(zé)抓包，每次目標(biāo)進(jìn)程之間的會(huì)話(huà)都先與中間人進(jìn)程通信，再進(jìn)行轉(zhuǎn)發(fā)。

1.2.1 HTTP 抓包原理

在 http 標(biāo)準(zhǔn)中，沒(méi)有對(duì)通信端身份驗(yàn)證的標(biāo)準(zhǔn)。對(duì)于服務(wù)器來(lái)說(shuō)，它接收的 HTTP 請(qǐng)求報(bào)文只要格式符合規(guī)范，就發(fā)送響應(yīng)報(bào)文。

對(duì)于客戶(hù)端來(lái)說(shuō)也是如此，它無(wú)法校驗(yàn)服務(wù)器的身份，比如它連接的 http://www.jecyu.com 的主機(jī)，但由于中間節(jié)點(diǎn)的存在，最終連接的可能是 http://www.jerry.com 的主機(jī)。

因此，對(duì)于 HTTP 抓包，無(wú)需做過(guò)多的處理，只需要讓中間人負(fù)責(zé)轉(zhuǎn)發(fā)客戶(hù)端和服務(wù)端的數(shù)據(jù)包。

1.2.2 HTTPS 抓包原理

HTTP 是明文傳輸，容易受到中間人攻擊，不安全。

HTTPS 語(yǔ)義仍然是 HTTP，只不過(guò)是在 HTTP 協(xié)議棧中 http 與 tcp 之間插入安全層 SSL/TSL。

安全層采用對(duì)稱(chēng)加密的方式加密傳輸數(shù)據(jù)和非對(duì)稱(chēng)加密的方式來(lái)傳輸對(duì)稱(chēng)密鑰，解決 http 數(shù)據(jù)沒(méi)有加密、無(wú)法驗(yàn)證身份、數(shù)據(jù)容易纂改三個(gè)核心問(wèn)題。

HTTP + 加密 + 認(rèn)證 + 完整性保護(hù) = HTTPS

其中驗(yàn)證身份問(wèn)題是通過(guò)驗(yàn)證服務(wù)器的證書(shū)來(lái)實(shí)現(xiàn)的，證書(shū)是第三方組織（CA 證書(shū)簽發(fā)機(jī)構(gòu)）使用數(shù)字簽名技術(shù)管理的，包括創(chuàng)建證書(shū)、存儲(chǔ)證書(shū)、更新證書(shū)、撤銷(xiāo)證書(shū)。

瀏覽器連接至一個(gè) HTTPS 網(wǎng)站，服務(wù)器發(fā)送的不僅僅只是服務(wù)器實(shí)體證書(shū)，而是一個(gè)證書(shū)鏈，但不包含根證書(shū)，根證書(shū)會(huì)被內(nèi)嵌在 Windows, Linux, macOS, Android, iOS 這些操作系統(tǒng)里。

其中校驗(yàn)證書(shū)分為兩步，證書(shū)的簽發(fā)者校驗(yàn)和服務(wù)器實(shí)體證書(shū)校驗(yàn)

1、證書(shū)鏈校驗(yàn)：

• 1.1 瀏覽器從服務(wù)器實(shí)體證書(shū)的上一級(jí)證書(shū)（比如 B 證書(shū)）獲取公鑰，用來(lái)校驗(yàn)服務(wù)器實(shí)體證書(shū)的簽名（簽名是通過(guò) CA 機(jī)構(gòu)的私鑰簽名的），校驗(yàn)成功則繼續(xù)，否則證書(shū)校驗(yàn)失敗。

• 1.2 瀏覽器從 B 證書(shū)的上一級(jí)證書(shū)（比如 C 證書(shū)）獲取公鑰，用來(lái)校驗(yàn) B 證書(shū)的簽名，

校驗(yàn)成功則繼續(xù)，否則證書(shū)校驗(yàn)失敗。

• 1.3 瀏覽器迭代校驗(yàn)每張證書(shū)的簽名，最后會(huì)找到自簽名的根證書(shū)（簽發(fā)者和使用者是同一個(gè)人），由于瀏覽器已經(jīng)集成了根證書(shū)，可以充分信任根證書(shū)的公鑰，完成最后的簽名。

2、服務(wù)器實(shí)體證書(shū)校驗(yàn)：訪問(wèn)的域名信息是否與證書(shū)一致、日期、證書(shū)擴(kuò)展校驗(yàn)等。

了解完證書(shū)校驗(yàn)后，我們來(lái)看看具體的 https 通信流程：

• 首先是 tcp 的三次握手建立連接

• 接著是非對(duì)稱(chēng)加密的握手過(guò)程

• client 發(fā)送隨機(jī)數(shù) random1 + 支持的加密算法集合

• server 收到信息，返回選擇的一個(gè)加密算法+ 證書(shū) （包含S_公鑰） + random2

• client 驗(yàn)證證書(shū)有效性，并用 random1 + random2 生成 pre-master-secure，通過(guò)服務(wù)端公鑰加密發(fā)送給 server

• server 收到 pre-master-secure，根據(jù)約定的算法使用S_私鑰對(duì) pre-master-secure 解密，

• 然后用加密算法生成 master-secure（對(duì)稱(chēng)加密的密鑰），然后發(fā)送給 client

• client 收到生成的 master-secure，對(duì)稱(chēng)加密密鑰傳輸完畢

• 最后，就可以使用 master-secure 進(jìn)行真正的數(shù)據(jù)對(duì)稱(chēng)加密傳輸。

中間人想要抓包，需在 HTTPS 加密通信之前：

• 截取客戶(hù)端發(fā)送的包含證書(shū)的報(bào)文，偽裝成服務(wù)端，把自己的證書(shū)發(fā)給客戶(hù)端，然后拿到【客戶(hù)端返回的包含對(duì)稱(chēng)加密通信密鑰的報(bào)文】，生成中間人與客戶(hù)端對(duì)稱(chēng)加密的密鑰。

• 同樣偽裝成客戶(hù)端，以服務(wù)端自己的非對(duì)稱(chēng)公鑰加密【客戶(hù)端返回的包含對(duì)稱(chēng)加密通信密鑰的報(bào)文】發(fā)給服務(wù)端，獲得服務(wù)端生成的對(duì)稱(chēng)加密密鑰。

• 這樣一來(lái)，加密通信建立完成，而中間人拿到了通信的數(shù)據(jù)密鑰，可以查看、修改 HTTPS 的通信報(bào)文。

• 這里客戶(hù)端與中間人通信、中間人與服務(wù)端通信，都是正常建立了 HTTPS 加密連接的。

其中很重要的一步是瀏覽器的根證書(shū)校驗(yàn)，CA 機(jī)構(gòu)不可能隨便給一個(gè)中間人簽發(fā)不屬于它的域名證書(shū)，也就不在客戶(hù)端的操作系統(tǒng)上了，因此只能把中間人的根證書(shū)，導(dǎo)入到客戶(hù)端的操作系統(tǒng)了，以此完成建立加密通信時(shí)對(duì)中間人證書(shū)的驗(yàn)證。

1.3 電腦如何抓手機(jī)的包

要想通過(guò)電腦端獲取手機(jī) Web 應(yīng)用的數(shù)據(jù)包，根據(jù)前面所學(xué)，就需要中間人策略。

PC 端建立一個(gè)服務(wù)器中間人進(jìn)程，偽裝為 web 應(yīng)用的目標(biāo)服務(wù)器。手機(jī)端 web 應(yīng)用發(fā)送的請(qǐng)求數(shù)據(jù)先經(jīng)過(guò)中間人，中間人進(jìn)行攔截處理再發(fā)送給目標(biāo)服務(wù)器。反過(guò)來(lái)，目標(biāo)服務(wù)器發(fā)送的數(shù)據(jù)包先通過(guò)中間人，再由中間人響應(yīng)給瀏覽器客戶(hù)端。

這里要注意的是，無(wú)論是個(gè)人電腦PC，還是移動(dòng)端手機(jī)，都需要接入互聯(lián)網(wǎng)網(wǎng)絡(luò)，可以相互找到對(duì)方才能建立通信。

一般對(duì)開(kāi)發(fā)來(lái)說(shuō)，個(gè)人電腦本地起的服務(wù)器進(jìn)程，在公網(wǎng)上是訪問(wèn)不到的。一般是無(wú)線局域網(wǎng)，個(gè)人電腦與手機(jī)端連接同一個(gè)路由器發(fā)出的 Wi-Fi，就可以相互通信。

具體步驟：

• 在 PC 電腦本地起一個(gè)服務(wù)器進(jìn)程，監(jiān)聽(tīng)一個(gè)端口比如 8899

• 在手機(jī)上連接同一個(gè)局域網(wǎng)，配置網(wǎng)絡(luò)代理，指向 PC 端的 IP 地址和 8899 端口

• 這樣一來(lái)，手機(jī)上所有的網(wǎng)絡(luò)通信都會(huì)被先轉(zhuǎn)發(fā)到 PC 端的 8899 端口，就可以對(duì)數(shù)據(jù)包進(jìn)行分析處理

拿訪問(wèn) youtuBe 來(lái)說(shuō)，比如電腦已經(jīng)使用【服務(wù)器軟件】成功訪問(wèn)，此時(shí)只要手機(jī)配置代理指向電腦 ip 地址和指定端口，手機(jī)就可以同樣訪問(wèn) youtuBe了。

2. 抓包工具 whistle

2.1 whistle 是什么

Whistle 是基于 Node 實(shí)現(xiàn)的跨平臺(tái)抓包免費(fèi)調(diào)試工具，其主要特點(diǎn)：

1、完全跨平臺(tái)：支持 Mac、Windows 等桌面系統(tǒng)，且支持服務(wù)端等命令行系統(tǒng)

2、功能強(qiáng)大：

• 支持作為 HTTP、HTTPS、SOCKS 代理及反向代理

• 支持抓包及修改 HTTP、HTTPS、HTTP2、WebSocket、TCP 請(qǐng)求

• 支持重放及構(gòu)造 HTTP、HTTPS、HTTP2、WebSocket、TCP 請(qǐng)求

• 支持設(shè)置上游代理、PAC 腳本、Hosts、延遲（限速）請(qǐng)求響應(yīng)等

• 支持查看遠(yuǎn)程頁(yè)面的 console 日志及 DOM 節(jié)點(diǎn)

• 支持用 Node 開(kāi)發(fā)插件擴(kuò)展功能，也可以作為獨(dú)立 npm 包引用

3、操作簡(jiǎn)單

• 直接通過(guò)瀏覽器查看抓包、修改請(qǐng)求

• 所有修改操作都可以通過(guò)配置方式實(shí)現(xiàn)（類(lèi)似系統(tǒng) Hosts），并支持分組管理

• 項(xiàng)目可以自帶代理規(guī)則并一鍵配置到本地 Whistle 代理，也可以通過(guò)定制插件簡(jiǎn)化操作

如何快速使用 whistle

• 先安裝 node，建議用 nvm 管理

• 全局安裝 whistle

npm i -g whistle & w2 start

安裝后，可以在電腦上設(shè)置全局代理，代理的端口為 8899.

w2 proxy // 設(shè)置全局代理  w2 proxy off // 關(guān)閉全局代理

就可以通過(guò)瀏覽器訪問(wèn) http://127.0.0.1:8899/ 查看抓包、修改請(qǐng)求等。

如果你不想使用全局代理，就可以安裝 SwitchyOmega 插件，按需對(duì)某些網(wǎng)站設(shè)置 whistle 代理。

• 選擇 Whistle 代理

• 設(shè)置 Whistle 代理

2.2 whistle 可以做的事情

whistle 可以做的事情很多，以下是官網(wǎng)圖：

一些例子配置如下圖所示：

3. whistle 實(shí)戰(zhàn)案例

3.1 原生 app 加載 PC本地代碼開(kāi)發(fā)

在原生 app 上已經(jīng)通過(guò) h5 域名加載了 web 頁(yè)面，但是本地開(kāi)發(fā)時(shí)不想每次都走流水線或本地打包上傳代碼。

需要把原生 app 的請(qǐng)求代理到本地服務(wù)器上來(lái)，前提條件是 wifi 手機(jī)與電腦可相互訪問(wèn)，也就是前面提到的電腦抓 pc 的包。

因?yàn)槲业?web 服務(wù)端是 https 應(yīng)用，因此需要下載 whistle 提供的根證書(shū)，手動(dòng)導(dǎo)入到手機(jī)上。

點(diǎn)擊 HTTPS 菜單，然后使用手機(jī)掃描二維碼，使用手機(jī)瀏覽器打開(kāi)即可下載，在手機(jī)證書(shū)中設(shè)置進(jìn)行導(dǎo)入并且設(shè)置信任。

此時(shí)，再在手機(jī)上配置代理指向 PC 電腦的 IP和 whistle 監(jiān)聽(tīng)的端口即可在電腦上截獲數(shù)據(jù)包。

我本地webpack 啟動(dòng)的服務(wù)器應(yīng)用訪問(wèn)地址為：xxx.xxx.xxx.xxx:8080

whistle 的配置規(guī)則：

# Rules  # 訪問(wèn)首頁(yè)走本地  jecyu.com/webs/short-transport http://xxx.xxx.xxx.xxx:8080?deptCode=755DL # 首頁(yè)路徑  # 后續(xù)的請(qǐng)求都使用本地代碼  jecyu.com http://xxx.xxx.xxx.xxx:8080?deptCode=755DL

其中試過(guò)在原生 app 訪問(wèn)本地應(yīng)用時(shí)出現(xiàn)錯(cuò)誤“ webpack 會(huì)提示 invalid host header”，解決方案是在 devServer 配置添加即可：

devServer: {  allowedHosts: 'all',  }

至此，成功讓原生 app 訪問(wèn)PC 端本地的開(kāi)發(fā)代碼。

3.2 查看移動(dòng)端的 DOM 樣式

Whistle 能夠通過(guò)內(nèi)置的 Weinre 去實(shí)現(xiàn)查看移動(dòng)端的 DOM 樣式，配置規(guī)則如下

# 設(shè)置 weinre  https://juejin.cn weinre://test

手機(jī)上重新訪問(wèn) juejin.cn 網(wǎng)站，然后打開(kāi) weinre 可以看到如下，綠色表示遠(yuǎn)程連接成功。

可以點(diǎn)擊 Element 查看手機(jī)上網(wǎng)頁(yè) DOM 結(jié)構(gòu)、樣式等信息。

也可以在 console 控制臺(tái)中，執(zhí)行代碼，比如 alert ，手機(jī)應(yīng)用上會(huì)顯示彈框。

4. 總結(jié)

學(xué)會(huì)抓包是軟件開(kāi)發(fā)人員必須掌握的調(diào)試技能，本文先介紹抓包的原理，再介紹抓包工具 whistle 的使用，whistle 非常強(qiáng)大，本文只是粗略的介紹，