Charles on Windows + Android 查看https封包
現在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的項目前方都沒有🚫就不需要任何操作
- 選擇「輸入規則」
- 選擇輸入規則中的名稱前面符號是「 🚫」的「Charles.exe」
(範例圖中只有一個，不過有超過一個就對各項目重複執行流程2~5) - 選擇右邊的「內容」，會出現一個小視窗
- 小視窗內選擇「允許連線」
- 最後按下確定
Step4.設定Charles，查看Android手機的http封包
該安裝的都安裝好啦，不過由於Charles預設不會啟用查看https封包的功能，我們先練習將Android手機的封包轉傳給電腦上的Charle，並查看http封包的內容，等到步驟熟悉之後再練習查看https封包。
開啟Charles吧!，Charles打開之後預設就會直接開始紀錄本機上進出的封包，你可以馬上看到你的電腦有哪些封包傳出跟傳入。
簡單講解一下
看到下圖左下方黃色底的網址，這是代表是有封包傳去或是有封包從該網址傳入
可以發現黃色底的https://1-edge-chat.facebook.com前面的icon是一個鎖，代表以https協定傳送，相對的，黃色底網址上面一列的藍色icon就代表是用未加密的http協定傳送
由於等等我只要看Android手機上的封包，所以先不顯示本機端送出/傳入的封包
點選上方選項列的Proxy -> Windows Proxy，你會發現預設是勾選的，點一下該選項就能夠取消紀錄本地端的封包，如果要恢復的話就在點選一次同個選項
接著按左上角的清除按鈕，把現有的紀錄清掉
然後點選上方選項列的Help -> Local IP Address
Charles會列出正在使用的網卡名稱，以及連線對應所使用的ip
像是我這邊是只有使用無線網卡連著Wi-Fi，ip是192.168.0.12
找到網卡使用的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已經被其他應用程式使用了，理論上不需要更改
記下來這組數字即可，等等會用到
Step5.設定Android手機，將封包轉送給Charles
首先先到Wi-Fi設定頁面，連上與你使用中的電腦所連線的同個AP(Access Point，簡單來說就是Wi-Fi分享器或是路由器)
由於我是用HTC，就以HTC手機為例囉
長按已經連線的Wi-Fi，然後選擇「修改網路」(左圖)
接著按照右圖的步驟
- 打開進階選項
- Proxy：選擇「手動」
- Proxy主機名稱：填入上面在Charles Help->Local Address IP中找到的ip位址
- Proxy通訊埠：填入上面在Proxy->Proxy Setttings中找到的port號碼
- 儲存!
設定完成之後，如果該裝置是第一次連線，Charles會跳出出現對話視窗，詢問你是否要讓某個ip進行連線，按下Allow即可
ps.如果之後要移除該ip的話，可以在Proxy -> Access Control Settings中設定
如果沒有出現這對話視窗的話代表有哪邊設定不對，或是防火牆有問題等等…
有個可以試試看方法：在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手機為範例，設定介面應該大同小異~
接著選擇設定->安全性->從儲存裝置安裝
找到下載資料夾，選擇charles-proxy-ssl-proxying-certificate.pem這個檔案(左圖)，接著輸入憑證名稱(右圖)，名稱這邊沒有什麼限制，輸入能清楚辨認用途的名稱即可，或是可以跟我一樣打Charles-SSL-CA
下面的認證使用的部分選擇「VPN及應用程式」
最後按下確定，基本上就完成啦
如果你要確定憑證已經安裝完成了，你可以在設定->從安全性->信任的憑證裏頭找到(左圖)，HTC有區分系統跟使用者的憑證，可以輕易在使用者的部分發現剛剛安裝的憑證
另外，手機應該會彈出通知，告知你「網路可能會受到監控」，這邊只是純告知，不用理會這通知哈哈(右圖)
好了~憑證都安裝好了，該弄得的都弄好了
不過奇怪!Charles裡面的https紀錄還是看不到封包內容阿
這是因為Charles預設就是不會去解析https的封包給你看啦
如果你想對截取某個網站上的所有https封包，要在網址上點右鍵->Enable SSL Proxying，這樣就可以看到未來透過該網域傳送的封包的內容了
另外可以看到，選擇Enable SSL Proxying之後，下圖紅色框框內的icon就變成原本是http才會出現的icon，代表封包內容在Charles內可以以明碼的方式查看
Step7.Charles進階功能
Charles除了接收跟紀錄封包之外，還擁有更改封包內容、根據關鍵字過濾封包、模擬弱網路環境、進行壓力測試...等等好用的功能
大家可以參考下面的連結，雖然是Mac的介面，不過用相同的方式操作Windows版本的Charles也是沒有問題的，只是介面不一樣，文字內容都是相符的
打完收工~ The End
同場加映
既然https別人也看的到，那....怎麼辦呢???
Reference
Slide：
Windows版本教學：
Mac版本教學：
Charles問題解決：
