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

時隔 3 年，重新接觸了行動裝置 h5 頁面開發，上一次還是大四實習。這次是 hybrid 開發，涉及到 h5 頁面與原生 app 的交互，h5 頁面需要與原生打通登錄態，以及調用原生app 的接口，例如調用原生相機進行二維碼掃描。跟微信小程式開發不同，本地開發時微信有提供微信開發者工具，可以本地模擬調用而我這邊需要每次都打包靜態文件，上傳伺服器才能調試，非常麻煩。

能不能在原生 app 載入線上 h5 時，跑本地的程式碼呢？答案是可以的，透過抓包工具例如 whistle 就可以做到攔截線上頁面請求數據，再響應本地代碼，本文主要講述抓包的原理和抓包工具 whistle 使用。

1. 抓包的原理

1.1 什麼是抓包？

抓包就是將網路傳輸發送與接收的資料包進行截取、重發、編輯、轉存等操作，透過抓包可以：

• 分析網路問題

• 商業分析

• 分析網路資訊流通量

• 網路大數據金融風險控制

• 探測企圖入侵網路的攻擊

• 偵測由內部和外部的使用者濫用網路資源

• 探測網路入侵後的影響

• 監控連結互聯網寬頻流量

• 監控網路使用流量（包括內部用戶，外部使用者與系統）

• 監控網路與使用者電腦的安全狀態

• 「滲透與欺騙

#...

回顧下電腦網路知識，資料在網路上是以很小的幀

的單位傳輸的，幀通過特定的稱為網絡驅動程式的程式進行成型，然後透過網路卡發送到網路線上，透過網路線到達目的機器，在目的機器的一端執行相反的過程。接收端機器的乙太網路會擷取到這些幀，並告訴作業系統幀已到達，然後對其進行儲存。在這個傳輸和接收的過程，就可以使用抓包工具（Sniffers）進行抓包，作為前端開發者，通常是抓取應用層的 HTTP/HTTPS 的包。

1.2 HTTP/HTTPS 抓包原理

HTTP/HTTPS 是應用層使用的通訊協議，常見的應用層體系結構是客戶端-伺服器體系。

對運行在不同端系統上的客戶端程式和服務端程式是如何互相通訊的麼？實際上，在作業系統上的術語中，進行通訊的實際上是

進程

而不是程序，一個進程可以被認為是運行在端系統中的一個程序。 在 web 應用程式中，一個客戶瀏覽器進程與一台伺服器進程進行會話交換封包。

瀏覽器進程需要知道接收進程的主機位址，以及定義在目的主機中的接收進程的標識符，也就是目的端口。

多數應用程式由通訊進程對組成，每對中的兩個進程互相發送封包。進程透過一個稱為套接字的軟體介面向網路發送封包和從網路接收封包。

進程可以類比一棟房子，而它的套接字可以是它的門，

套接字

是應用層與運輸層之間的連接埠。

知道了兩個行程的通訊流程，我們要怎麼抓包呢？舉一個生活中的例子，小明暗戀小雯，於是他寫了一封情書，但他有點害羞，找了小雯的好朋友小花幫忙傳遞情書。這時候，小花可以負責小雯與小明之間的情書傳遞，身為中間人，她可以偷偷查看他們的情書內容。

想法就是設定一個中間人進程負責抓包，每次目標進程之間的會話都先與中間人進程通信，再進行轉發。

1.2.1 HTTP 抓包原理

#在 http 標準中，沒有通訊端驗證的標準。對於伺服器來說，它接收的 HTTP 請求封包只要格式符合規範，就傳送回應封包。

對於客戶端來說也是如此，它無法校驗伺服器的身份，例如它連接的http://www.jecyu.com 的主機，但由於中間節點的存在，最終連線的可能是

http://www.jerry.com

的主機。

###因此，對於 HTTP 抓包，無需做過多的處理，只需要讓中間人負責轉送客戶端和服務端的資料包。 #########1.2.2 HTTPS 抓包原理#########HTTP 是明文傳輸，容易受到中間人攻擊，不安全。 ###

HTTPS 語意仍然是 HTTP，只不過是在 HTTP 協定堆疊中 http 與 tcp 之間插入安全層 SSL/TSL。

安全層採用對稱加密的方式加密傳輸資料和非對稱加密的方式來傳輸對稱金鑰#，解決http 資料沒有加密、無法驗證身分、資料容易纂改三個核心問題。

HTTP 加密認證完整性保護= HTTPS

