微信小程序抓包詳解

一、抓包的基本概念

1、抓包是什麼

在網絡通信過程中，數據是通過網絡傳輸的，而抓包就是指獲取這些網絡通信中傳輸的數據的技術，其實就是一個數據攔截的過程。在計算機通信的過程中，通信數據是以數據包為單位發送的。抓包可以獲取到這些數據包並對其進行分析和處理。

2、為什麼需要抓包

在開發微信小程序時，我們需要通過接口與後端進行通信，為了保證數據傳輸的正確性和安全性，我們需要對請求和響應數據進行監測和調試。此時，抓包能夠幫助我們觀察和修改我們應用的網絡請求。同時，抓包也有助於我們分析應用的性能及問題。

3、抓包的工具

常用的抓包工具有Fiddler、Charles、Wireshark等。在本文中，我們以Fiddler為例，介紹抓包的具體操作。

二、Fiddler的使用方法

1、下載並安裝Fiddler

官網下載地址：https://www.telerik.com/download/fiddler/fiddler4
安裝過程中需要設置代理，若沒仔細設置，請在電腦網絡設置中將代理關掉！

2、啟動Fiddler

安裝完成後，雙擊桌面快捷方式即可啟動Fiddler。啟動後，我們可以在Fiddler的窗口中看到主要的界面：

（圖片為Fiddler主界面）

3、設置抓包規則

在Fiddler的「Rules」菜單中，選擇「Customize Rules」選項。這個文件可以自定義抓取請求，修改響應，添加頭部或cookie等信息。

// 比如我們在請求的header中通過User-Agent設置自定義瀏覽器類型為「fiddler」
static function OnBeforeRequest(oSession: Session) {
    if (oSession.uriContains("weixin")) {
        oSession["ui-customcolumn"] = "Attention";
        oSession.oRequest["User-Agent"] = "fiddler";
    }
}

通過在代碼中自定義「fiddler」作為User-Agent，我們就可以在抓包的過程中偽裝成fiddler瀏覽器，以便於測試自定義消息處理程序。此外，還可以設置過濾規則以快速篩選所需的請求。

4、進行抓包

當設置完成後，點擊Fiddler的「Start」按鈕，即可開始進行抓包，Fiddler將自動對本機的網絡進行截取和分析。此時，我們會在主界面的Session列表中看到所有的會話（請求和響應）並能夠按源（客戶端）或目的地（服務器）端口進行篩選。在展開每個標記時，我們可以看到每個會話所包含的詳細信息。

// 如下是一段微信小程序請求API的示例
GET https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN HTTP/1.1
Host: api.weixin.qq.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:44.0) Gecko/20100101 Firefox/44.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Cookie: pgv_pvi=941423616; mm_lang=zh_CN; ts_refer=www.sogou.com/link; ts_uid=88777486

5、修改請求/響應內容

在抓包的過程中，我們有時需要修改請求/響應內容。例如：

// 修改請求內容
static function OnBeforeRequest(oSession: Session) {
    // 判斷請求是否為某個API，若是則修改請求內容
    if (oSession.fullUrl.Contains("XXX")) {
        oSession.fullUrl = oSession.fullUrl.Replace("XXX", "YYY");
        // 獲取請求內容，並替換
        oSession.RequestBody = oSession.RequestBody.Replace("value1", "值1");
        oSession.RequestBody = oSession.RequestBody.Replace("value2", "值2");
    }
}

// 修改響應內容
static function OnBeforeResponse(oSession: Session) {
    // 判斷響應是否為某個API，若是則修改響應內容
    if (oSession.fullUrl.Contains("ZZZ")) {
        // 獲取響應內容，並替換
        oSession.ResponseBody = oSession.ResponseBody.Replace("source_value", "target_value");
    }
}

在代碼中，我們可以通過全局替換源內容的方式來修改請求/響應的內容，以達到調試和測試的目的。

三、微信小程序抓包的實踐

在微信小程序開發中，我們可以通過抓包工具Fiddler來查看小程序內全局接口請求和返回信息。

1、開啟Fiddler

打開Fiddler並啟動。

2、配置小程序HTTPS解密

在Fiddler中選擇Tools菜單中的Fiddler Options，彈出窗口中選擇HTTPS標籤，勾選Decrypt HTTPS traffic。此時會提醒生成一個Fiddler生成的根證書，點擊Yes，並選擇Yes，如果電腦操作系統已經允許根證書安裝，則Fiddler會自動安裝相應根證書；如果電腦操作系統未安裝，則需要手動安裝，在http://localhost.:8888/的根目錄中下載根證書並安裝。

3、操作微信開發者工具

在微信開發者工具中，進入設置，點擊常規設置，勾選上Native模擬器（beta），勾選上開啟自定義端口（默認8888），同時勾選上開啟調試模式。之後保存並重啟開發者工具，在調試頁面查看window.location.href即可確認所使用的HTTP請求方法。

如果選擇模擬器為iOS系統，則需要額外勾選上安裝HTTP證書的選項。然後在生成的證書中選擇微信小程序對應的擴展證書進行安裝。安裝完成後，在小程序調試地址前加上fiddler的代理地址即可通過Fiddler抓包。

4、查看微信小程序請求和返回內容

在Fiddler中，我們可以通過過濾器來過濾並查看微信小程序的請求和返回信息。過濾器可以通過添加包含小程序關鍵詞的正則表達式進行匹配，例如：

 // 添加過濾條件，過濾包含關鍵字XXX的所有請求
if (oSession.isHTTPS && oSession.PathAndQuery.ToLower().Contains("XXX")) {
    oSession["ui-color"] = "red";
}

過濾器能夠顯著提高我們的開發效率，讓我們能以更加高效的方式檢查和調試小程序的網絡請求和響應內容。

四、總結

微信小程序是一種新型的移動應用形態，相較於傳統的移動應用，其優點在於更低的開發門檻和更高的運行效率。然而，在開發小程序時，因為小程序是基於網絡進行通信的，因此，網絡接口測試和調試是至關重要的。而抓包工具Fiddler則是網絡調試的利器，能夠幫助我們輕鬆監測和調試我們的網絡請求和響應。在小程序開發中，能夠熟練使用Fiddler抓包並在實踐中快速解決問題，對於提升開發效率和應用質量大有裨益。