端上日志看不到？用Charles這樣抓包也太爽了吧！
我們選擇Charles來(lái)作為抓包工具，本文將從0到1講解從電腦端抓包到手機(jī)端抓包。
Charles是一款被廣泛使用的網(wǎng)絡(luò)抓包工具，它可以用來(lái)監(jiān)控和調(diào)試通過(guò)HTTP和HTTPS協(xié)議發(fā)送和接收的所有網(wǎng)絡(luò)請(qǐng)求和響應(yīng)。Charles通常用于網(wǎng)頁(yè)和網(wǎng)絡(luò)應(yīng)用的開(kāi)發(fā)過(guò)程中，幫助開(kāi)發(fā)人員理解他們的應(yīng)用是如何與互聯(lián)網(wǎng)通信的，以及調(diào)試網(wǎng)絡(luò)相關(guān)的問(wèn)題。
以下是Charles的一些核心特點(diǎn)和功能：
- 流量截獲： Charles能夠截獲計(jì)算機(jī)上的所有HTTP和HTTPS網(wǎng)絡(luò)流量，包括請(qǐng)求和響應(yīng)。這使得開(kāi)發(fā)人員能夠檢查他們的應(yīng)用在網(wǎng)絡(luò)上傳輸?shù)臄?shù)據(jù)。
- 流量記錄： 所有通過(guò)Charles的流量都會(huì)被記錄下來(lái)，以便以后的查看和分析。
- SSL代理： Charles可以作為SSL代理服務(wù)器來(lái)解密HTTPS流量，這讓開(kāi)發(fā)人員能夠檢查加密的通信內(nèi)容。
- 帶寬限制： 可以模擬慢速網(wǎng)絡(luò)連接，以測(cè)試應(yīng)用在不同帶寬限制下的表現(xiàn)。
- 重放和編輯請(qǐng)求： 不僅可以查看網(wǎng)絡(luò)請(qǐng)求和響應(yīng)，還可以修改它們，然后發(fā)送到服務(wù)器以測(cè)試不同的情境。
- 斷點(diǎn)調(diào)試： Charles可以作為一個(gè)中間人攔截請(qǐng)求或響應(yīng)，允許開(kāi)發(fā)人員在這些數(shù)據(jù)到達(dá)服務(wù)器或返回到客戶(hù)端之前進(jìn)行查看和修改。
- 映射本地文件： 將網(wǎng)絡(luò)請(qǐng)求重定向到本地文件，這可以加速前端開(kāi)發(fā)，并不需要每次都從服務(wù)器獲取文件。
- 集成的Sniffer： Charles具備自動(dòng)配置瀏覽器的能力，并能捕獲來(lái)自手機(jī)應(yīng)用或其他使用網(wǎng)絡(luò)的軟件的流量。
- 跨平臺(tái)支持： Charles提供Windows、MacOS和Linux平臺(tái)的版本。
安裝
官網(wǎng)下載：https://www.charlesproxy.com/download/
從官網(wǎng)下載對(duì)應(yīng)系統(tǒng)的 Charles 最新版本，雙擊下載的安裝包，一路默認(rèn)安裝，安裝完成會(huì)在桌面生成類(lèi)似花瓶的圖標(biāo)。
接下來(lái)就進(jìn)入到Charles中，然后做一些最基本的配置。
在自己電腦上抓包很簡(jiǎn)單，在proxy中打開(kāi)macOs代理就可以抓到本機(jī)上所有的包了。
圖片
然后在電腦上訪問(wèn)一下掘金的首頁(yè)，就會(huì)抓到所有的接口：
圖片
這里我已經(jīng)提前在電腦上裝了Charles的證書(shū)，否則https的接口是抓不了的，我們來(lái)配置一下電腦上的證書(shū)：
圖片
然后會(huì)自動(dòng)打開(kāi)Mac上的鑰匙串訪問(wèn)，我們將這個(gè)證書(shū)設(shè)置為始終信任，否則走代理是拉不到https的數(shù)據(jù)的。
圖片
到這里電腦端的抓包就OK了。
但是我們的應(yīng)用場(chǎng)景大部分是在手機(jī)端上，因?yàn)殡娔X上可以直接在控制臺(tái)去看日志，而在App、小程序如果沒(méi)有后臺(tái)監(jiān)控是無(wú)法抓到接口的信息的，接下來(lái)我們配置一下。
要想手機(jī)上抓包，我們先把macoc proxy選項(xiàng)勾掉，這樣電腦上就不會(huì)進(jìn)入到Charles的抓包記錄中了。
然后在SSL Proxying Settings中配置手機(jī)上想要抓包的訪問(wèn)域名和端口，這里域名直接設(shè)置*，端口設(shè)置443，抓https的包。
圖片
然后在Proxying Settings中配置電腦端代理的地址和端口，用于手機(jī)連接。
圖片
接下來(lái)打開(kāi)手機(jī)，我的是IOS，連接到和電腦端同一個(gè)wifi，然后開(kāi)啟代理，代理的服務(wù)器地址和端口就是上面配置的地址和端口，就像這樣：
圖片
至此電腦和手機(jī)已經(jīng)關(guān)聯(lián)上了，訪問(wèn)的是同一個(gè)局域網(wǎng)，Charles上也可以抓到手機(jī)訪問(wèn)的接口了，但是沒(méi)有數(shù)據(jù)，這是因?yàn)槭謾C(jī)上也需要配置Charles安全證書(shū)。
圖片
點(diǎn)擊以后手機(jī)上會(huì)有安裝的提示，IOS比較特殊，高版本的情況在安裝以后還需要在設(shè)置中信任一下證書(shū)才可以生效。
圖片
至此所有配置就都搞定了，你可以試試手機(jī)訪問(wèn)網(wǎng)頁(yè)，看看Charles，如果有異常的話，可以嘗試重啟手機(jī)和Charles，在手機(jī)端打開(kāi)掘金App，抓到的包如下：
圖片
到這里就都搞定了，我們進(jìn)入淘寶里看看：
圖片
到這一步，你想抓端上哪個(gè)應(yīng)用的數(shù)據(jù)就都可以搞定了，如果上面的配置走完還是不行，嘗試一下以下排查方案。
- 證書(shū)問(wèn)題：
證書(shū)未被客戶(hù)端信任：確保服務(wù)器使用的證書(shū)是由一個(gè)客戶(hù)端信任的證書(shū)頒發(fā)機(jī)構(gòu)（CA）簽發(fā)的。
證書(shū)已過(guò)期：檢查證書(shū)的有效日期，確保它是當(dāng)前有效的。
錯(cuò)誤的證書(shū)名稱(chēng)：證書(shū)上的名稱(chēng)需要和服務(wù)器的域名一致，否則客戶(hù)端將無(wú)法驗(yàn)證服務(wù)器的身份。
- 中間證書(shū)缺失：
服務(wù)器需要發(fā)送完整的證書(shū)鏈，包括所有的中間證書(shū)。如果有缺失，客戶(hù)端可能無(wú)法建立信任鏈。
客戶(hù)端不支持服務(wù)器的加密算法：
確保服務(wù)器的加密設(shè)置和客戶(hù)端支持的算法兼容。在某些情況下，舊的或不安全的加密方法可能已被客戶(hù)端禁用。
配置錯(cuò)誤：
服務(wù)器的SSL/TLS配置可能存在錯(cuò)誤，需要仔細(xì)檢查SSL/TLS服務(wù)器配置。
SNI 問(wèn)題（Server Name Indication）：
如果服務(wù)器上托管了多個(gè)域，并且使用了基于SNI的擴(kuò)展，確?？蛻?hù)端請(qǐng)求中包含了正確的服務(wù)器名稱(chēng)。
客戶(hù)端問(wèn)題：
客戶(hù)端操作系統(tǒng)或應(yīng)用程序可能受到了限制或配置不正確，無(wú)法處理當(dāng)前的SSL/TLS連接請(qǐng)求。