其中驗證身分問題是透過驗證伺服器的憑證來實現的，憑證是第三方組織（CA憑證簽發機構）使用數位簽章技術管理的，包括建立憑證、儲存憑證、更新憑證、撤銷憑證。

瀏覽器連接到一個HTTPS 網站，伺服器發送的不僅只是伺服器實體證書，而是一個證書鏈，但不包含根證書，根證書會被內嵌在Windows, Linux, macOS, Android, iOS 這些作業系統裡。

其中校驗證書分為兩步，憑證的簽發者校驗和伺服器實體憑證校驗

1、憑證鏈校驗：

• 1.1 瀏覽器從伺服器實體憑證的上一層憑證（例如B 憑證）取得公鑰，用來校驗伺服器實體憑證的簽章（簽章是透過CA 機構的私鑰簽署的），校驗成功則繼續，否則憑證校驗失敗。

• 1.2 瀏覽器從B 憑證的上一層憑證（例如C 憑證）取得公鑰，用來校驗B 憑證的簽名，

校驗成功則繼續，否則憑證校驗失敗。

• 1.3 瀏覽器迭代校驗每張證書的簽名，最後會找到自簽名的根證書（簽發者和用戶是同一個人），由於瀏覽器已經集成了根證書，可以充分信任根憑證的公鑰，完成最後的簽章。

2、伺服器實體憑證校驗：存取的網域資訊是否與憑證一致、日期、憑證擴充校驗等。

#了解完憑證校驗後，我們來看看具體的https 通訊流程：

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

• 接著是不對稱加密的握手過程

• client 傳送隨機數字random1 支援的加密演算法集合

• server 收到訊息，傳回選擇的一個加密演算法憑證（包含S_公鑰） random2

• client 驗證憑證有效性，並用random1 random2 產生pre-master-secure，透過服務端公鑰加密傳送給server

• server 接收到pre-master-secure，根據約定的演算法使用S_私鑰對pre-master-secure 解密，

• 接著用加密演算法產生master-secure（對稱加密的金鑰），然後傳送給client

• client 收到產生的 master-secure，對稱加密金鑰傳輸完畢

• 最後，就可以使用master-secure 進行真正的資料對稱加密傳輸。

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

• 截取客戶端發送的包含證書的報文，偽裝成服務端，把自己的憑證發給客戶端，然後拿到【客戶端回傳的包含對稱加密通訊金鑰的報文】，產生中間人與客戶端對稱加密的金鑰。

• 同樣偽裝成客戶端，以服務端自己的非對稱公鑰加密【客戶端傳回的包含對稱加密通訊金鑰的封包】發給服務端，取得服務端產生的對稱加密金鑰。

• 這樣一來，加密通訊建立完成，而中間人拿到了通訊的資料金鑰，可以檢視、修改 HTTPS 的通訊訊息。

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

其中很重要的一步是瀏覽器的根證書校驗，CA 機構不可能隨便給一個中間人簽發不屬於它的網域證書，也就不在客戶端的作業系統上了，因此只能把中間人的根證書，導入到客戶端的作業系統了，以此完成建立加密通訊時對中間人證書的驗證。

1.3 電腦如何抓手機的包

要想透過電腦端取得手機 Web 應用的資料包，根據前面所學，就需要中間人策略。

PC 端建立一個伺服器中間人進程，偽裝為 web 應用的目標伺服器。手機端 web 應用程式傳送的請求資料先經過中間人，中間人進行攔截處理再傳送給目標伺服器。反過來，目標伺服器發送的資料包先通過中間人，再由中間人回應給瀏覽器客戶端。

這裡要注意的是，無論是個人電腦PC，還是行動端手機，都需要接入互聯網網絡，可以互相找到對方才能建立通訊。

一般對開發來說，個人電腦本地起的伺服器進程，在公網上是無法存取的。一般是無線區域網，個人電腦與手機端連接同一個路由器發出的 Wi-Fi，就可以互相通訊。

具體步驟：

• 在PC 電腦本地起一個伺服器進程，監聽一個連接埠例如8899

• 在手機上連接同一個區域網，設定網路代理，指向PC 端的IP 位址和8899 埠

• 這樣一來，手機上所有的網路通訊都會被先轉送到PC 端的8899 端口，就可以對資料包進行分析處理

#拿訪問youtuBe 來說，例如電腦已經使用【伺服器軟體】成功訪問，此時只要手機配置代理指向電腦ip 位址和指定端口，手機就可以同樣存取youtuBe了。

2. 抓包工具whistle

2.1 whistle 是什麼

