【爬蟲】網頁抓包工具--Charles的使用教程

lhrbest發表於2018-12-19



抓包工具Charles的使用教程

參考:https://zhubangbang.com/charlesproxy

如果您是您一次使用Charles,可能對下面的感興趣。

如果您已經正在使用Charles,可能感興趣下面的工具

如果您想了解頂部選單欄,可以看下面的

如果您有前端測試的需求,推薦  SwitchHosts 這個小工具,當然您如果對chrome瀏覽器的線上改host感興趣,也可以用下  Host Switch Plus

Charles可能很多人不熟悉,但是另外一個windows下的Fiddler很多人應該不陌生的;它們都是同性質的代理抓包工具;

正常情況下,Chrome DevTool已經滿足了日常web開發的需求,但是有的特性: 編輯request的引數、重定向request請求的資源、編輯response的資料 ,ChromeDevTool就很蛋疼了,而且檢視和除錯移動端資源時候Chrome也並不好用;

我常借用Charles做這些事情 :

  • 抓取 Http 和 Https 的請求和響應,抓包是最常用的了。

  • 重發網路請求,方便後端除錯,複雜和特殊情況下的一件重發還是非常爽的(捕獲的記錄,直接repeat就可以了,如果想修改還可以修改)。

  • 修改網路請求引數(客戶端向伺服器傳送的時候,可以修改後再轉發出去)。

  • 網路請求的截獲和動態修改。

  • 支援模擬慢速網路,主要是模仿手機上的2G/3G/4G的訪問流程。

  • 支援本地對映和遠端對映,比如你可以把線上資源對映到本地某個資料夾下,這樣可以方面的處理一些特殊情況下的bug和線上除錯(網路的css,js等資源用的是原生程式碼,這些你可以本地隨便修改,資料之類的都是線上的環境,方面線上除錯);

  • 可以抓手機端訪問的資源(如果是配置HOST的環境,手機可以借用host配置進入測試環境)

其實Charles的實現原理並不複雜;大概的實現如下;

 

charles相當於一個插在伺服器和客戶端之間的“過濾器”;

當客戶端向伺服器發起請求的時候,先到charles進行過濾,然後charles在把最終的資料傳送給伺服器;

注意:此時charles發給伺服器的資料,不一定是客戶端請求的資料;charles在接到客戶端的請求時可以自由的修改資料,甚至可以直接Block客戶端發的請求;

伺服器接收請求後的返回資料,也會先到charles,經過charles過濾後再發給客戶端;

同理:客戶端接收的資料,不一定就是伺服器返回的資料,而是charles給的資料;

正因為上面的原理,所以charles能實現的功能,對前端開發者來說非常有吸引力,相當於請求和響應都可控的,而且charles為了控制更加方面,提供很多簡潔的操作;

注意Charles是收費軟體,可以免費試用30天的時間,推薦使用正版,研究學習可以看下  charles破解版免費下載和安裝教程 (我個人用的是charles4.1.2這個版本);

如果想要抓包,第一件事情,就是把charles設定成為本機和服務端之間的”過濾器”;讓所有的網路請求全部經過charles,這樣就可以捕獲並記錄到你請求的內容和返回資料了,原理請參照上面那張圖片;需要注意的是,如果你訪問的是web,可以把所有請求抓到;但如果你想抓某些應用(比如手機上的應用等),應用使用的某些資源,如果沒有向伺服器傳送請求,而是通過呼叫內部資源的方式進行展現,那麼此時charles是抓不到的;驗證這個的方式很簡單,就是把網路斷掉後,如果還可以繼續展現,就是屬於呼叫內部資源的,這種時候就不要想著通過抓包工具來捕獲資源了,他都沒有像伺服器發起請求,手機點爛也抓不到的;

啟動 Charles 後,第一次 Charles 會詢問你是否把Charles設定為系統的代理,如果此時你忽略了這個詢問敞口,你可以在後期設定的;將 Charles 設定成系統代理:選擇選單中的 “Proxy” -> “Mac OS X Proxy/windows proxy” 來將 Charles 設定成系統代理,參考如下,如果Mac下有管理密碼,需要輸入密碼後方可進行;

