Charles on Windows + Android 查看https封包

Capture Android Phone https packet with Charles on Windows

現在https當道,網站有沒有使用https,除了資安的議題以外,連Google搜尋的排名都會被影響

但使用了https,有時候會造成工程師們在開發時debug上的困難
最近也是有這個需求,爬了一下文,看大家都滿推薦Charles的,就花了一些時間研究了一下,寫成這篇文章跟大家分享

如果哪邊有不正確或是可以寫個更好的地方,歡迎不吝嗇告訴我,謝謝

正文開始啦

Charles Intro

Charles是一款跨三大平台的代理服務器,通過成為電腦或者瀏覽器的代理,截取應用程式送出的Request和Response的內容,達到解析封包的效果

這篇文章就是教大家怎麼使用Charles查看https的封包內容

不過Charles本身是付費軟體

免費試用版的話只能試用30天,而且30分鐘沒進行操作Charles會自動關閉
付費版的話,個人用戶是50鎂

同類型的工具還有Fiddler、 Wireshark、 mitmproy等等
下面的連結有對上述3款以及Charles進行簡單的整理,可以參考

需要擷取Android手機上的封包,你需要一台電腦,一台Wi-Fi AP,一台Android手機,而電腦與Android手機需要連到同一台AP才行

更正確地說, 手機和電腦必須是一個網段才可以


Step1.下載&安裝Charles

去官網下載對應平台的Charles,然後安裝
安裝就如同一般的應用,直接按「Next」或是「下一步」,這邊就不贅述了

Step2.付款/註冊/破解(!?)

由於免費版有些限制,覺得好用的朋友可以付費註冊使用
畢竟身為軟體開發者,支持正版才能促進良性循環

但是網路上稀奇古怪的東西這麼多,Google一下,破解版本還是有的…
只能說看大家良心了

Step3.確認Windows的防火牆暢通

在Windows上安裝Charles的時候,應該會出現下面這個詢問視窗(軟體不同,純示意圖)

基本上這邊應該要選「私人網路」接著按下「允許存取」。如果安裝時你勾選的是「公用網路」,由於安全性問題,Windows會把電腦外部想跟Charles建立連線的裝置或是封包擋下來,導致Android裝置無法從外面連入。

為了確保Android裝置能夠順利從連到主機上的Charles,我們要開啟防火牆檢查一下,開啟「控制台」中的「防火牆」(Win10控制台中,好像叫做Windows Denfender防火牆)

※不論你在之前是不是都選擇「私人網路」,都檢查一下比較好,不然到時候連不上又找不出原因就哭了QQ

控制台>防火牆

選擇左邊的「進階設定」

防火牆>進階設定

接著按照步驟讓「 🚫」都變成打勾符號,當然,名稱是Charles的項目前方都沒有🚫就不需要任何操作

  1. 選擇「輸入規則」
  2. 選擇輸入規則中的名稱前面符號是「 🚫」的「Charles.exe」
    (範例圖中只有一個,不過有超過一個就對各項目重複執行流程2~5)
  3. 選擇右邊的「內容」,會出現一個小視窗
  4. 小視窗內選擇「允許連線」
  5. 最後按下確定
setting Windows firewall for Charles

Step4.設定Charles,查看Android手機的http封包

該安裝的都安裝好啦,不過由於Charles預設不會啟用查看https封包的功能,我們先練習將Android手機的封包轉傳給電腦上的Charle,並查看http封包的內容,等到步驟熟悉之後再練習查看https封包。

開啟Charles吧!,Charles打開之後預設就會直接開始紀錄本機上進出的封包,你可以馬上看到你的電腦有哪些封包傳出跟傳入。

簡單講解一下

看到下圖左下方黃色底的網址,這是代表是有封包傳去或是有封包從該網址傳入

可以發現黃色底的https://1-edge-chat.facebook.com前面的icon是一個鎖,代表以https協定傳送,相對的,黃色底網址上面一列的藍色icon就代表是用未加密的http協定傳送

