轉載地址:https://www.jianshu.com/p/831c0114179f
簡介
Charles其實是一款代理服務器,通過成為電腦或者瀏覽器的代理,然后截取請求和請求結果達到分析抓包的目的。該軟件是用Java寫的,能夠在Windows,Mac,Linux上使用,安裝Charles的時候要先裝好Java環境。
Charles是在 常用的網絡封包截取工具,在做移動開發時,我們為了調試與服務器端的網絡通訊協議,常常需要截取網絡封包來分析。Charles 通過將自己設置成系統的網絡訪問代理服務器,使得所有的網絡訪問請求都通過它來完成,從而實現了網絡封包的截取和分析。除了在做移動開發中調試端口外,Charles 也可以用於分析第三方應用的通訊協議。配合 Charles 的 SSL 功能,Charles 還可以分析 HTTP協議。
Charles 是收費軟件,可以免費試用 30 天。試用期過后,未付費的用戶仍然可以繼續使用,但是每次使用時間不能超過 30 分鍾,並且啟動時將會有 10 秒種的延時。因此,該付費方案對廣大用戶還是相當友好的,即使你長期不付費,也能使用完整的軟件功能。只是當你需要長時間進行封包調試時,會因為 Charles 強制關閉而遇到影響。(可以自行網上查找破解版軟件)
Charles 主要的功能包括:
截取 Http 和 Https 網絡封包。
支持重發網絡請求,方便后端調試。
支持修改網絡請求參數。
支持網絡請求的截獲並動態修改。
支持模擬慢速網絡。
1. Charles安裝
前提先安裝配置好Java環境,官網下載安裝Charles:https://www.charlesproxy.com/download/
2. HTTP抓包
(1)查看電腦IP地址
方法一: 打開”運行”(快捷鍵:win+R鍵;或者在任務欄的”搜索”按鈕中查找並點擊”運行”),輸入“cmd”后進入命令行窗口,在命令行窗口中輸入”ipconfig”命令查看IP
方法二: 在charles中查看 :Help -> Local IP Address
(2)Charles代理設置
接下來打開Charles的代理設置:Proxy->Proxy Settings,設置一下端口號,默認的是8888,這個只要不和其他程序的沖突即可,並且勾選Enable transparent HTTP proxying。

(3)在手機設備、模擬器或者遠程瀏覽器上設置代理,抓取手機設備上的請求包(手機和電腦必須在同一個局域網內,並關閉電腦防火牆、其他代理或者翻牆軟件)
第一步:在手機wifi 上設置代理 -> 長按無線網絡-->修改網絡-->高級選項-->代理 手動-->手動輸入輸入IP、端口號
服務器IP:PC機器的IP(通過之前介紹的查看IP的方法)
端口號:8888(通過之前介紹的查看端口的方法)

第二步:Charles彈出詢問“allow”或者“deny”,點擊“allow”按鈕允許;出現手機的HTTP請求列表

安裝證書
第三步:抓取https數據需要在手機上安裝證書,HTTPS的抓包需要在HTTP抓包基礎上再進行設置
如果我們需要在iOS或Android機器上截取 Https 協議的通訊內容,還需要在手機上安裝相應的證書。
設置前抓包HTTPS接口顯示unknown(圖左),設置后接口正常展示,如下圖右

如果你發現返回的是亂碼,首先看是在http請求還是https請求,如果是http請求,那么應該就是返回來的中文亂碼,解決方案是找到該軟件顯示包內容,Contents目錄下的info.plist,打開文件找到vmoption,添加-Dfile.encoding=UTF-8即可。
如果是https請求出現的亂碼,如下圖這種情況

這時候你就需要安裝Charles的CA證書了
以下為在HTTP抓包基礎上進行HTTP抓包的進一步設置步驟:
Help -> SSL proxying -> Install charles root certificate on a Mobile Device or remote browser…
出現彈窗得到地址chls.pro/ssl
在手機自帶的系統瀏覽器輸入地址chls.pro/ssl,出現證書安裝頁面,點擊安裝,手機設置有密碼的輸入密碼進行安裝。安裝完證書后,就可以截取手機上的 Https 通訊內容了。不過同樣需要注意,默認情況下 Charles 並不做截取,你還需要在要截取的網絡請求上右擊,選擇 SSL proxy 菜單項。
注意2:iOS 10.3系統,需要在設置→通用→關於本機→證書信任設置里面啟用完全信任Charles證書

Charles設置Proxy代理
Proxy -> SSL Proxying Settings... 勾選Enable SSL Proxying,點擊Add,點擊Add,Host設置要抓取的https接口,
Host : * (使用通配符表示檢測所有網絡請求;建議還是設置單個需要抓取的https host,盡量避免使用 * 通配符)
Port:443

比如想抓這個,Host填寫:https://api.weibo.cnPort填寫:443