image

將charles設定為chrome的代理

需要注意的是,Chrome 和 Firefox 瀏覽器並不一定使用的就是本機,可能是一些代理工具,而 Charles 是通過將自己設定成代理伺服器來完成資源記錄的,所以如果你的charles無法擷取 Chrome 和 Firefox 瀏覽器的網路請求內容,需要在瀏覽器裡做下修改。在 Chrome 中設定成使用系統的代理伺服器設定即可,或者直接將代理伺服器設定成 127.0.0.1:8888 也可達到相同效果。

image

備註:如果您的chrome有用過改HOST的擴充套件工具(比如你用了  Host Switch Plus  這個擴充套件工具),請暫時關閉;否則chrome會通過你的擴充套件控制,不能使用charles;你的chrome中可能會看到**您的網路代理設定是由擴充套件程式管理的。** 這種的提示;如果你有修改HOST或者用host進行FQ的需求,我更加推薦你使用  SwitchHosts  這個工具;

charles 主介面的介紹

Charles 主要提供兩種檢視封包的檢視,分別名為 “Structure” 和 “Sequence”。
– Structure/結構檢視,將網路請求按訪問的域名分類,比如某個域名下有n個資源請求,那麼所有此域名下的請求都會在這裡做一個詳細的分類;

image

– Sequence/序列檢視,將網路請求按訪問的時間排序,按照你的電腦的傳送請求順序進行。

image

可以根據具體的需要在這兩種檢視之前來回切換。

當使用”序列檢視”的時候

請求多了有些時候會看不過來,Charles 提供了一個簡單的 Filter 功能,可以輸入關鍵字來快速篩選出 URL 中帶指定關鍵字的網路請求。

對於需要抓取的某個請求,通常情況下,我們需要對網路請求進行過濾,只監控向指定目錄伺服器上傳送的請求。對於這種需求,以下幾種辦法:

方法一:直接過濾域名

在主介面的中部的 Filter 欄中填入需要過濾出來的關鍵字。例如我檢視的域名地址是: https://zhubangbang.com  , 那麼只需要在 Filter 欄中填入 zhubangbang.com或bang,即可過濾含有這些關鍵字資訊的請求(只要host和path中含有即可)。

image

方法二:修改Include的域名和埠

在 Charles 的選單欄選擇 “Proxy”->”Recording Settings”,然後選擇 Include 欄,選擇新增一個專案,然後填入需要監控的協議,主機地址,埠號。這樣就可以只擷取目標網站的封包了;

image

通常情況下,我們使用方法一做封包過濾,方法二做一些唯一的域名抓包,正常情況下,不推薦這種設定方法;

因為這種方法,你的charles只能抓你配置的域名;如果某天早晨,你的charles一切正常,訪問也正常,而且在active commections裡也看到了某個域名的請求資訊,但是在主介面死活看到獲取到的資訊,不用著急,非常有可能是因為你設定了include的指定域名;而且是設定後你忘記解除了,導致你一臉懵逼;這種方法非常不推薦,太粗暴了,除非你這半個月都只看某個HOST下的資訊,否則 千萬千萬別這麼搞,很容易在以後使用時候的忘記解除

如果你只是為了更清楚的檢視某個域名下的請求和響應資訊,推薦使用結構檢視模式下的焦點域名設定;那種模式比這種方法更好,下面是過濾焦點域名後在序列模式下的呼叫方法;

方法三:過濾焦點域名

焦點02

在目標的網路請求上右鍵,選中focus(此時,該域名已經被設定為一個焦點標記了;);然後點選fillter後面的focused來篩選你的做的focus標記檔案;

你設定的焦點域名在”focused Hosts”裡面可以檢視和管理

image

結構檢視,這種模式下的展現更加人性化;

當你設定某個域名為焦點域名的時候,會把當前域名單獨顯示在上面,

而其它的非焦點域名,都會在other Hosts裡顯示;

image

捕獲的資訊,介面展示的資訊如下,

contents是最常用的一個標籤,其中上半部分是請求,下半部分是響應;

