Photo by Fiddler.
 
(5-2) 代理 (proxy)、隧道 (tunnel) 與 閘道 (gateway)：
 
使用 TLS (i.e., HTTPS)，
會變成 使用者代理 (User Agent) 與 代理 (proxy) 進行 TLS/SSL handshake，
除非 代理 (prxoy) 也有 TLS/SSL 憑證，且 使用者代理 (User Agent) 信任該憑證，
使用者代理 (User Agent) 無法直接 與 源伺服器 (Origin Server) 建立安全連線。
 

 
 
大多數 流量監控 (Traffic Monitor)，正是使用此原理，
在 使用者代理 (User Agent) 與 源伺服器 (User Agent) 之間，
加入中介 (e.g., Proxy、Gateway)，並讓 User Agent 信任該憑證，
 
如此一來，HTTP 或 HTTPS 訊息內容皆能一覽無遺 !
而此種代理 (proxy)，又稱 除蟲代理 (debugging proxy)。
 
 
本篇將介紹幾種 debugging proxy，無論開發、測試都非常實用!
 

Fiddler

Fiddler 是一老牌的 debuggin proxy，雖標榜全瀏覽器、系統 即平台，
我都只用在 Windows (其他平台需用如 Mono 的跨平台方案)。
 
其 UI/UX 我實在無法喜歡 😐，但:
重點是 免費!
重點是 免費!
重點是 免費!
 
各位就放心到 官網 下載吧 !
 
 

信任憑證

為了讓 User Agent 能與 proxy 建立安全連線 (i.e., HTTPS)，
所有 debugging proxy 的第一步，幾乎都是 — — 信任憑證 (Trust Certificate)。
 
安裝完成，並打開 Fiddler 後，會看到類似的畫面 :

 
 
選擇上方選單 Tools → Telerik Fiddler Options (Telerik 為公司名稱) :

 
 
選取 HTTPS 分頁 → Trust Root Certificate (信任根憑證)，
接著會出現詢問視窗: 若想攔截 HTTPS 流量，就選 YES 吧!

 
 

匯入/出 憑證

然而，每個 使用者代理 (e.g., 瀏覽器) 的信任政策不一，
先隨便連個網站，查看是否正常，否則，需依各自方式設定 (大同小異) :
 
例如，FireFox 並不信任此憑證，而產生 SEC_ERROR_UNKNOWN_ISSUER 錯誤:

 
解法很簡單:

將憑證匯入給 FireFox，並信任它即可!

 
Q: 問題是 憑證 (certificate) 從何而來 ?
 
 
A: 跟 Fiddler 要。
 
 
首先，選取 HTTPS 分頁 → Export Root Certificate to Desktop (匯出根憑證至桌面) :

 
進入 FireFox 的選項頁面 → 進階 → 憑證:

 
檢視憑證清單 → 匯入 → 信任:

 
大功告成 !

 
 

設置代理

既然說是 debugging「proxy」，
連線就得通過此 代理 (proxy)，才能被有效監控。
 

 
大部分應用，都會自動設定完成，所以無需擔心，
然而，若有串接 連接鍊 的需求，則需自行設置，
例如，個人通常依不同用途、規則，串接 4~5 個 proxy。
 

設置 代理 (proxy) 需知道 IP 位址 即 連接埠 (port)。

 
Fiddler 的 IP 位址通常使用 127.0.0.1 的 localhost 即可，
而 埠號 可以從 選項頁面的 Connections 找到 (預設為 8888)。
 
Windows :

 
macOS :

 
 
咦 ? 為何 macOS 不是設置 127.0.0.1 ?
 

127.0.0.1 是 localhost，顧名思義 — — 本地主機，
我使用的 Fiddler 是在 Windows 上，
與 macOS 為不同主機，當然無法使用啦 !

 
若屬相同的網路環境，能以 ipconfig 指令 (windows) 獲取區域 IP:
(macOS 則使用 ifconfig 指令)

 

也能用相同的方式，監控 移動裝置 (e.g., 手機) 喔 !

監控訊息

接著，便能從 Fiddler 主頁面的 會話列表 (Session List)，
選取欲檢測的訊息，並利用右方的 Inspectors (檢測器) 查看訊息內容 !
 
其中，上方是 請求訊息、下方是 回應訊息:

 
要在茫茫訊息海中，找到心儀的對象，是相當不容易的 😱，
可以使用右方的 Filters (過濾器)，設置相關規則，
讓 會話列表 (Session List) 僅顯示感興趣的目標 !
 
 

檢視

Fiddler 提供了多種的 訊息 檢視 (view) 方式，相當方便 !
以 Raw 為例， 是指 Fiddler 「接收」的 原始訊息 (Raw Message)，
可以看到 請求目標 為 絕對形式 (absolute-form) :

 
 
不同於 Raw，Headers 檢視，是 Fiddler 「發送」的訊息表頭，
可以看到 請求目標 已轉為 原始形式 (origin-form) :

 
 
