Photo on charlesproxy.com

前言

前幾週分別介紹了 Charles 選項欄中的 Proxy 與 Tools
而在這一週將會分享如何使用 Charles 來攔截封包
並分享 Charles 的工具列 (雖然與前幾週的內容一樣 但還是稍微介紹一下)

分享重點

• 通過 Charles 進行電腦端攔截封包
• 通過 Charles 進行手機端攔截封包
• 通過 Charles 進行 HTTPS 攔截封包
• 介紹 Charles 工具列

通過 Charles 進行電腦端攔截封包

Charles 會自動配置瀏覽器和工具的代理設定
換句話說打開 Charels 同時就已經是攔截封包的狀態了
但是還是需要確保以下兩點：

1. 確保 Charles 處於 Start Recording 狀態
2. 確保 macOS proxy 為啟用狀態 (將 Charles 設定為系統代理)

   藉由選項欄中依序選擇 Proxy > Proxy Settings > macOS
   啟用 MacOS proxy: Enable macOS proxy
   但是如果只想要抓取 App 的封包建議可以取消勾選該選項
   

通過 Charles 進行手機端攔截封包

手機攔截封包的原理和上述的 PC 類似
需要將手機通過把網絡委託給 Charles 進行代理與服務端進行對話

1. 手機與電腦須在同個區域網路，IP 不一定要相同，但要在同個路由器底下
2. 電腦端設定內容：
   a. 關閉電腦端的防火牆
   b. 打開 Charles 的代理功能
       藉由選項欄中依序選擇 Proxy > Proxy Settings > Proxies
       預設埠是 8888 也可以根據實際情況進行修改或啟用動態連接埠
       勾選 Enable transparent HTTP proxying
   
   c. 如果只需攔截手機封包，可以取消勾選 PC 端攔截封包提到的 macOS proxy
3. 手機端設定內容：
   a. 藉由選項欄中依序選擇 Help > Local IP Address 來查看本機的 IP 位址
   
   b. 設定手機端的 WIFI 代理，輸入電腦 IP 和 Charles 的代理端口
      
4. 如果裝置是第一次連線 Charles 會出現是否允許 IP 進行連線的提示視窗
   

通過 Charles 進行 HTTPS 攔截封包

HTTPS 的封包攔截也分為電腦端與手機端
以下將分別介紹兩者的設定

• 電腦端
  1. 安裝 Charles 的 SSL 憑證：

     藉由選項欄中依序選擇 Help > SSL Proxying > Install Charles Root Certificate
     點擊尚未被信任的 Charles Proxy 憑證
     
     開啟 "信任" 選單，點擊 "使用此憑證時" 的下拉式選單，並選擇 "永遠信任"
     
     確認 Charles Proxy 憑證已被信任
     

  2. 設定 SSL 代理的內容

     藉由選項欄中依序選擇 Proxy > Start Proxying Settings
     勾選 Enable SSL proxying
     

  3. 完成以上步驟，就可以進行 HTTPS 封包攔截了
• 手機端
  1. 安裝 Charles 的 SSL 證書：

     藉由選項欄中依序選擇 Help > SSL Proxying > Install Charles Root Certificate on a Mobile Device or Remote Browser
     前往提示視窗中所提到的 http://chls.pro/ssl (必須先完成手機的代理)
     

  2. 安裝完成後開啟後進行設定

     憑證名稱可以命名比較容易辨識的，例如 "Charles SSL"
     下方認證使用的部分選擇 "VPN與應用程式"
     最後點擊 "確定" 進行安裝
     

  3. 完成以上步驟，就可以進行 HTTPS 封包攔截了

介紹 Charles

工具列

Charles 上方的工具列中提供了幾個較常使用的功能
以下將依左至右一個一個的簡單介紹各自的功能

• Clear the current Session:
   清除捕獲到的所有請求
• Start/Stop Recording:
   紅色(啟用狀態)：正在捕獲請求
   灰色(停用狀態)：停止捕獲請求
   可在選項欄中依序選擇 Proxy > Start/Stop Recording
   快捷鍵：command+R
• Start/Stop SSL Proxying:
   閉鎖(啟用狀態)：啟用 SSL Proxying
   開鎖(停用狀態)：停用 SSL Proxying
   可在選項欄中依序選擇 Proxy > SSL Proxying Settings... > SSL Proxying
   快捷鍵：command+L
• Stop/Start Throttling:
   灰色(停用狀態)：停止網速節流
   綠色(啟用狀態)：開啟網速節流
   可在選項欄中依序選擇 Proxy > Throttle Settings...
   快捷鍵：command+T
• Disable/Enable Breakpoints:
   灰色(停用狀態)：尚未開啟斷點
   紅色(啟用狀態)：已經開啟斷點
   可在選項欄中依序選擇 Proxy > Breakpoint Settings...
   快捷鍵：command+K
• Compose a new request based on the selection:
   編輯修改選中的請求
• Repeat selected requests:
   重複發送選中的請求
   快捷鍵：command+shift+R
• Validate selected responses:
   檢查驗證選中的請求
• Purchase a License:
   開啟購買使用 Charles 頁面 https://www.charlesproxy.com/buy/
• Tools:
   較常使用的功能選單
• Settings:
   較常使用的設定選單

結尾

因為小弟也是新手使用的分享文
所以介紹的內容可能有遺漏或是錯誤，還請各位大哥大姐提點
小弟將繼續往下週邁進。 ─=≡Σ((( つ•̀ω•́)つ

參考文獻

官方網站 (載點)

• Charles Web Debugging Proxy • HTTP Monitor / HTTP Proxy / HTTPS & SSL Proxy / Reverse Proxy