請求部分中,會根據請求的內容,而分為很多項;比如如果是表單提交,還會有form的選項供你檢視提交的內容(表格圖形化的方式),最後一項”Raw”是未經處理的請求資訊,可以理解為,raw左側的所有專案都是對raw資訊的拆分和美化,以便直觀檢視;當然響應區域的raw和其它專案的關係也是一樣,響應部分的Raw是接收到的全部未處理資訊;如果響應內容是 JSON 格式的,那麼 Charles 可以自動幫你將 JSON 內容格式化,方便你檢視。如果響應內容是圖片,那麼 Charles 可以顯示出圖片的預覽。

Charles選單介紹

一、file(檔案選單)

這個實在沒有必要新建一篇文章介紹,需要注意的是;

“匯入””匯出”這個功能在和別人溝通的時候很常用,比如你向第三方工具/類庫開發人員求助某個功能,或者有BUG怎麼避開;

他們一般會讓你提供抓包到時候收到的檔案,或者應用場景之類的;

你可以匯出你捕捉到的資訊,傳送給別人(類似PS裡的PSD原始檔),

別人收到後,在charles裡開啟就可以看到同樣的抓包資訊了,方便遠端分析和交流;

二、edit(編輯選單)

檢視  charles編輯選單介紹

charles中Edit選單的介紹;

我的是4.1.2版本,mac系統下的選單大同小異;

這裡用的一般也就查詢和偏好設定;

查詢設定

介面如上圖,也沒啥好說的;

 偏好設定

檢視選項

啟動設定

警告設定

三、view(檢視選單)

檢視  charles的檢視選單介紹

Charles的檢視選單裡的東西其實是非常常用的功能;

但是我們一般是不需要從這裡點進來的;

裡面,無非是檢視的檢視結構(按照域名和按照訪問時間)

然後是一些概覽之類的;如下圖

 

在下面是把charles的請求和響應以什麼方式來展現的;

Focus Host是焦點域名的;這裡配置好的可以在結構檢視中,單獨拎出來顯示;

如下圖,在把zhubangbang.com設為焦點域名,在檢視中是下圖這麼展示的;

在序列檢視的時候,是按照下面這麼展示的;

選擇focued後,就會只保留你的焦點域名;

四、 proxy (代理選單)

  1. -   stop / start recording   開始/暫停記錄

  2. -   stop / start throttling   開始/暫停節流

  3. -   enable / disable breakpoints   啟用/禁用斷點

  4. -   recording settings   記錄設定

  5. -   throttle settings   節流設定

  6. -   breakpoint settings   斷點設定

  7. -   reverse proxies   反向代理

  8. -   port forwarding   埠轉發

  9. -   windows proxy   Windows 代理(開啟整個系統通過 charles 作為代理)

  10. -   mozilla firefox proxy   火狐代理

  11. -   proxy setting   代理設定

  12. -   ssl proxy setting  ssl 代理設定

  13. -   access control setting   訪問控制設定

  14. -   extornal proxy setting   外部代理設定

  15. -   web  interface  setting   Web 介面設定

分類:  Charles



