Fork me on GitHub

移動APP抓包神器Charles使用教程,產品經理看了都會

由于最近負責的APP又要更新迭代了,所以我特別關注產品體驗如何,尤其是一些細小的體驗,比如接口的請求時長,請求大小等。加上自己一直是一個爬蟲愛好者,所以對抓包工具一直有所研究。今天就分享一款抓包神器Charles。

為什么要抓包

要理解為什么要抓包,首先我們來看下網絡抓包的定義:

抓包(packet capture)就是將網絡傳輸發送與接收的數據包進行截獲、重發、編輯、轉存等操作,也用來檢查網絡安全。抓包也經常被用來進行數據截取等。

以上是來自百度百科的定義。我們都知道,不論是B/S架構,還是C/S架構的產品,或多或少都會與服務器進行數據交互。也就是定義所說的網絡數據的發送與接收,通過抓包,我們可以進行接口傳參的數值修改,得到想要的數據。

在WEB產品中,我們可以通過瀏覽器的開發工具Network來進行網絡抓包;在移動APP中,通過抓包工具也可以輕松實現抓包。

那抓包到底有什么用呢?以下我列幾個使用場景:

  • 測試單個頁面數據請求的數據、大小;
  • 查看頁面請求接口的安全驗證;
  • 獲取某個APP的數據接口,進行數據爬取;

單個頁面數據請求大小其實就是Network中的請求時間,為了產品體驗更好,接口的響應時間需要盡可能的快,哪怕是弱網環境下也應該很快;經常我們在使用一款APP的時候,會說:”這個APP用起來很慢“,其實APP慢90%的原因都是服務器問題,真正因為手機硬件跟不上導致卡頓的比例極低。既然是跟服務器相關,那么通過抓包工具就可以輕易的測試出來接口返回數據的大小。

我通過抓了一些APP的接口來看,有部分APP接口安全性做的極差,舉個例子,登錄接口用GET方法,用戶名與密碼均明文上傳;然后一些隱私數據的接口沒有任何安全驗證手段,直接GET即可請求回數據,有時候我也在想,如果有惡意的人拿這些裸奔的接口干一些壞事,會有什么后果?

最后一個就是我經常用來爬數據的,比如某電商產品的商品列表,通過抓包可以清楚看到一共有多少款商品,商品都是什么價格等等,用來做爬蟲會非常方便。

抓包工具的選擇

其實抓包工具貌似還不少,我自己了解了兩款。

名稱 是否收費 平臺
Charles 收費 WIN/MACOS
Fiddler 免費 WIN

最后為什么選擇了Charles,只能說機緣巧合吧,Fiddler在macos上安裝貌似太麻煩了,而Charles安裝起來則相當的簡單。如何安裝這里就不贅述了,點擊下面的下載地址直接下載即可,破解版自己可百度谷歌,很簡單就可以找到。

Charles下載地址

官網:https://www.charlesproxy.com/download/

Charles工作界面介紹

主界面視圖介紹

由于工具是純英文界面,所以需要一段時間來適應。對于有開發經驗的同學來說則不會太陌生;首先介紹下Charles的兩種工作界面:

  • Structure:樹狀結構顯示,將網絡請求按訪問的域名分類;
  • Sequence:水平結構顯示,將網絡請求按訪問的時間排序

其中,structure類似于chrome開發者工具的sources,可以查看到目錄下面都請求了哪些服務器:

FJtuU1.png

上圖為新浪微博熱門微博的評論數據,在structure界面中找起來還是有些麻煩的,但是在sequence界面中找起來則相當方便,見下圖:

FJtK4x.png

可以清楚的看到接口的請求地址,兩種方式各有優勢,實際應用過程中按需自取。

工具導航欄介紹

由于不想放太多圖片,這里就以文本介紹描述了。

名稱 功能
小掃帚 清除捕獲到的所有請求
紅點 紅色狀態表示正在抓取網絡請求,灰色狀態表示停止了網絡抓取請求
小烏龜 灰色狀態說明是沒有開啟網速節流,綠色狀態說明開啟了網速節流
六邊形 灰色狀態說明是沒有開啟斷點,綠色狀態說明開啟了斷點
編輯修改請求,點擊之后可以修改請求的內容。(可用來修改請求參數)
刷新 重復發送請求,點擊之后選中的請求會被再次發送
對勾 驗證選中的請求的響應
扳手起子 常用功能,包含了 Tools 菜單中的常用功能
設置 常用設置,包含了 Proxy 菜單中的常用設置

