古詩詞大全網 - 個性簽名 - 前端抓手機抓包可以看頁面風格嗎?

前端抓手機抓包可以看頁面風格嗎?

時隔三年,再次接觸移動h5頁面開發,最後壹次是大四實習的時候。這次是混合開發,涉及h5頁面和原生app的交互。h5頁面需要打通與native app的登錄狀態,調用native app的接口,比如調用native camera掃描二維碼。不同於微信小程序的開發,在本地開發時,微信提供了微信開發者工具,可以在本地模擬調用。但是我們每次都需要打包靜態文件,上傳到服務器調試,非常麻煩。

native app加載在線h5時可以運行本地代碼嗎?答案是肯定的。可以攔截在線頁面請求數據,然後通過whistle等抓包工具響應本地代碼。本文主要介紹抓包的原理和抓包工具哨子的使用。

1.搶包原理

1.1什麽是搶包?

數據包捕獲是對網絡發送和接收的數據包進行攔截、重發、編輯和轉儲。通過數據包捕獲,您可以:

分析網絡問題

商情分析

網絡信息流分析

網絡大數據的金融風險控制

檢測試圖入侵網絡的攻擊。

檢測內部和外部用戶對網絡資源的濫用

檢測網絡入侵的影響

監控連接到互聯網的寬帶流量

監控網絡流量(包括內部用戶、外部用戶和系統)

監控互聯網和用戶計算機的安全狀態。

滲透和欺騙

...

回顧壹下計算機網絡的知識,數據是以小幀的形式在網絡上傳輸的。這些幀通過壹個叫做網絡驅動的特殊程序進行整形,然後通過網卡發送到網絡,再通過網線到達目的機器,在目的機器的壹端進行相反的過程。接收機器的以太網捕獲這些幀,告訴操作系統幀已經到達,然後存儲它們。在這個傳輸和接收的過程中,您可以使用嗅探器來捕獲數據包。作為前端開發人員,通常會捕獲應用層的HTTP/HTTPS包。

1.2 HTTP/HTTPS數據包捕獲原理

HTTP/HTTPS是應用層使用的通信協議,常見的應用層架構是客戶端-服務器架構。

運行在不同終端系統上的客戶端程序和服務器程序如何相互通信?實際上,就操作系統而言,進行通信的其實是進程而不是程序,進程可以看作是運行在端系統的程序。

在web應用程序中,客戶端瀏覽器進程與服務器進程交換消息。

瀏覽器進程需要知道接收進程的主機地址和目的主機中定義的接收進程的標識符,即目的端口。

大多數應用程序由通信進程對組成,每對中的兩個進程互相發送消息。該進程通過壹個名為socket的軟件接口向網絡發送消息,並從網絡接收消息。

進程可以比作房子,它的插座可以是它的門,插座是應用層和傳輸層之間的端口。

知道了兩個進程之間的通信流,我們如何捕捉包呢?舉壹個生活中的例子,小明暗戀小文,於是寫了壹封情書,但是他有點害羞,讓小文的好朋友小華幫他把情書投遞了。這時,小華可以負責小文和小明之間情書的傳遞。作為中間人,她可以偷偷查看他們情書的內容。

其思路是設置壹個中間人進程負責抓取數據包,目標進程之間的每個會話在轉發前都與中間人進程進行通信。

1.2.1 HTTP數據包捕獲原理

In weinre://test

重新訪問手機上的juejin.cn網站,然後打開weinre看到以下內容。綠色表示遠程連接成功。