前言
Charles 其實是一款代理服務器,通過成為電腦或者瀏覽器的代理,然后截取請求和請求結果達到分析抓包的目的。其次該軟件是用 Java 寫的,能夠在 Windows,Mac,Linux 上使用。
什么是抓包?
抓包(packet capture)就是將網絡傳輸發送與接收的數據包進行截獲、重發、編輯、轉存等操作,也用來檢查網絡安全。抓包也經常被用來進行數據截取等。
Charles 主要功能
- 支持 SSL 代理。可以截取分析 SSL 的請求。
- 支持流量控制。可以模擬慢速網絡以及等待時間(latency)較長的請求。
- 支持重發網絡請求,方便后端調試。
- 支持修改網絡請求參數。
- 支持網絡請求的截獲並動態修改。
PS:Charles 是收費軟件,可以免費試用 30 天。試用期過后,未付費的用戶仍然可以繼續使用,但是每次使用時間不能超過 30 分鍾,並且啟動時將會有 10 秒種的延時。
開始抓包
默認,他會把電腦設置為代理,這樣你會發現,你通過瀏覽器請求到網址都會出現在這里。
通常點擊某一個網址后,你會發現右邊會出現這個網址請求的大概信息,點擊具體的請求后會出現 request 和 response 等信息
但是你會發現 https
都是 unknown
,這時候就需要我們安裝證書啦。
安裝 ssl ca 證書
- 配置 Charles 證書;選擇 help —> SSL Proxying -> install Charles Root Certificate,就會出現如下界面
- 點擊安裝證書再點擊,安裝在“受信任的根證書頒發機構” ,這一步十分重要,如不在這個目錄下,則不能抓取 https 請求
之后無腦下一步就安裝完成啦
配置 SSL Proxy Settings
添加上證書后,會發現還是不能抓取 https
請求,這是因為我們還沒有配置 ssl
的代理,接下來我們配置一下
在 Proxy -> SSL Proxy Settings,然后選擇 Enable SSL Proxying,在點擊 Add
ps: 通常 https 默認端口就是 443,所以這里我們通過匹配符 *:443 就可以抓取大部分的 https 請求了
打開百度
搜索一下 12306 就會出現百度根據 12306 查詢關聯的下拉列表請求了
到這里,基本的 https
抓包就可以使用了
接下來,我們連接真機進行真機的抓包體驗。。。
手機安裝證書
首先,手機和電腦需要在同一個局域網才可以進行抓包
這里會告訴我們,用手機瀏覽器打開 chls.pro/ssl 就可以安裝證書了
先手動配置下代理,打開 WIFI
,設置,代理填寫剛剛的 ip 地址,具體如圖:
打開后會出現是否允許設備連接 Charles
,點擊 allow
即可
手機端訪問 chls.pro/ssl,下載證書就可以安裝了
這里還是以百度為例,手機訪問百度之后再次搜索 12306
, 同樣會出現下面的下拉列表:
Charles
就會截取我們請求這個地址的數據,如圖所示:
這樣子就實現了我們的真機抓包啦。
安卓端
ps: 可能是因為我這里之前裝過證書了,所以可以抓包成功,實際上安卓 7.0 以上因為一些安全政策,不允許將證書安裝到信任目錄,想實現抓包則需要將下載的證書復制到/system/etc/security/cacerts/目錄
解決條件:手機需要 root
參考鏈接:Android9.0 配置 charles 的 https 抓包,android 9.0 以上 charles https 抓包
ps: openssl 直接在 gitbash 就可以使用了,所以上面的操作直接在 gitbash 即可
ios 端
ios 配置比安卓簡單了許多,安裝完后只需要在 wifi 中設置代理,在之后 打開設置 -> 關於本機 -> 證書信任設置,打開完全信任開關。就可以抓包了。
ps:因為手機抓包,截圖不方便,所以下面用 pc 來講解其他內容,實際使用是一樣的
Throttle Setting 模擬網速
有時候在開發的時候我們想要模擬一下網絡慢的情況,這時候 Charles 他是可以幫助到你的,在 Proxy -> Throttle Setting,然后選擇 Enable Throttling,在 Throttle Preset 下選擇網絡類型即可,具體設置你可以自行拿捏。
Breakpoints 斷點
在 Charles
發起一個請求的時候,我們是可以給某個請求打一個斷點的,然后來觀察或者修改請求或者返回的內容,但是在這過程中要注意請求的超時時間問題。要針對某一個請求設置斷點,只需要在這個請求網址右擊選擇 Breakpoints 就可以斷點某一個請求了。
這里我們以簡書的右側推薦作者為例,
右鍵,打上斷點,刷新一下
通過右側的 Edit Request 就可以修改我們的請求參數啦
比如,我們把 count
修改為 2,則頁面返回的數據只有兩條了
Rewrite Settings 內容替換
有時候我們會測一下請求的參數不同會帶來不同的返回結果以測試是否達到業務需求,或者需要不同的返回結果來驗證我們對數據的處理是否正確,這時候需要后台的同事配合,但是有了 Charles
,我們可以自己把控接口返回來的內容,比如數據的空與否,數據的長短等等。
再或者,修改別人的 app 里面接口的返回值,供做一些自己想做的事 😏
擊 Tools -> Rewrite Settings , 就可以使用我們的內容替換了,同樣是以全部渠道這個接口為例
點擊 enable,啟用該功能(事先復制好接口鏈接),點擊 Add 添加一個重寫配置,這里命名為 Test
點擊右下 add 按鈕,選中 body ,設置要修改的字符,修改即可
這里有個小問題,因為我們修改的是中文,所以我們需要在返回的數據 Header 中 Content-Type 字段聲明 charset=UTF-8。即:
修改完成后,我們看下界面的變化,是不是所有 喬漢童
都變成了 磨蹭先生
啊
Map Remote 請求重定向
求重定向的作用是什么呢?開發中一般都是測試環境,如果我們想對比一下和線上版本的區別的話,可以講測試的請求重定向到正式環境下。在選擇 Tools -> Map Remote 下:
ps: 其實這個和重寫作用類似,但是比重寫適用性更廣,而且更可控
和 Rewrite 操作類似,我們同樣需要點擊 enable ,之后輸入我們需要重定向的地址
映射數據如下:
{
"users": [
{
"id": 5796592,
"slug": "86b81ed8e35c",
"nickname": "磨蹭先生",
"avatar_source": "https://cdn.jsdelivr.net/gh/GATING/blog_imgs@master/blog/avatar.png",
"total_likes_count": 200044,
"total_wordage": 36871100,
"is_following_user": false
}
],
"total_count": 41931
}
這里主要修改了第一個數據,我們看看效果
發現,數據的確發生了改變,也實現了我們的目的
最后
感謝各位觀眾老爺的觀看啦,Charles 還有一下其他的妙用。就等着各位慢慢的去發掘吧!