!!!完成以上操作,就完成Charles抓取HTTP(S)數據包的所有配置了。查看Charles,我們可以看到數據包的內容了。
Charles 主界面介紹
主要是會話的兩種視圖模式以及對應的 requet/response 面板組成:


Structure:樹狀結構顯示,將網絡請求按訪問的域名分類;
Sequence:水平結構顯示,將網絡請求按訪問的時間排序
Structure視圖模式下,列表會按照域名來歸類所有請求,而Sequence視圖則是按照請求發生的順序來展示;如果不習慣Sequence默認的上下視圖,可以修改為類似Fiddler的左右視圖模式(有更符合眼睛的習慣):快捷鍵 cmd+,->Charles Preferences->Viewers選擇Sequence view layout為Tall即可;
常用的功能在圖上已經有注釋,不多說,感覺Chales的右鍵功能比Fiddler多一點,簡單看幾個:
Save response: 保存response數據到文件中,方便后面用於重定向功能map local...;選擇多條記錄后再右鍵就會有Save All...可以方便的把所有response信息一次性導出到某個目錄中,然后通過map local...結合通配符來批量重定向請求;
Export: 可以將選中的多個會話信息完整導出成文件(*.chls),通過File - import來導入chls文件,方便不同開發人員進行調試或者現象復現分析;
repeat advanced...: 可以重發次數以及並發數,用於進行簡單的服務器壓測,看到有些簡友還用它來對付一般的釣魚網站,有點意思..

Filter : 過濾,可以輸入關鍵字來快速篩選出 URL 中帶指定關鍵字的網絡請求
Overview : 查看這次請求的詳細內容,例如耗時詳細列車了請求開始時間、結束時間,響應開始時間、結束時間,總耗時、DNS耗時、網絡延時等。
對於Size也詳細列出了請求頭大小、響應頭大小、壓縮比例等內容。
URL:進行網絡請求的鏈接;
Status:當前狀態,complete表示請求完成;
Responce Code:返回碼。不同的接口,不同的請求結果,返回碼都不同;
Protocol:使用的協議;
Method:請求方式,如GET請求,POST請求等;
Kept Alive:判斷當前是否正在鏈接(活躍);
Content-Type:發送的內容類型,如這里用的是XML文本,以UTF8的方式發送;
Client Address:客戶端的IP地址;
Remote Address:遠程服務器的IP;
Timing:
Request Start Time:請求開始的時間;
Request End Time:請求結束的時間;
Response Start Time:返回開始的時間;
Response End Time : 返回結束的時間;
Duration : 總時間;
Size:
Request Header :請求的頭部大小;
Response Header:返回的頭部大小;
Request : 請求發送的大小;
Response:返回數據的大小;
Total:所有數據大小;
Request Compression : 請求壓縮;
Response Compression : 返回壓縮;
Request : 查看請求內容(底下的Headers,Query String,Cookies,Raw。)
Headers:發送請求的頭部信息;
Query String : 發送參數列表;
Cookies: 瀏覽器緩存;
Raw:發送的原生數據,包括了頭部和參數;
Reponse : 查看響應內容
Headers:是返回的頭部信息;
Text:返回信息(除去頭部)后的文本;
Hex:返回信息的16進制表示;
XML:我返回的數據是XML。如果你返回的是JSON,這里就會顯示JSON;
XML Text:如果你返回JSON,這里會顯示JSON Text;
Raw:返回的所有原生數據,包括頭部;
Summary: 查看發送數據的一些簡要信息(主機,狀態碼,數據的類型,header和body大下,加載時間,總時間)
Chart: Summary中簡要信息以圖表形式展示
Notes: 其他信息
菜單
Proxy 菜單
這個用得比較多,在這里設置跟蹤捕捉過濾功能:

過濾( Recording Settings )

設置會話捕捉條件,include 面板用於啟用/停止可以捕捉/顯示的會話;
exclude 表示不顯示的會話,在會話列表中右鍵選擇 ignore 時,對應的url會出現在這里;

比較好用的是過濾條件支持通配符,*表示任意多個字符,?表示一個字符,如Protocol中有http,https和 "",選擇空白或者輸入*都可以表示任意協議的請求;
也可以通過主界面底部的Filter來簡單設置過濾條件,不支持通配符

還有一種方法就是在一個網址上右擊,選擇Focus,然后其他的請求就會被放到一個叫Other Host的文件夾里面,這樣也達到了過濾的目的。
設置允許連接的ip地址(Access control Settings)

模擬網絡環境(Throttle Settings)

在這里選擇要模擬的網絡環境,選項比Fidder多很多,也可以自定義,最人性的還可以對指定的url進行網絡環境摸, 好評...
這里設置完成后通過Proxy-Start Throttling(Ctrl+T)或者常用工具欄按鈕來啟用或停止;
設置為代理服務器,並捕獲手機請求(Proxy Settings)