Charles 抓包使用教程


  • charles使用教程

  • 將 Charles 設定成系統代理

  • Charles 主介面介紹

  • 過濾網路請求

  • 擷取 iPhone 上的網路封包

  • 擷取 Https 通訊資訊

  • 模擬慢速網路

  • 修改網路請求內容

  • 給伺服器做壓力測試

  • 修改伺服器返回內容

  • 總結

  • 簡介

  • Charles  是在 Mac 下常用的網路封包擷取工具,在做  移動開發 時,我們為了除錯與伺服器端的網路通訊協議,常常需要擷取網路封包來分析。

    Charles 通過將自己設定成系統的網路訪問代理伺服器,使得所有的網路訪問請求都通過它來完成,從而實現了網路封包的擷取和分析。

    除了在做 移動開發 中除錯埠外,Charles 也可以用於分析第三方應用的通訊協議。配合 Charles 的 SSL 功能,Charles 還可以分析 Https 協議。

    Charles 主要的功能包括:

     

    將 Charles 設定成系統代理

    之前提到,Charles 是通過將自己設定成代理伺服器來完成封包擷取的,所以使用 Charles 的第一步是將其設定成系統的代理伺服器。

    啟動 Charles 後,第一次 Charles 會請求你給它設定系統代理的許可權。你可以輸入登入密碼授予 Charles 該許可權。你也可以忽略該請求,然後在需要將 Charles 設定成系統代理時, 選擇選單中的 “Proxy” –> “Mac OS X Proxy” 來將 Charles 設定成系統代理。如下所示:

    之後,你就可以看到源源不斷的網路請求出現在 Charles 的介面中。

    需要注意的是,Chrome 和 Firefox 瀏覽器預設並不使用系統的代理伺服器設定,而 Charles 是通過將自己設定成代理伺服器來完成封包擷取的,所以在預設情況下無法擷取 Chrome 和 Firefox 瀏覽器的網路通訊內容。如果你需要擷取的話,在 Chrome 中設定成使用系統的代理伺服器設定即可,或者直接將代理伺服器設定成  127.0.0.1:8888  也可達到相同效果。

    Charles 主介面介紹

    Charles 主要提供兩種檢視封包的檢視,分別名為 “Structure” 和 “Sequence”。

    大家可以根據具體的需要在這兩種檢視之前來回切換。請求多了有些時候會看不過來,Charles 提供了一個簡單的 Filter 功能,可以輸入關鍵字來快速篩選出 URL 中帶指定關鍵字的網路請求。

    對於某一個具體的網路請求,你可以檢視其詳細的請求內容和響應內容。如果請求內容是 POST 的表單,Charles 會自動幫你將表單進行分項顯示。如果響應內容是 JSON 格式的,那麼 Charles 可以自動幫你將 JSON 內容格式化,方便你檢視。如果響應內容是圖片,那麼 Charles 可以顯示出圖片的預覽。

    過濾網路請求

    通常情況下,我們需要對網路請求進行過濾,只監控向指定目錄伺服器上傳送的請求。對於這種需求,以下幾種辦法:

    方法一:在主介面的中部的 Filter 欄中填入需要過濾出來的關鍵字。例如我們的伺服器的地址是: http://yuantiku.com  , 那麼只需要在 Filter 欄中填入 yuantiku 即可。

    方法二:在 Charles 的選單欄選擇 “Proxy”–>“Recording Settings”,然後選擇 Include 欄,選擇新增一個專案,然後填入需要監控的協議,主機地址,埠號。這樣就可以只擷取目標網站的封包了。如下圖所示:

    通常情況下,我們使用方法一做一些臨時性的封包過濾,使用方法二做一些經常性的封包過濾。

    方法三:在想過濾的網路請求上右擊,選擇 “Focus”,之後在 Filter 一欄勾選上 Focussed 一項,如下圖所示:

    這種方式可以臨時性的,快速地過濾出一些沒有通過關鍵字的一類網路請求。

    擷取 iPhone 上的網路封包

    Charles 通常用來擷取本地上的網路封包,但是當我們需要時,我們也可以用來擷取其它裝置上的網路請求。下面我就以 iPhone 為例,講解如何進行相應操作。

    Charles 上的設定

    要擷取 iPhone 上的網路請求,我們首先需要將 Charles 的代理功能開啟。在 Charles 的選單欄上選擇 “Proxy”–>“Proxy Settings”,填入代理埠 8888,並且勾上 “Enable transparent HTTP proxying” 就完成了在 Charles 上的設定。如下圖所示:

    iPhone 上的設定

    首先我們需要獲取 Charles 執行所在電腦的 IP 地址,Charles 的頂部選單的 “Help”–>“Local IP Address”,即可在彈出的對話方塊中看到 IP 地址,如下圖所示:

    在 iPhone 的 “ 設定 ”–>“ 無線區域網 ” 中,可以看到當前連線的 wifi 名,通過點選右邊的詳情鍵,可以看到當前連線上的 wifi 的詳細資訊,包括 IP 地址,子網掩碼等資訊。在其最底部有「HTTP 代理」一項,我們將其切換成手動,然後填上 Charles 執行所在的電腦的 IP,以及埠號 8888,如下圖所示:

    設定好之後,我們開啟 iPhone 上的任意需要網路通訊的程式,就可以看到 Charles 彈出 iPhone 請求連線的確認選單(如下圖所示),點選 “Allow” 即可完成設定。

    擷取 Https 通訊資訊

    安裝證書

    如果你需要擷取分析 Https 協議相關的內容。那麼需要安裝 Charles 的 CA 證書。具體步驟如下。

    首先我們需要在 Mac 電腦上安裝證書。點選 Charles 的頂部選單,選擇 “Help” –> “SSL Proxying” –> “Install Charles Root Certificate”,然後輸入系統的帳號密碼,即可在 KeyChain 看到新增好的證書。如下圖所示:

    需要注意的是,即使是安裝完證書之後,Charles 預設也並不擷取 Https 網路通訊的資訊,如果你想對擷取某個網站上的所有 Https 網路請求,可以在該請求上右擊,選擇 SSL proxy,如下圖所示:

    這樣,對於該 Host 的所有 SSL 請求可以被擷取到了。

    擷取移動裝置中的 Https 通訊資訊

    如果我們需要在  iOS  或  Android  機器上擷取 Https 協議的通訊內容,還需要在手機上安裝相應的證書。點選 Charles 的頂部選單,選擇 “Help” –> “SSL Proxying” –> “Install Charles Root Certificate on a Mobile Device or Remote Browser”,然後就可以看到 Charles 彈出的簡單的安裝教程。如下圖所示:

    按照我們之前說的教程,在裝置上設定好 Charles 為代理後,在手機瀏覽器中訪問地址: http://charlesproxy.com/getssl ,即可開啟證書安裝的介面,安裝完證書後,就可以擷取手機上的 Https 通訊內容了。不過同樣需要注意,預設情況下 Charles 並不做擷取,你還需要在要擷取的網路請求上右擊,選擇 SSL proxy 選單項。

    模擬慢速網路

    在做移動開發的時候,我們常常需要模擬慢速網路或者高延遲的網路,以 測試 在行動網路下,應用的表現是否正常。Charles 對此需求提供了很好的支援。

    在 Charles 的選單上,選擇 “Proxy”–>“Throttle Setting” 項,在之後彈出的對話方塊中,我們可以勾選上 “Enable Throttling”,並且可以設定 Throttle Preset 的型別。如下圖所示:

    如果我們只想模擬指定網站的慢速網路,可以再勾選上圖中的 “Only for selected hosts” 項,然後在對話方塊的下半部分設定中增加指定的 hosts 項即可。

    修改網路請求內容

    有些時候為了除錯伺服器的介面,我們需要反覆嘗試不同引數的網路請求。Charles 可以方便地提供網路請求的修改和重發功能。只需要在以往的網路請求上點選右鍵,選擇 “Edit”,即可建立一個可編輯的網路請求。如下所示:

    我們可以修改該請求的任何資訊,包括 URL 地址、埠、引數等,之後點選 “Execute” 即可傳送該修改後的網路請求(如下圖所示)。Charles 支援我們多次修改和傳送該請求,這對於我們和伺服器端除錯介面非常方便,如下圖所示:

    給伺服器做壓力測試

    我們可以使用 Charles 的 Repeat 功能來簡單地 測試 伺服器的併發處理能力,方法如下。

    我們在想打壓的網路請求上(POST 或 GET 請求均可)右擊,然後選擇 「Repeat Advanced」選單項,如下所示:

    接著我們就可以在彈出的對話方塊中,選擇打壓的併發執行緒數以及打壓次數,確定之後,即可開始打壓。

    悄悄說一句,一些寫得很弱的投票網站,也可以用這個辦法來快速投票。當然,我也拿 Charles 的 Repeat 功能給一些詐騙的釣魚網站餵了不少垃圾資料,上次不小心還把一個釣魚網站的 資料庫 打掛了,嗯,請叫我雷鋒。

    修改伺服器返回內容

    有些時候我們想讓伺服器返回一些指定的內容,方便我們除錯一些特殊情況。例如列表頁面為空的情況,資料異常的情況,部分耗時的網路請求超時的情況等。如果沒有 Charles,要伺服器配合構造相應的資料顯得會比較麻煩。這個時候,使用 Charles 相關的功能就可以滿足我們的需求。

    根據具體的需求,Charles 提供了 Map 功能、 Rewrite 功能以及 Breakpoints 功能,都可以達到修改伺服器返回內容的目的。這三者在功能上的差異是:

    Map 功能

    Charles 的 Map 功能分 Map Remote 和 Map Local 兩種,顧名思義,Map Remote 是將指定的網路請求重定向到另一個網址請求地址,Map Local 是將指定的網路請求重定向到本地檔案。

    在 Charles 的選單中,選擇 “Tools”–>“Map Remote” 或 “Map Local” 即可進入到相應功能的設定頁面。

    對於 Map Remote 功能,我們需要分別填寫網路重定向的源地址和目的地址,對於不需要限制的條件,可以留空。下圖是一個示例,我將所有  ytk1.yuanku.ws (測試伺服器)的請求重定向到了  www.yuantiku.com (線上伺服器)。

    對於 Map Local 功能,我們需要填寫的重定向的源地址和本地的目標檔案。對於有一些複雜的網路請求結果,我們可以先使用 Charles 提供的 “Save Response…” 功能,將請求結果儲存到本地(如下圖所示),然後稍加修改,成為我們的目標對映檔案。

  1. Map 功能適合長期地將某一些請求重定向到另一個網路地址或本地檔案。

  2. Rewrite 功能適合對網路請求進行一些正則替換。

  3. Breakpoints 功能適合做一些臨時性的修改。

  1. Structure 檢視將網路請求按訪問的域名分類。

  2. Sequence 檢視將網路請求按訪問的時間排序。

  1. 擷取 Http 和 Https 網路封包。

  2. 支援重發網路請求,方便後端除錯。

  3. 支援修改網路請求引數。

  4. 支援網路請求的截獲並動態修改。

  5. 支援模擬慢速網路。