Fiddler 還有許多功能，如 請求/回應 攔截 (intercept)，
礙於篇幅，就不多做介紹啦，交給各位餵狗囉 😄 。
 

Charles

 
Charles，俗稱花瓶，
是令一輕量的 debuggin proxy，也支援全平台，
在 macOS 上，我使用它來處理所有簡易訊息。
 
介面清爽、簡單，個人相當喜歡 😀，可惜:
並非 免費!
並非 免費!
並非 免費!
 
各位可到 官網 下載試用 !
 
 

信任憑證

debugging proxy 幾乎都大同小異，
第一步，幾乎都是 — — 信任憑證 (Trust Certificate)。
 
安裝完成後，可能出現以下詢問 (安裝 add-on)，可自行選擇:

 
 
進入主畫面後，可以切換左上角的 Structure 與 Sequence 分頁，選個喜歡的瀏覽方式，
中間的 Filter (過濾器) 輸入框，能簡易的塞選訊息:

 
 
選擇上方選單 Help → SSL Proxing → Install Charles Certificate (安裝 Charles 憑證)

 
 
開始安裝:

 
 
自訂存放區:

 
 
確認警告:

 
 

匯入/出 憑證

老樣子，先隨便連個網站，查看是否正常，
否則，需依各 使用者代理 方式設定:
 
咦 !? 成功了 !?

 
 

 
注意:

Charles 預設是 盲中繼 (blind relay) — — 隧道，
純轉發 HTTPS 訊息，而不進行 TLS 交握。

 
因此，選擇上方 Proxy 選單 → SSL Proxing Settings :

 
 
並設置欲使用 SSL Proxy 的 主機，
這裡使用「*」，代表 所有 SSL/TLS 都進行代理，
並設置 HTTPS 的埠號 443 :

 
 
設完後，重新整理頁面，便可能看到錯誤畫面:

 
 

別怕，與上方的 Firefox 設置方式如出一轍。

 
首先匯出憑證:

 
 
記得，取個名字:

 
 
進入 Chrome 的設定 → 進階 → 管理憑證 → 匯入憑證:

 
 
別忘記選擇「受信任 的根憑證」喔 !

 
 
準備將訊息抽絲剝繭吧 😈!
 
 

設置代理 — iPhone

上方介紹了，以 區域 IP 監控跨主機訊息。
這邊示範，如何以相同的方式監控 iPhone !
(Android 手機，也大同小異喔 🤓)
 
首先，將 電腦 與 iPhone 連線至 相同的網路環境 (e.g., Wifi)。
接著利用 ipconfig/ifconfig 指令 或 網路設定頁面 (macOS) 取得主機 IP:

 
 
進入 iPhone 的 Wifi 設定，
選擇 i 進入進階選項，並設置主機的 IP 位址 與 埠號 (預設 8888) :

 
 

Per-host Certificate

接著，用 iPhone 連線到各網站，皆會出現以下警告 :

 
 
你可以選擇 詳細資訊 → 信任:

 
 
然而:

每換一個網域，你就得重新信任一次…

 
這種憑證，稱為 Per-host，會根據不同 Host 派發，
因此，直接信任所有 Per-host 的老爸 — — 根憑證 (Root Certificate) 才是良策。
 
 
(iPhone) 打開瀏覽器，輸入 chls.pro/ssl 即能下載根憑證:

 
 
選擇右上角方的「安裝」，即大功告成 !

 
 

監控訊息

如此，便能同時監控 電腦 與 移動裝置 (iPhone) HTTPs 流量 !

 
另外…，許多遊戲的排名、數值，也都能靠這招破解 😂，
大家可以嘗試看看 (咦? 😳:

(低調..)
 
 

取消代理

以 macOS 為例，
開啟 Charles 時，預設為自動進行代理設置，
正常來說，關閉 Charles 時，也會自動取消代理設置:

 

然而，一個例外是: iPhone USB

 
若 mac 以 iPhone USB 的方式上網，
設定選項中，並 沒有 提供 代理設定，將面臨無法關閉的問題，
造成沒打開 Charles 便無法上網 !
 
解決方式是 使用 終端機 (Terminal) 下指令，直接關閉對應介面的代理狀態:

networksetup -setwebproxystate "iPhone USB" off
networksetup -setsecurewebproxystate "iPhone USB" off

 
當然，其他介面也能以同樣方式 開啟/關閉:

networksetup -setwebproxystate "Thunderbolt Ethernet" off
networksetup -setsecurewebproxystate "Thunderbolt Ethernet" off

 
 
我怎麼知道介面名稱?

networksetup -listallnetworkservices

 
 
Debugging proxy 是監控 HTTP(s) 流量最常見的方式，但 不是唯一，
有捕捉網路介面的 封包分析神器 — — Wireshark，
另外，也有更強大的 debugging proxy — — Burp Suite，
但它們做為 HTTP Monitor 皆殺雞用牛刀了，暫不介紹。
 
而 Charles 同樣支援 訊息攔截、反向代理、自動請求…等功能，輕巧且實用，
若經濟能力允許，可以找朋友團購喔 !