macOS 上的 Charles 配置看一篇就够了
2021.11.9 更新,新增 iOS 模擬器抓取 Https 報文的配置方法。
文章目錄
- 1. Charles 簡介
- 2. Charles 工作原理
- 3. 組件介紹
- 4. macOS 代理設置
- 5. iPhone 手機代理設置
- 6. macOS 抓取 HTTPS 報文
- 6.1 配置 HTTPS 代理
- 6.2 證書配置
- 7. 抓取 iOS 模擬器的 HTTPS 報文
- 8. 抓取 iPhone 手機的 HTTPS 報文
- 參考資料
1. Charles 簡介
Charles 中文名為青花瓷,它通過HTTP代理/ HTTP監視器/反向代理,使開發人員可以查看其計算機與Internet之間的所有 HTTP 和 SSL/HTTPS 通信。這包括請求,響應和 HTTP 標頭(其中包含cookie和緩存信息),以達到分析抓包的目的。
主要功能:
- 支持 HTTP 和 HTTPS 代理
- 支持流量控制,模擬弱網環境
- 支持接口并發請求
- 支持重發網絡請求
- 支持斷點調試
2. Charles 工作原理
Charles 是通過成為客戶端的代理服務器來進行抓包分析,如下圖所示:
因此,我們先要在代理服務器上運行 Charles 并配置代理,然后再在客戶端上面配置代理,就能完成 Charles 的基本配置。這里的代理服務器,通常就是我們使用的電腦。
3. 組件介紹
主導航欄的按鈕功能介紹如下:
左側請求導航欄的作用如下,主要是按域名顯示抓取到的數據包列表。
4. macOS 代理設置
? -> 系統偏好設置 -> 網絡 -> 高級 -> 代理,然后可以進入到如下圖所示頁面,最后勾選網頁代理(HTTP)和安全網頁代理(HTTPS),并對應填入代理服務器的IP地址和端口號即可。
注意:
- 配置時,兩個選項(HTTP 和 HTTPS)都要分別填寫對應的代理服務器信息,即需要 Copy 過去。
- 如果是代理服務器和客戶端是同一臺電腦,則可以通過運行 Charles -> Proxy -> macOS Proxy 的方式完成代理的設置。
PS:在不使用 Charles 之后記得將上面的代理設置關掉,否則可能會導致電腦上不了網!
5. iPhone 手機代理設置
首先,我們得知道代理服務器的 IP 地址,我們可以使用下面兩種辦法:
- 方法一:Terminal -> 輸入命令 ip config 查看
- 方法二:Charles -> Help -> Local IP Adress
接著,我們需要在手機中進行如下配置:
6. macOS 抓取 HTTPS 報文
在沒有進行任何配置的情況下,我們抓到的 HTTPS 報文都無法正常顯示 <Unknown>。對此,我們需要以下經過兩大步配置。
6.1 配置 HTTPS 代理
首先,我們得配置 HTTPS 代理:
最后還要要點擊 OK 進行保存,這里的 443 是 HTTPS 協議占用的端口號。
6.2 證書配置
配置完代理之后,還要進行證書的配置,步驟如下:
完成這些操作之后,你抓取的 HTTPS 報文就能正常顯示了。
7. 抓取 iOS 模擬器的 HTTPS 報文
打開 Charles -> Help -> SSL Proxying -> Install Charles Root Certificate in iOS Simulators,給 iOS 模擬器安裝證書。
然后在 iOS 模擬器中,打開 Setting -> General -> About -> Certificate Trust Settings,進行證書的信任。
參考 6.macOS 抓取 HTTPS 報文 部分內容,對 mac 電腦進行配置
打開模擬器的 Safari 瀏覽器,在地址欄輸入 chls.pro/ssl,下載描述文件。一般訪問該網址后會有彈窗提示,點擊同意下載就好。
在模擬器中,打開 Settings -> General -> Profile,安裝 Charles 的描述文件,完成后就能正常抓取 iOS 模擬器上的 HTTPS 報文了。
8. 抓取 iPhone 手機的 HTTPS 報文
我們首先也得對 Charles 進行如同 6.1 的 HTTPS 代理配置,然后再進行如下步驟:
至此就完成了 iPhone 手機 HTTPS 的配置,你可以嘗試在手機中打開瀏覽器訪問某個網址,就可以在 Charles 中看到抓取的包了。
參考資料
- https://www.bilibili.com/video/BV1mQ4y1N7dn
- https://www.jianshu.com/p/e159b32e7d7a
- https://blog.eleven.net.cn/2021/05/29/charles/websocket/
總結
以上是生活随笔為你收集整理的macOS 上的 Charles 配置看一篇就够了的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Android Studio 中文显示方
- 下一篇: 面向任务的 Git 学习法