Charles UI intro example

由於等等我只要看Android手機上的封包,所以先不顯示本機端送出/傳入的封包

點選上方選項列的Proxy -> Windows Proxy,你會發現預設是勾選的,點一下該選項就能夠取消紀錄本地端的封包,如果要恢復的話就在點選一次同個選項

接著按左上角的清除按鈕,把現有的紀錄清掉

stop record local packet on windows

然後點選上方選項列的Help -> Local IP Address
Charles會列出正在使用的網卡名稱,以及連線對應所使用的ip
像是我這邊是只有使用無線網卡連著Wi-Fi,ip是192.168.0.12

find local ip address in Charles

找到網卡使用的ip之後,由於封包要轉傳給Charles,我們要知道Charles所建立的Proxy的Port是多少,才能將封包交給他

什麼是Port阿?

假設我們把電腦當作一棟大樓,那麼可以把電腦中的每個應用程式當作是一個人,每個人都住在同一棟大樓裡,不過一個人可能不會只有一戶,根據需求,有的人可能有2,3戶,甚至更多,像是有些人比較有錢,可能就會把整層好幾戶買下來打通之類的。而這邊比較特別的是,每個人都不會出門,都會待在家裡做自己的事情。

那麼今天如果有快遞要送包裹給大樓裡某個人,應該怎麼做呢?,首先,快遞會根據「大樓地址」找到大樓在哪,舉例來說像是「台北市天堂路二段384巷5號」,這邊的「大樓地址」對應到電腦上就是我們所謂的ip,而「包裹」就是被傳送的封包。

不過根據地址找到大樓之後,大樓裡面住了這麼多人,要怎麼把包裹交給正確的收件人呢?,答案也很直接,就是根據包裹上收件人的地址,收件人的地址理論上來說是「大樓地址」+「戶地址」所組成的,延續上面的例子,完整的收件人地址會像是「台北市天堂路二段384巷5號3樓之5」,快遞就能夠根據「3樓之5」這個戶地址來找到正確的收件人,然後把包裹交給他,這邊的「戶地址」對應到電腦中,就是我們所謂的port。

其實上面的例子就是我們一般寄包裹的流程,只是我們把現實生活中的流程跟電腦中的一些專有名詞做對應,讓大家比較好了解

ps.這邊只是以最簡單的例子做比喻告訴大家port的意義是什麼,關於port還有更多更深知識,有興趣的人就去Google一下吧

整理一下

  • 包裹:封包
  • 應用程式:收件者
  • 大樓地址:ip位址
  • 戶地址:port

打完之後發現好長XD,我們言歸正傳

在Charles裡面,我們可以在選項列Proxy->Proxy Setttings設定Proxy的Port號碼,預設應該是8888
除非8888 Port已經被其他應用程式使用了,理論上不需要更改
記下來這組數字即可,等等會用到

find default port in Charles

Step5.設定Android手機,將封包轉送給Charles

首先先到Wi-Fi設定頁面,連上與你使用中的電腦所連線的同個AP(Access Point,簡單來說就是Wi-Fi分享器或是路由器)

由於我是用HTC,就以HTC手機為例囉
長按已經連線的Wi-Fi,然後選擇「修改網路」(左圖)

modify Wifi setting for charles in android phone

接著按照右圖的步驟

  1. 打開進階選項
  2. Proxy:選擇「手動」
  3. Proxy主機名稱:填入上面在Charles Help->Local Address IP中找到的ip位址
  4. Proxy通訊埠:填入上面在Proxy->Proxy Setttings中找到的port號碼
  5. 儲存!

設定完成之後,如果該裝置是第一次連線,Charles會跳出出現對話視窗,詢問你是否要讓某個ip進行連線,按下Allow即可

ps.如果之後要移除該ip的話,可以在Proxy -> Access Control Settings中設定

check connection in Charles

如果沒有出現這對話視窗的話代表有哪邊設定不對,或是防火牆有問題等等…