About Me

........................................................................................................................

● 本文作者:小麥苗,部分內容整理自網路,若有侵權請聯絡小麥苗刪除

● 本文在itpub( http://blog.itpub.net/26736162 )、部落格園( http://www.cnblogs.com/lhrbest )和個人weixin公眾號( xiaomaimiaolhr )上有同步更新

● 本文itpub地址: http://blog.itpub.net/26736162

● 本文部落格園地址: http://www.cnblogs.com/lhrbest

● 本文pdf版、個人簡介及小麥苗雲盤地址: http://blog.itpub.net/26736162/viewspace-1624453/

● 資料庫筆試面試題庫及解答: http://blog.itpub.net/26736162/viewspace-2134706/

● DBA寶典今日頭條號地址: http://www.toutiao.com/c/user/6401772890/#mid=1564638659405826

........................................................................................................................

● QQ群號: 230161599 (滿) 、618766405

● weixin群:可加我weixin,我拉大家進群,非誠勿擾

● 聯絡我請加QQ好友 646634621 ,註明新增緣由

● 於 2018-12-01 06:00 ~ 2018-12-31 24:00 在魔都完成

● 最新修改時間:2018-12-01 06:00 ~ 2018-12-31 24:00

● 文章內容來源於小麥苗的學習筆記,部分整理自網路,若有侵權或不當之處還請諒解

● 版權所有,歡迎分享本文,轉載請保留出處

........................................................................................................................

小麥苗的微店 https://weidian.com/s/793741433?wfr=c&ifr=shopdetail

小麥苗出版的資料庫類叢書 http://blog.itpub.net/26736162/viewspace-2142121/

小麥苗OCP、OCM、高可用網路班 http://blog.itpub.net/26736162/viewspace-2148098/

小麥苗騰訊課堂主頁 https://lhr.ke.qq.com/

........................................................................................................................

使用 weixin客戶端 掃描下面的二維碼來關注小麥苗的weixin公眾號( xiaomaimiaolhr )及QQ群(DBA寶典)、新增小麥苗weixin, 學習最實用的資料庫技術。

........................................................................................................................

歡迎與我聯絡

 

 



來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/26736162/viewspace-2285754/,如需轉載,請註明出處,否則將追究法律責任。

相關文章