端口號 Port 默認8888,跟Fiddler一樣,省得切換軟件的時候,手機還得重新設置wifi代理了;
記得啟用Enable transtarent HTTP proxying
手機上的設置跟Fiddler類似,切換到wifi設置頁面,選擇高級選項-->代理模式選擇手動,代理服務器設置為 Charles 所在設備的ip,端口就是上面設定的8888, 注意: 手機和Charles所在機器需處於同一個wifi網絡中;
以上設定完成后,就可以charles中捕獲手機請求了,第一次連接的時候charles會彈出確認提示框,選擇 allow 就好了,后續可在 proxy -> access control settings 中進行管理:

Tools菜單

rewrite 動態修改 request/response 信息
跟map local類似,也可以對response進行修改,不過他改變的只是部份信息,比如:主機地址(Host),返回狀態碼(response status),返回信息內容(body)等:

捕獲https請求
1. 在本機上安裝證書

這里可以直接選擇Install charles root certificate,會在本機上安裝證書,也可以如圖選擇保存證書,然后手動導入到需要的位置,操作類似:

mac上的操作請看這篇
2. 在手機上安裝證書
單擊help--ssl proxying-install charles root certificate on a mobile device or remote browser,會彈出提示框,然后在手機瀏覽器上輸入網址:chls.pro/ssl,然后根據提示保存證書即可:

3. 啟用https捕捉

啟用后就可以在會話視圖列表中看到https請求了;
4.斷點功能
方法:
在會話列表中右鍵點擊某個會話,然后在菜單中選擇Breakpoints;
通過Proxy-Breakpoint settings...中手動新建/啟用某個斷點;
要求勾選enable breakpoints
之后當下次再有該請求時,會自動進入斷點模式;
一個完整請求會進入斷點模式2次:
request的發出之前;
收到服務器的response但尚未返回給客戶端的時候;
斷點request的時候,可以修改request信息,不過我們程序都有對請求header做校驗和處理,修改參數后一般就直接報錯了,所以這里看看response就好,反正操作類似:

breakpoint
在edit response中可以雙擊直接修改json文件的key/value值,很方便,修改完成后單擊execute繼續執行其他操作,將修改后的response返回給客戶端;
response 重定向功能
這個跟Fiddler的autoResponse功能類似,可以指定本地文件(map local...)也可以指定為其他服務器(map remote...)上的文件,我們介紹前一種;
這里的map local只能重定向response的數據內容部分,而headers
還是會保留服務器返回的,比如要修改返回碼之類的操作,目前來看,只能通過斷點或者rewrite來進行,這一點比Filder弱,不太方便,也可能是我還沒發現怎么處理,有知道的請不吝告知,謝謝;
斷點可以用於臨時修改數據,也是一種重定向功能,若是要長期重定向,咱還是將返回重定向到本機文件比較方便,具體方法:
准備一份要返回給客戶端的 response 數據文件,可以從前面介紹的save Response來保存正常數據,然后修改,也可以自己構造一份(用於服務端api尚未發布,但移動端又需要進行調試的時候);
右鍵單擊某個請求,從菜單中選擇map local ..., 也可以單擊Tools-Map Local...打開map lcoal settings來添加一個映射關系,兩種操作是一樣的,前者只不過直接把url信息給寫好了:

完成設定后,后續符合條件的請求都會用本地映射文件替代;
最后: 我之前在Windows下是 Fiddler 和 Charles 配合使用,主要是 Fiddler 的https抓包一直出問題,而 Charles 就很一切正常,后來更換mbp后就一直用 Charles 了,不過Charles也有自己的不足:
刪除多個會話時會感覺得到卡,而Fiddler很順暢;
filter功能沒Fiddler強大;
Fiddler提供腳本自定義功能,如果是C#開發者的話,還可以很方便的集成fiddler_core到自己的應用中;
常見問題解決
1 . 手機無法抓包的問題
檢查是否配置好代理IP,端口號
檢查是否與電腦在同一個局域網
檢查是否關閉防火牆,代理,翻牆軟件
彈出詢問點擊“allow”或者“deny”時,誤點“deny”,關閉charles重啟,手機再次瀏覽則會重新彈出詢問
2 . 解決request和response信息中的中文亂碼問題。
方法一 :修改charles windows版本安裝目錄下也有一個Charles.ini的配置文件
原配置文件

修改后的配置文件 增加vmarg.3參數,並設置編碼格式為UTF-8

方法二 : Tools -> Rewrite… -> Rules -> Add –>配置信息
選中 Request 和 Response
Match
Name : Content-Type
Value : application/x-zip
Replace
Name : Content-Type
Value : application/json;charset=UTF-8
選中 Replace All

–》點擊OK,完成配置。
!!!通過以上方法就可以解決Request和Response的中文亂碼問題了。
3 . 本地映射配置錯了,刪除錯誤的映射
Tools -> Map Local… -> 選中需要刪除的映射 -> Remove -> OK

注意:不抓包請關閉手機HTTP代理,否則斷開與電腦連接后會連不上網