Whistle 是基於Node 實作的跨平台抓包免費偵錯工具，其主要特點：

1、完全跨平台：支援Mac、Windows 等桌面系統，且支援服務端等命令列系統

2、功能強大：

• 支援作為HTTP、HTTPS、SOCKS 代理程式及反向代理

• #支援抓包及修改HTTP、HTTPS、HTTP2、WebSocket、TCP 請求

• 支援重播及建構HTTP、HTTPS、HTTP2、WebSocket、TCP 請求

• 支援設定上游代理程式、PAC 腳本、Hosts、延遲（限速）請求回應等

• 支援查看遠端頁面的console 日誌及DOM 節點

• 支援用Node 開發外掛擴充功能，也可以作為獨立npm 套件引用

3、操作簡單

• #直接透過瀏覽器檢視抓包、修改請求

• 所有修改操作都可以透過設定方式實現（類似系統Hosts），並支援分組管理

• 專案可以自帶代理規則並一鍵配置到本地Whistle 代理，也可以透過自訂外掛程式簡化操作

如何快速使用whistle

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

• 全域安裝whistle

npm i -g whistle & w2 start

安裝後，可以在電腦上設定全域代理，代理程式的連接埠為8899.

w2 proxy // 设置全局代理

w2 proxy off // 关闭全局代理

就可以透過瀏覽器存取http://127.0.0.1:8899/ 查看抓包、修改請求等。

如果你不想使用全域代理，就可以安裝 SwitchyOmega 插件，按需對某些網站設定 whistle 代理。

• 選擇Whistle 代理程式

• #設定Whistle 代理程式

#2.2 whistle 可以做的事情

whistle 可以做的事情很多，以下是官網圖：

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

#3. whistle 實戰案例

3.1 原生app 載入PC本地程式碼開發

在原生app 上已經透過h5 網域載入了web 頁面，但本地開發時不想每次都走管線或本地打包上傳程式碼。

需要把原生 app 的請求代理到本地伺服器上來，前提條件是 wifi 手機與電腦可相互訪問，也就是前面提到的電腦抓 pc 的包。

因為我的 web 服務端是 https 應用，因此需要下載 whistle 提供的根證書，手動匯入到手機上。

點擊 HTTPS 選單，然後使用手機掃描二維碼，使用手機瀏覽器開啟即可下載，在手機憑證中設定進行匯入並且設定信任。

此时，再在手机上配置代理指向 PC 电脑的 IP和 whistle 监听的端口即可在电脑上截获数据包。

我本地webpack 启动的服务器应用访问地址为：xxx.xxx.xxx.xxx:8080

whistle 的配置规则：

# Rules

# 访问首页走本地

jecyu.com/webs/short-transport http://xxx.xxx.xxx.xxx:8080?deptCode=755DL # 首页路径

# 后续的请求都使用本地代码

jecyu.com http://xxx.xxx.xxx.xxx:8080?deptCode=755DL

其中试过在原生 app 访问本地应用时出现错误“ webpack 会提示 invalid host header”，解决方案是在 devServer 配置添加即可：

devServer: {

allowedHosts: 'all',

}

至此，成功让原生 app 访问PC 端本地的开发代码。

3.2 查看移动端的 DOM 样式

Whistle 能够通过内置的 Weinre 去实现查看移动端的 DOM 样式，配置规则如下

# 设置 weinre

https://juejin.cn weinre://test

手机上重新访问 juejin.cn 网站，然后打开 weinre 可以看到如下，绿色表示远程连接成功。

可以点击 Element 查看手机上网页 DOM 结构、样式等信息。

也可以在 console 控制台中，执行代码，比如 alert ，手机应用上会显示弹框。

4. 总结

学会抓包是软件开发人员必须掌握的调试技能，本文先介绍抓包的原理，再介绍抓包工具 whistle 的使用，whistle 非常强大，本文只是粗略的介绍，更多的使用技巧，大家可以查看官方文档whistle 文档。

参考资料

• 扯一扯HTTPS单向认证、双向认证、抓包原理、反抓包策略

• 网络抓包原理及Fiddler的使用

• 前端应该知道的web调试工具——whistle

• 移动端调试痛点？——送你五款前端开发利器

• whistle工具全程入门

• Whistle 配置 https 抓包

• 解决webpack5 invalid host Header问题

• whistle localhost不能代理

• Proxying to localhost no longer works

• 使用线上域名访问本地代码调试——whistle代理

• wiki数据包分析器

原文地址：https://juejin.cn/post/7140040425129115684

（学习视频分享：web前端）