Mobile Platform as a Service：如何抓取 HTTP 報文（Mac OS/Charles）

背景

在基於 mPaaS 架構的移動 App 專案開發過程中，經常會遇到各種各樣的錯誤。特別是當問題涉及到用戶端與伺服器或網關之間的互動行為時，抓取 HTTP 報文是協助理解和排查這類錯誤的重要手段。例如，當觀察到存在請求報錯時，可以通過分析請求報文和響應報文，查看請求的資訊是否存在錯誤、伺服器是否正常返回以及查看傳回值是否符合預期等，協助判斷問題的根本原因。

HTTP 報文捕獲工具

常用的 HTTP 抓包工具有 Charles 和 Fiddler。兩者的基本原理幾乎一樣：

• 在本地架設一個的 HTTP Proxy，所有通過該 Proxy 的 HTTP 報文均可以被截獲和解析。

• 對於 HTTPS 協議報文的解析需要提前在用戶端配置好 Charles/Fiddler 的 CA Root 認證，保證“中間人”轉寄的資訊被用戶端信任，從而實現報文的解密。

Charles（macOS 平台）

本節以 Charles 4.5.5 版本為例，介紹 Charles 的原理、安裝、配置和 HTTPS 解密配置的內容。Charles 在 Mac 端是相當重要的 HTTP 報文分析工具，在許多問題的排查中能夠發揮相當重要的作用，協助開發人員高效定位和解決問題。

參考文檔：

• https://www.charlesproxy.com/documentation/welcome/

• https://zhuanlan.zhihu.com/p/26182135

安裝與基本介面

從 Charles 官網 下載 Charles 的 dmg 安裝包，運行安裝包並安裝到系統中。

初次開機 Charles 時，會請求給予設定系統代理程式的許可權，設定允許。啟動後，當有 HTTP 要求經過 Charles 時，可以在 Charles 主介面中見到這些請求，如下圖：

用戶端配置

• 在本機上啟動並執行模擬器所產生的 HTTP 要求預設會經過系統 Proxy，因此無需手動設定 Proxy 資訊。

• 對於物理行動裝置（iPhone/Android 手機）則需要手動設定 Proxy，保證其所產生的網路請求均經過 Charles Proxy 轉寄。

  1. 保證行動裝置可以通過 IP 直接存取安裝 Charles 的 Mac 裝置，建議將行動裝置和安裝 Charles 的機器置於同一網路下。

  2. 查看 Charles 的 Proxy 配置，擷取 Proxy 連接埠號碼：單擊 Proxy > Proxy Settings，開啟 Proxy 配置頁面，如下圖：

     說明

     預設連接埠號碼為 8888。

     

  3. 開啟系統網路設定，查看本機 IP 位址：

  4. 配置移動端 Proxy，以 iOS 裝置為例，開啟 設定 > 無線網路 > 對應 Wi-Fi 設定，添加 Proxy（Charles 機器）的 IP 位址和連接埠號碼。

     

  5. 移動端配置成功後，移動端首次請求到達 Charles 時會有如下提示，單擊 Allow：

  6. 在 Charles 中可見到行動裝置產生的 HTTP 要求。例如，通過手機瀏覽器訪問 http://www.antfin.com/，可以在 Charles 中見到該請求，如下圖：

配置 SSL Proxying

預設情況下，Charles 不會對 HTTPS 報文進行解密，如果需要分析 HTTPS 的報文內容，需配置 SSL Proxying 功能。主要有兩部分：

• 在裝置端（模擬器和真機均需安裝）安裝並信任 Charles Root CA。

• 在 Charles 中配置需要解密的 HTTPS 網站。

配置裝置端

1. 在 Charles 開啟的狀態下，移動端通過瀏覽器（iOS 請使用 Safari）訪問 chls.pro/ssl，瀏覽器會自動下載 charles-proxy-ssl-proxying-certificate.pem 並提示安裝 Charles Proxy Customer Root Certificate。

   

   Android 會需要對認證命名，並安裝在使用者信任憑據（Customer Certificate）中。

2. 對於 iOS 10 以上系統，進入 設定 > 通用 > 關於本機 > 認證信任設定，對上一步安裝的 Charles 認證啟用完全信任。

   

3. 需要注意的是，對於Android App，需要通過增加 配置網路安全選項 的方式來信任使用者信任憑據。步驟如下：

   1. 在 Portal 工程中增加一個 Network Security Configuration XML 資源，放到 res/xml/network_security_config.xml中，XML 內容如下：

      <network-security-config>
      <debug-overrides>
      <trust-anchors>
          <!-- Trust user added CAs while debuggable only -->
          <certificates src="user" />
      </trust-anchors>
      </debug-overrides>
      </network-security-config>

      

   2. 更新 AndroidManifest.xml 檔案，配置使用上面的 network security configuration：

      <?xml version="1.0" encoding="utf-8"?>
      <manifest ... >
      <application ...
                android:networkSecurityConfig="@xml/network_security_config"
                ... >
       ...
      </application>
      </manifest>

      

      單擊這裡 下載信任 User CA 的程式碼範例。

4. 如果本機（Mac）需要信任 Charles 認證，可通過 Help > SSL Proxying > Install Charles Root Certificate 進行設定。

配置 Charles

在 Charles 功能表列選擇 Proxy > SSL Proxy Settings…，在 SSL Proxying 選項卡中可以添加需要進行 HTTPS 報文解密的網域名稱和連接埠，並勾選 Enable SSL Proxying。

• 對於 mPaaS 公用雲端使用者，需要增加的網域名稱包括：

  • *.aliyun.com

  • *.alipay.com

  • *.aliyuncs.com

• 對於專有雲使用者，參考上述配置，加入自訂網域名。

上述配置完成後，可在 Charles 中看到 HTTPS 報文內容，例如：

• 配置前：HTTPS 報文處於亂碼狀態。

• 配置完成後：HTTPS 報文內容被解密。