69.使用charles對app請求進行抓包,請求斷點,修改請求與返回的數據,重新發送請求(面試點:點擊高級,去掉代理中所有勾選項)

在App開發與后臺聯調過程中,經常會遇到后臺數據返回不全,請求參數需要修改,請求需要重發等情況。
如果每次都在app端修改,或者自己造數據,會增加工作量,而且每次要重新運行app,浪費時間。
因此,經過研究,可以使用抓包工具charles,對app進行抓包,請求斷點,修改請求與返回的數據,重新發送請求。
簡單的抓包流程與charels設置這里不做過多介紹,這里舉例子使用的是charles4.1.
首先看,主要的按鈕介紹:

20170908114315039.png

①重新發送指定請求:

在發送一次請求后,在左邊列表選中該請求,點擊如上圖所示重新發送按鈕即可模擬請求。

②請求斷點:

點擊如上圖請求斷點按鈕,開啟請求斷點。進行過網絡請求后,選中該請求,右鍵,點擊breakPoint,設置該請求的斷點。
斷點設置成功,頁面處于loading狀態

20180526132356158.png

然后再進行一次該地址的請求,便可在斷點處修改請求參數與返回的參數。

20170908114956316.png
20170908134214303.png

第三步,點擊Execute后,等數據返回進行修改response的數據,再次點擊Execute,即可實現篡改返回數據來進行app的測試,eg:修改訂單狀態等。

20180526132418378.png

轉手機的包的步驟:
如果是使用charles抓包。一定要tm的保證手機和電腦連的是一個網。
1、proxy setting,查看Charles,端口


1162361-20170519150348775-1904731167.jpg

2, 勾選


1162361-20170519150518260-633012227.jpg

3、ipconfig,查看自己電腦的ip地址
4、手機通過設置http代理服務器,連接到電腦服務器輸入電腦的ip端口和charles的端口一致,


1162361-20170519150933291-424282292.jpg

5、此時charles會給出提示。有新的連接。點擊allow
6、連接成功,此時手機發送的內容,charles可以抓到。

Charles安裝和抓包及報錯
1.charles安裝

下載charles4.0.1破解版,官方下載只能試用30天。網盤下載地址:https://pan.baidu.com/s/1eSwwvo2。(里面包括.dmg(用于安裝)和.jar文件(用于破解))破解方法:在Finder的應用程序中找到Charles.app,右鍵選擇“顯示包內容”,之后進入Contents文件夾,接著進入Java文件夾,用破解文件(也就是jar文件)替換charles.jar文件。到此就破解了。

image.png

2.安裝證書如果你需要截取分析 Https 協議相關的內容。那么需要安裝 Charles 的 CA 證書。具體步驟如下。我們需要在 Mac 電腦上安裝證書。點擊 Charles 的頂部菜單,選擇 “Help” –> “SSL Proxying” –> “Install Charles Root Certificate”,然后輸入系統的帳號密碼,即可在 KeyChain 看到添加好的證書。(如果證書是不信任的那就設置為信任)如下圖:

image.png

雙擊Charles證書:

image.png

選擇始終信任:

image.png

3.設置charles要截取 iPhone 上的網絡請求,我們首先需要將 Charles 的代理功能打開。在 Charles 的菜單欄上選擇 “Proxy”–>“Proxy Settings”,填入代理端口 8888,并且勾上 “Enable transparent HTTP proxying” 就完成了在 Charles 上的設置。如下圖:

填入的端口號和 Charles中的Proxy Settings,一樣

image.png

4.iPhone上面的設置。


image.png

首先我們需要獲取 Charles 運行所在電腦的 IP 地址,Charles 的頂部菜單的 “Help”–>“Local IP Address”,即可在彈出的對話框中看到 IP 地址,如下圖:在 iPhone 的 “ 設置 ”–>“ 無線局域網 ” 中,可以看到當前連接的 wifi 名,通過點擊右邊的詳情鍵,可以看到當前連接上的 wifi 的詳細信息,包括 IP 地址,子網掩碼等信息。在其最底部有“HTTP 代理”一項,我們將其切換成手動,然后填上 Charles 運行所在的電腦的 IP,以及端口號 8888(若此時設置代理無效,則先忽略此網絡,重新連接后再設置代理即可)。如下圖:

image.png

5.安裝手機證書

image.png

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

image.png

注意:這邊的fe80:0:0:0:aebc:32 這是ipv6的地址

在手機safari上面輸入:chls.pro/ssl,安裝文件。

image.png

通常這樣就可以進行網絡抓包了。但是這只是僅僅針對http請求。如果要抓取https請求,則還需要做第6步。我們先來看看沒有做第6步的情況。對一個接口打上Breakpoints。在進行網絡截取的時候會發現一直報錯。

image.png
image.png

報Failed to parse headers:EOF reading HTTP headers,原因是不能截取https的網絡請求。

加上第6步即可。此時如果碰到抓取到的https請求接口一直顯示紅色X<unknown>,則需要進行如下操作:設置->通用->關于本機->證書信任設置->針對根證書啟用完全信任下的Charles Proxy CA開關打開。

6.勾選https的截取功能

image.png

Charles 默認也并不截取 Https 網絡通訊的信息,如果你想對截取某個網站上的所有 HTTPS 網絡請求,可以在該請求上右擊,選擇 SSL proxy,如下圖:

這樣,對于該 Host 的所有 SSL 請求可以被截取到了。當截取到網絡請求紅色箭頭向下的時候即可改變網絡接口返回的內容。比如此時可以將code碼改為000001,data內容也可以做修改。

image.png

Charles模擬網絡環境,限制網絡速度 Charles Throtting

image.png

image.png

開啟限制網絡,直接在烏龜上操作,烏龜亮了,表示開啟了限制網絡

image.png

Charles mock假數據

前端開發經常遇到自己邏輯寫完了但是接口還沒寫好,還得等著接口,這時候就可以自己去造點假數據了。

一般后端先寫完接口文檔和前端定好數據結構才去寫接口邏輯,

而在后端接口邏輯寫完之前前端可能已經把前端的邏輯寫好了,

需要相應的數據去鋪頁面,這時候我們就可以用Charles的mock功能在本地去模擬一些返回數據

實戰經驗:
IOS中實驗,要以.json 結尾來處理,以.txt 結尾的不行

配置如下:

1首先保證手機和pc在同一網絡環境下

2手機添加代理,主機名:pc的ip,端口:charles配置的端口號,我一般為8888

3在charles中右鍵某個要添加的接口選擇最下面的Map Local,情況Query那行,然后選擇本地json文件就可以了


image.png
image.png

android設置代理

操作路徑:設置-->WLAN,選中網絡長按(不同設備操作方式不一樣,有些事點擊更多按鈕)-->修改網絡-->高級選項,將代理選項設置為手動,在代理服務器主機名處填寫你要設置的代理服務器IP,端口填寫對應的端口(如Fiddler為8888),設置完畢后點擊保存即可

image.png

通常情況下用第一種方式即可完成代理設置,不過有些android設備比較奇葩沒法通過上述方法設置或找不到設置入口的情況下也可以通過adb指令的方式設置代理

設置代理的時候,一定要勾選高級選項,否則看不到設置代理的地方,如圖上邊的綠色勾選

當網絡設置了vpn,用charles抓包,走的是android模擬器,操作模擬器,抓不到網絡的鏈接,是因為網絡沒有給模擬器設置代理

如何為android模擬器設置代理

屏幕快照 2020-06-17 下午3.14.45.png

這邊,然后退出模擬器,打開charles就可以監聽到抓到模擬器的接口了

當你的電腦有用vpn 鏈接公司網絡,你的手機在用charles代理鏈接你的電腦的wifi網絡,有時候是連不上公司網絡,那你可以先把公司的vpn關了,讓手機代理charles鏈接你的wifi網絡,鏈接成功以后,在vpn鏈接公司網絡

image.png

charles顯示這個提示的時候,一般是你鏈接代理的時候出現

用Charles抓包后,關閉,網絡正常電腦無法打開網頁。解決辦法:

提示:正常情況下將wifi的代理 由手動重新設置成自動即可連接。

1 打開網絡偏好設置

image.png

2 打開網絡代理 (點擊高級)

image.png

3 去掉代理中所有勾選項;

image.png

然后保存就可以了。猜測原因是請求被攔截了或者是使用Charles時改了部分設置!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容