透過 Charles Proxy 工具,查看 SSL 連線的 Request 與 Response 資料

軟體測試中,會檢查 Client 呼叫的 API 是否有正確的運作,包括驗證 Client 是否有正確送出請求 (Request) 及 Server 是否有正確回應 (Response)。

我們可透過 Charles Proxy 軟體監看網路連線,但如果要監看的連線是走 SSL 加密連線,就無法查看該連線的內容,會出現 <unknown>,如下圖所示。

螢幕快照 2015-05-24 下午2.55.36
Tip Charles 安裝與設置可參考這篇文章 (點選),本教學安裝版本 v 3.10.1,作業系統 Mac OS X 10.10。

如要查看 SSL 加密連線的內容,需要調整 Charles 的 SSL Proxying 設定,設定步驟如下:

Step 1: 

點選「Proxy」>「SSL Proxying Settings…」,開啟後勾選「Enable SSL Proxying」選項,接著按下「Add」按鈕新增位址,接著在 Host 與 Port 欄位均輸入 * 監看所有 SSL 加密連線傳輸的資料,如下圖所示。

螢幕快照 2015-05-24 下午3.07.55

設定 SSL Proxying 完後,按下「OK」按鈕完成設定,如下圖所示。

螢幕快照 2015-05-18 下午5.41.52

 

Step 2:

接著要在手機內安裝 SSL 憑證,需至 Charles 官網中下載 SSL 憑證,手機開啟瀏覽器,前往 http://www.charlesproxy.com/getssl 網址,開啟網址後,會要求安裝描述檔,如下圖所示。

Screen Shot 2015-05-24 at 下午2.52.17

以上步驟設定完後,就可以查看 SSL 連線的資料。我們以 Yahoo 氣象 App當範例來說明,當更新氣象資訊時,會呼叫 yql 這支 API,如下圖所示。

螢幕快照 2015-05-24 下午2.57.28

我們就可選 yql 這支 API 查看送出的請求資料給 Server,如下圖所示。

螢幕快照 2015-05-24 下午2.58.21

以及 Server 回應什麼資料給 Client,如下圖所示。

螢幕快照 2015-05-24 下午2.58.39

 

Tip 如讀者是使用 Android 設備,設定的方式與 iOS 設備大同小異。

 

參考文章:SSL Certificates • Charles Web Debugging Proxy

廣告

發表迴響

Please log in using one of these methods to post your comment:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s