菜單介紹

Charles 的主菜單包括:FileEditViewProxyToolsWindowHelp。用的最多的主菜單分別是 ProxyTools

Proxy 菜單包含以下功能:

名稱 說明
Start/Stop Recording 開始/停止記錄會話
Start/Stop Throttling 開始/停止節流
Enable/Disable Breakpoints 開啟/關閉斷點模式
Recording Settings 記錄會話設置
Throttle Settings 節流設置
Breakpoint Settings 斷點設置
Reverse Proxies Settings 反向代理設置
Port Forwarding Settings 端口轉發
Windows Proxy 記錄計算機上的所有請求
Proxy Settings 代理設置
SSL Proxying Settings SSL代理設置
Access Control Settings 訪問控制設置
External Proxy Settings 外部代理設置
Web Interface Settings Web 界面設置

在實際使用過程中,由于我只是單純的抓包,所以其實菜單用到的并不多,所以暫時這塊不做詳細描述,后續用到了再來更新。

開始抓包

客戶端設置(MAC/WIN)

  1. 查看本機IP地址

首先需要知道自己的本地IP地址。但如何要知道自己的IP地址呢?

  • 在終端輸入ifconfig
  • 打開系統偏好設置-網絡;
  • 打開Charles-Help-Local IP Address;
  1. 設置端口

打開Charles,選擇Proxy->Proxy Setting->Proxies:

設置HTTP PROXY的端口(PORT)為8888,然后勾選下方的enable transparent HTTP proxying;到這里客戶端的設置就完畢了。

手機端的設置(IOS/Android)

打開手機,連接跟客戶端同個網絡環境下的WIFI,然后設置代理,代理模式選手動,服務器地址填客戶端設置中第一步找到的IP地址,端口填8888(上文設置的端口)。到了這一步,還沒真正的成功,只有當手機成功連接到電腦的時候,電腦會彈出一個connect from X.X.X.X的彈窗,這就表示連接成功了,點擊”allow“,也就是表示同意,然后就可以愉快的抓包了。

但是這個時候還只能抓取到http(80端口)的數據,要抓取https,就需要安裝證書。抓包成功請參考上文的圖片。

為什么要設8888?我也不知道,所有的教程中都是這么寫的,手動攤手.jpg

抓取https的包

安裝證書這塊其實沒多少好說的,首先打開Charles,選擇Help->SSL Proxy->Install Charles Root Certificate,手機端的也差不多,點擊proxy官網的證書下載,然后下載到手機即可。

安裝其實很簡單,但這個地方一定要特別注意一點!!!就是一定要信任證書,我一開始在這里研究了好久,就我兩個設備證書都安裝了,沒問題啊,但https的接口還是沒法抓取,但后來發現了,macos跟ios都必須要信任剛剛安裝的證書才行,不會信任證書的自行百度。

給你的服務器來一次壓力測試

其實我一直都有聽說過壓力測試,但我不是專業測試,所以有的時候我喜歡研究一些好玩的東西,正好發現Charles可以利用抓取到的接口開始打壓,在抓取到的接口點右鍵->Repeat Advanced,這個功能還挺好的,我在另一個博主的分享中看到了,可以利用這個功能來刷票,比如一個賬號一天可以投N次票,利用這個功能就可以重復給接口喂數據,當數據量大的時候就相當于壓力測試了。

  • Iterertions:并發線程;
  • Concurrency:打壓次數;

不過這個功能我研究的不深,也還沒遇到實際的這種場景,就發現用來刷票還蠻不錯的。

TIPS

  • 不抓包請關閉手機HTTP代理,否則斷開與電腦連接后會連不上網;
  • Charles搭配Postman效果極佳,后續考慮寫一篇Postman的教程;

參考資料:
Charles 功能介紹和使用教程
Charles 從入門到精通
charles抓包的安裝,使用說明以及常見問題解決(windows)

贵州体育彩票11选5