Charles 是很棒棒的跨平臺代理調(diào)試工具, 能幫助你快速的定位網(wǎng)絡(luò)問題

介紹

Charles 提供了很多很強大的功能, 能滿足很多場景下的調(diào)試需求

1. 查看網(wǎng)絡(luò)請求詳細的 request 和 response

2. 攔截修改 request 和 response

3. Request mapping, remap 網(wǎng)絡(luò)請求的地址

4. Bandwidth Throttling 模擬慢速網(wǎng)絡(luò)

5. 網(wǎng)絡(luò)請求 黑白名單

6. 其它 key feature

安裝

作為一個正經(jīng)的教程, 只能建議你去買官方的 license : Official Charles Website

幸運的是, 我們大天朝人民可以在 Lizhi.io 折扣購買正版 ~

Charles 默認下載后可以永久免費使用試用版, 和正式版相比, 有如下限制 :

1. 啟動需要等待 30s

2. 每 30 分鐘 app 自動關(guān)閉

安裝 Charles 就是拖拽而已, 不解釋

第一次打開 Charles, 他會提示請求設(shè)置系統(tǒng)網(wǎng)絡(luò)代理的權(quán)限, 如果不允許的話, 后面的功能沒法使用

配置

1. HTTP Proxy

打開 Charles 后, macOS proxy 是默認選中的

image

然后打開 http://httpbin.org/image

可以看到網(wǎng)絡(luò)請求像下圖 :

在 Structure 模式 : 網(wǎng)絡(luò)請求按照 host 來組織

image

在 Sequence 模式 : 網(wǎng)絡(luò)請求按執(zhí)行順序排列

image

image

2. 配置 HTTPS

目前, 大部分 App 或者網(wǎng)站都在使用 HTTPS 協(xié)議, 所以需要配置 Charles 支持 HTTPS 請求的代理

Charles SSL proxy feature

1. 開啟 HTTPS proxy 之前 :

   不能看到網(wǎng)絡(luò)請求的 url, 也不能看到詳細的 request 和 response

image

1. 配置好之后 :

   所以的數(shù)據(jù)清晰可見 ~

image

image

1. 選擇 Install Charles Root Certificate , 系統(tǒng) 鑰匙串 會自動打開, 然后輸入密碼信任這個根證書

2. 為某個域名開啟 HTTPS 調(diào)試

image

6 ~

3. iOS & Android

iOS 和 Android 真機, 需要額外安裝一個根證書 ~

image

image

根據(jù)提示, 用Safari 瀏覽器瀏覽chls.pro/ssl, 然后安裝證書

image

iOS 11 以上, 需要額外的操作 : 信任證書

image

安裝完成之后, 需要將真機和電腦連接到同一個 局域網(wǎng)( wifi 信號) 中

1. 和 Mac 連接到同一個 wifi

image

1. 點擊最右邊的 ! 進入高級設(shè)置

image

2. 選擇 配置代理

image

3. 選擇手動, 然后輸入 Mac 的 ip 地址, 和 Charles 代理的端口 (默認是 8888)

4. 可以從 系統(tǒng)設(shè)置 => 網(wǎng)絡(luò) 查看本機的 ip 地址

image

基本操作

1. 過濾網(wǎng)絡(luò)請求

[圖片上傳失敗...(image-99c8ce-1529141512655)]

使用關(guān)鍵詞去 Filter 需要的網(wǎng)絡(luò)請求

2. 模擬慢速網(wǎng)絡(luò)

開啟 Throttle 在 Proxy -> Throttle Settings

image

3. 重復發(fā)送請求

image

重復一次, 或者配置并發(fā)多次請求

4. 黑/白 名單

image

允許或者禁止 制定 host 的請求

高端玩法

1. Map Remote

右鍵點擊某個請求, 啟用 map remote 功能

image

image

這個配置, 將 匹配 https://slack.com/clog/tracks/* 的請求 map 到 https://mywebsite.com/clog/tracks/*

這個功能在需要切換 Production QA Development 環(huán)境時很好用 ~

image

更多的設(shè)置可以在這里看到

2. Map Local

同樣的, 右鍵點擊某個請求, 為某個 request 啟用 Map local 功能

image

現(xiàn)在, 所有匹配https://slack.com/clog/track/* 的請求將會被劫持, 網(wǎng)絡(luò)請求的 response 會是Users/Shawn/Downloads/fake.json 文件中的內(nèi)容

當需要一直修改某個請求的內(nèi)容或者做 Mock server 時很有用 ~

3. 斷點 !

右鍵點擊, 為某個 request 啟用斷點 功能, 或者查看更多的設(shè)置 : Proxy -> Breakpoint Settings

image

現(xiàn)在, 所有匹配Get https://jianshu.com/* 的請求將會被劫持

image

現(xiàn)在 瀏覽 https://jianshu.com, Charles 會自動停在斷點, 并前置當前窗口

可以編輯 request, 修改請求參數(shù), 請求頭, cookie, 或者終止請求等,

隨后點擊 Execute

image

Charles 獲取到服務(wù)端的 response 后, 進入 response 斷點

我們可以查看 response 的詳情, jianshu.com 的 response 應(yīng)該是 HTML 數(shù)據(jù), 然后點擊 Execute 讓整個網(wǎng)絡(luò)請求繼續(xù)執(zhí)行

很秀的功能 ~

P.S.

1. Charles 怎樣實現(xiàn)抓取網(wǎng)絡(luò)請求 ?

man-in-the-middle

中間人攻擊

簡而言之 :

正常的網(wǎng)絡(luò)請求

Charles 中間人攻擊

1. server 代表我們請求的資源, 如 google.com

2. browser 代表我們發(fā)起請求的手機 App 瀏覽器等

3. Local Proxy 是代理工具, 如 Charles Wireshark whistle

主要流程 :

1. Browser 發(fā)送請求

2. Charles 接收請求, 并轉(zhuǎn)發(fā)給真正的 server

3. Charles 接收真正 server 返回的 response, 并轉(zhuǎn)發(fā)給 browser

這樣, Charles 能同時獲得 browser 和 server 發(fā)送和返回的數(shù)據(jù), 也就實現(xiàn)了抓包的功能

流程看起來很簡單, 實際上, HTTPS = HTTP + SSL/TLS, 是一個安全的通信協(xié)議

所以前面繁雜的根證書等配置, 來 hack 這層安全的協(xié)議

2. SSL Pinning

隨便信任未知來源的 證書 是非常危險的操作, 這將允許證書的所有者攔截查看你所有的 HTTPS 請求內(nèi)容

那么, 有什么辦法防止被 MITM 么 ?

1. 在 web 端是沒有辦法避免 MITM 的

2. 在移動端, 比如 facebook 的 iOS App 采用 SSL Pinning 的方式防止 MITM 攻擊

辦法也很簡單, 將服務(wù)端正確的證書打包到 iOS 客戶端 App 中, 每次網(wǎng)絡(luò)連接中, 檢查證書是否一致即可

3. 證書

Charles 的證書是成對的, 如果某臺手機需要在不同的電腦上抓包, 都需要重新配置對應(yīng)的證書 ~

FAQ

1. 無法通過 chls.pro/ssl 安裝證書

嘗試 Save Charles root certificate 到電腦上, 然后登錄 iOS 上自帶的郵件客戶端, 將證書作為附件, 發(fā)送郵件到手機上, 然后使用系統(tǒng)自帶的郵件客戶端, 打開郵件, 點擊附件安裝證書

Ref

• Charles Proxy Tutorial for iOS

• Charles 從入門到精通

• Charles Official SSL Certificates

• SSL Pinning 總結(jié)