有個可以試試看方法:在Proxy -> Access Control Settings中加入Android裝置所使用的ip地址

真的不行就只能請大家自己Google了,或是官網也有提供一些問題的解答
最下面的Reference的部分我也有放一些有關解決問題的資源
尤其是投影片後面有幾頁有指出到連不上Charles的可能原因跟怎麼檢查

接著用Android手機隨便瀏覽一些網站,就可以看到在Charles中出現許多記錄啦~

Step6.來吧,https,讓我看看 (android 7.0以下適用)

基本的紀錄&查看http封包流程學會了之後,接著我們要來處理https的封包啦

不過醜話要說在前頭
以下的方法從Android7.0 開始就無法使用了,

原因是Google希望如果你要debug,你就自己看自己apk的封包就好了,不要看到別人的,所以自己安裝憑證的方式似乎不能使用了

SDK 24 以上要用 charles proxy debug 自己的 app 就要在 manifast 中加入 networkSecurityConfig

詳細的解說可以在下方Charles文件連結中找Android 的部份查看,而我手邊目前沒有7.0的裝置,需要試試看在補充給大家

如果你手機的系統是Android 7.0以下,Let’s Go~

在Charles內,透過Man-In-The-Middle攻擊查看https封包內容的功能是預設關閉的,我們要設定一下開啟這功能,

首先,需要在電腦上安裝Charles 的CA 證書
安裝方式很簡單,只要按下Help -> SSL Proxying -> Install Charles Root Certificate

接著會跳出有關該憑證的資訊視窗(左圖),有興趣可以看看(!?),然後按下「安裝憑證」

Windows會開啟憑證匯入精靈(右圖),這邊就跟你平常安裝軟體一樣(!?),使用預設值,一直按下一步,當然設定上有需要可以自己更改,最後沒問題的話,憑證就安裝成功啦

電腦這邊設定好了,那就換設定Android手機啦,手機也需要安裝同一個憑證~

在Android設備上開啟這個網址,下載憑證

這邊一樣是以HTC手機為範例,設定介面應該大同小異~

接著選擇設定->安全性->從儲存裝置安裝

how to install CA with settings UI

找到下載資料夾,選擇charles-proxy-ssl-proxying-certificate.pem這個檔案(左圖),接著輸入憑證名稱(右圖),名稱這邊沒有什麼限制,輸入能清楚辨認用途的名稱即可,或是可以跟我一樣打Charles-SSL-CA

下面的認證使用的部分選擇「VPN及應用程式」
最後按下確定,基本上就完成啦

select CA and install on Android Phone

如果你要確定憑證已經安裝完成了,你可以在設定->從安全性->信任的憑證裏頭找到(左圖),HTC有區分系統跟使用者的憑證,可以輕易在使用者的部分發現剛剛安裝的憑證

另外,手機應該會彈出通知,告知你「網路可能會受到監控」,這邊只是純告知,不用理會這通知哈哈(右圖)

find CA info / network observed notification

好了~憑證都安裝好了,該弄得的都弄好了
不過奇怪!Charles裡面的https紀錄還是看不到封包內容阿

這是因為Charles預設就是不會去解析https的封包給你看啦
如果你想對截取某個網站上的所有https封包,要在網址上點右鍵->Enable SSL Proxying,這樣就可以看到未來透過該網域傳送的封包的內容了

另外可以看到,選擇Enable SSL Proxying之後,下圖紅色框框內的icon就變成原本是http才會出現的icon,代表封包內容在Charles內可以以明碼的方式查看

Step7.Charles進階功能

Charles除了接收跟紀錄封包之外,還擁有更改封包內容、根據關鍵字過濾封包、模擬弱網路環境、進行壓力測試…等等好用的功能

大家可以參考下面的連結,雖然是Mac的介面,不過用相同的方式操作Windows版本的Charles也是沒有問題的,只是介面不一樣,文字內容都是相符的

打完收工~ The End

发表评论

电子邮件地址不会被公开。 必填项已用*标注