『壹』 前端抓手機抓包可以看頁面樣式嗎
時隔 3 年，重新接觸了移動端 h5 頁面開發，上一次還是大四實習。這一次是 hybrid 開發，涉及到 h5 頁面與原生 app 的交互，h5 頁面需要與原生打通登錄態，以及調用原生app 的介面，比如調用原生相機進行二維碼掃描。跟微信小程序開發不同，本地開發時微信有提供微信開發者工具，可以本地模擬調用而我這邊需要每次都打包靜態文件，上傳伺服器才能調試，非常麻煩。
能不能在原生 app 載入線上 h5 時，跑本地的代碼呢？答案是可以的，通過抓包工具比如 whistle 就可以做到攔截線上頁面請求數據，再響應本地代碼，本文主要講述抓包的原理和抓包工具 whistle 使用。
1. 抓包的原理
1.1 什麼是抓包？
抓包就是將網路傳輸發送與接收的數據包進行截獲、重發、編輯、轉存等操作，通過抓包可以：
分析網路問題
業務分析
分析網路信息流通量
網路大數據金融風險控制
探測企圖入侵網路的攻擊
探測由內部和外部的用戶濫用網路資源
探測網路入侵後的影響
監測鏈接互讓此聯網寬頻流量
監測網路使用流量（包括內部用戶，外部用戶和系統）
監測互聯網和用戶電腦的安全狀態
滲透與欺騙
...
回顧下計算機網路知識，數據在網路上是以很小的幀的單位傳輸的，幀通過特定的稱為網路驅動程序的程序進行成型，然後通過網卡發送到網線上，通過網線到達目的機器，在目的機器的一端執行相反的過程。接收端機器的乙太網捕獲到這些幀，並告訴操作系統幀已到達，然後對其進行存儲。在這個傳輸和接收的過程，就可以使用抓包工具（Sniffers）進行抓包，作為前端開發者，通常是抓取應用層的 HTTP/HTTPS 的包。
1.2 HTTP/HTTPS 抓包原理
HTTP/HTTPS 是應用層使用的通信協議，常見的應用層體系結構是客戶端-伺服器體系。
對運行在不同端系統上的客戶端程序和服務端程序是如何互相通信的么？實際上，在操作系統上的術語中，進行通信的實際上是進程而不是程序，一個進程可以被認為是運行在端系統中的一個程序。
在 web 應用程序中，一個客戶瀏覽器進程與一台伺服器進程進行會話交換報文。
瀏覽器進程需要知道接收進程的主機地址，以及定義在目的主機中的接收進程的標識符，也就是目的埠。
多數應用程序由通信進程對組成，每對中的兩個進程互相發送報文。進程通過一個稱為套接字的軟體介面向網路發送報文和從網路接收報文。
進程可以類比一座房子，而它的套接字可以是它的門，套接字是應用層與運輸層之間的埠。
知道了兩個進程的通信流程，我們要怎麼抓包呢？舉一個生活中的例子，小明暗戀小雯，於是他寫了一封情笑缺書，但他有點害羞，找了小雯的好朋友小花幫忙傳遞情書。這個時候，小花可以負責小雯與小明之間的情書傳遞，作為中間人，她可以偷偷查看他們的情書內容。
思路就是設置一個中間人進程負責抓包，每次目標進程之間的會話都先與中間人進程通信，再進行轉發。
1.2.1 HTTP 抓包原理
在 http 標准中，沒有對通信端身份驗證的標准。對於伺服器來說，它接收的 HTTP 請求報文只要格式符合規范碰滑辯，就發送響應報文。
對於客戶端來說也是如此，它無法校驗伺服器的身份，比如它連接的 http://www.jecyu.com 的主機，但由於中間節點的存在，最終連接的可能是 http://www.jerry.com 的主機。
因此，對於 HTTP 抓包，無需做過多的處理，只需要讓中間人負責轉發客戶端和服務端的數據包。
1.2.2 HTTPS 抓包原理
HTTP 是明文傳輸，容易受到中間人攻擊，不安全。
HTTPS 語義仍然是 HTTP，只不過是在 HTTP 協議棧中 http 與 tcp 之間插入安全層 SSL/TSL。
安全層採用對稱加密的方式加密傳輸數據和非對稱加密的方式來傳輸對稱密鑰，解決 http 數據沒有加密、無法驗證身份、數據容易纂改三個核心問題。
HTTP + 加密 + 認證 + 完整性保護 = HTTPS
其中驗證身份問題是通過驗證伺服器的證書來實現的，證書是第三方組織（CA 證書簽發機構）使用數字簽名技術管理的，包括創建證書、存儲證書、更新證書、撤銷證書。
瀏覽器連接至一個 HTTPS 網站，伺服器發送的不僅僅只是伺服器實體證書，而是一個證書鏈，但不包含根證書，根證書會被內嵌在 Windows, Linux, macOS, Android, iOS 這些操作系統里。
其中校驗證書分為兩步，證書的簽發者校驗和伺服器實體證書校驗
1、證書鏈校驗：
1.1 瀏覽器從伺服器實體證書的上一級證書（比如 B 證書）獲取公鑰，用來校驗伺服器實體證書的簽名（簽名是通過 CA 機構的私鑰簽名的），校驗成功則繼續，否則證書校驗失敗。
1.2 瀏覽器從 B 證書的上一級證書（比如 C 證書）獲取公鑰，用來校驗 B 證書的簽名，
校驗成功則繼續，否則證書校驗失敗。
1.3 瀏覽器迭代校驗每張證書的簽名，最後會找到自簽名的根證書（簽發者和使用者是同一個人），由於瀏覽器已經集成了根證書，可以充分信任根證書的公鑰，完成最後的簽名。
2、伺服器實體證書校驗：訪問的域名信息是否與證書一致、日期、證書擴展校驗等。
了解完證書校驗後，我們來看看具體的 https 通信流程：
首先是 tcp 的三次握手建立連接
接著是非對稱加密的握手過程
client 發送隨機數 random1 + 支持的加密演算法集合
server 收到信息，返回選擇的一個加密演算法+ 證書 （包含S_公鑰） + random2
client 驗證證書有效性，並用 random1 + random2 生成 pre-master-secure，通過服務端公鑰加密發送給 server
server 收到 pre-master-secure，根據約定的演算法使用S_私鑰對 pre-master-secure 解密，
然後用加密演算法生成 master-secure（對稱加密的密鑰），然後發送給 client
client 收到生成的 master-secure，對稱加密密鑰傳輸完畢
最後，就可以使用 master-secure 進行真正的數據對稱加密傳輸。
中間人想要抓包，需在 HTTPS 加密通信之前：
截取客戶端發送的包含證書的報文，偽裝成服務端，把自己的證書發給客戶端，然後拿到【客戶端返回的包含對稱加密通信密鑰的報文】，生成中間人與客戶端對稱加密的密鑰。
同樣偽裝成客戶端，以服務端自己的非對稱公鑰加密【客戶端返回的包含對稱加密通信密鑰的報文】發給服務端，獲得服務端生成的對稱加密密鑰。
這樣一來，加密通信建立完成，而中間人拿到了通信的數據密鑰，可以查看、修改 HTTPS 的通信報文。
這里客戶端與中間人通信、中間人與服務端通信，都是正常建立了 HTTPS 加密連接的。
其中很重要的一步是瀏覽器的根證書校驗，CA 機構不可能隨便給一個中間人簽發不屬於它的域名證書，也就不在客戶端的操作系統上了，因此只能把中間人的根證書，導入到客戶端的操作系統了，以此完成建立加密通信時對中間人證書的驗證。
1.3 電腦如何抓手機的包
要想通過電腦端獲取手機 Web 應用的數據包，根據前面所學，就需要中間人策略。
PC 端建立一個伺服器中間人進程，偽裝為 web 應用的目標伺服器。手機端 web 應用發送的請求數據先經過中間人，中間人進行攔截處理再發送給目標伺服器。反過來，目標伺服器發送的數據包先通過中間人，再由中間人響應給瀏覽器客戶端。
這里要注意的是，無論是個人電腦PC，還是移動端手機，都需要接入互聯網網路，可以相互找到對方才能建立通信。
一般對開發來說，個人電腦本地起的伺服器進程，在公網上是訪問不到的。一般是無線區域網，個人電腦與手機端連接同一個路由器發出的 Wi-Fi，就可以相互通信。
具體步驟：
在 PC 電腦本地起一個伺服器進程，監聽一個埠比如 8899
在手機上連接同一個區域網，配置網路代理，指向 PC 端的 IP 地址和 8899 埠
這樣一來，手機上所有的網路通信都會被先轉發到 PC 端的 8899 埠，就可以對數據包進行分析處理
拿訪問 youtuBe 來說，比如電腦已經使用【伺服器軟體】成功訪問，此時只要手機配置代理指向電腦 ip 地址和指定埠，手機就可以同樣訪問 youtuBe了。
2. 抓包工具 whistle
2.1 whistle 是什麼
Whistle 是基於 Node 實現的跨平台抓包免費調試工具，其主要特點：
1、完全跨平台：支持 Mac、Windows 等桌面系統，且支持服務端等命令行系統
2、功能強大：
支持作為 HTTP、HTTPS、SOCKS 代理及反向代理
支持抓包及修改 HTTP、HTTPS、HTTP2、WebSocket、TCP 請求
支持重放及構造 HTTP、HTTPS、HTTP2、WebSocket、TCP 請求
支持設置上游代理、PAC 腳本、Hosts、延遲（限速）請求響應等
支持查看遠程頁面的 console 日誌及 DOM 節點
支持用 Node 開發插件擴展功能，也可以作為獨立 npm 包引用
3、操作簡單
直接通過瀏覽器查看抓包、修改請求
所有修改操作都可以通過配置方式實現（類似系統 Hosts），並支持分組管理
項目可以自帶代理規則並一鍵配置到本地 Whistle 代理，也可以通過定製插件簡化操作
如何快速使用 whistle
先安裝 node，建議用 nvm 管理
全局安裝 whistle
1
npm i -g whistle & w2 start
安裝後，可以在電腦上設置全局代理，代理的埠為 8899.
1
2
3
w2 proxy // 設置全局代理
w2 proxy off // 關閉全局代理
就可以通過瀏覽器訪問 http://127.0.0.1:8899/ 查看抓包、修改請求等。
如果你不想使用全局代理，就可以安裝 SwitchyOmega 插件，按需對某些網站設置 whistle 代理。
選擇 Whistle 代理
設置 Whistle 代理
2.2 whistle 可以做的事情
whistle 可以做的事情很多，以下是官網圖：
一些例子配置如下圖所示：
3. whistle 實戰案例
3.1 原生 app 載入 PC本地代碼開發
在原生 app 上已經通過 h5 域名載入了 web 頁面，但是本地開發時不想每次都走流水線或本地打包上傳代碼。
需要把原生 app 的請求代理到本地伺服器上來，前提條件是 wifi 手機與電腦可相互訪問，也就是前面提到的電腦抓 pc 的包。
因為我的 web 服務端是 https 應用，因此需要下載 whistle 提供的根證書，手動導入到手機上。
點擊 HTTPS 菜單，然後使用手機掃描二維碼，使用手機瀏覽器打開即可下載，在手機證書中設置進行導入並且設置信任。
此時，再在手機上配置代理指向 PC 電腦的 IP和 whistle 監聽的埠即可在電腦上截獲數據包。
我本地webpack 啟動的伺服器應用訪問地址為：xxx.xxx.xxx.xxx:8080
whistle 的配置規則：
1
2
3
4
5
6
7
8
9
# Rules
# 訪問首頁走本地
jecyu.com/webs/short-transport http://xxx.xxx.xxx.xxx:8080?deptCode=755DL # 首頁路徑
# 後續的請求都使用本地代碼
jecyu.com http://xxx.xxx.xxx.xxx:8080?deptCode=755DL
其中試過在原生 app 訪問本地應用時出現錯誤「 webpack 會提示 invalid host header」，解決方案是在 devServer 配置添加即可：
1
2
3
4
5
devServer: {
allowedHosts: 'all',
}
至此，成功讓原生 app 訪問PC 端本地的開發代碼。
3.2 查看移動端的 DOM 樣式
Whistle 能夠通過內置的 Weinre 去實現查看移動端的 DOM 樣式，配置規則如下
1
2
3
# 設置 weinre
https://juejin.cn weinre://test
手機上重新訪問 juejin.cn 網站，然後打開 weinre 可以看到如下，綠色表示遠程連接成功
『貳』 如何通過wireshark進行抓包的分析
啟動wireshark後，選擇工具欄中的快捷鍵（紅色標記的按鈕）即可Start a new live capture。
主界面上也有一個interface list（如下圖紅色標記1），列出了系統中安裝的網卡，選擇其中一個可以接收數據的的網卡也可以開始抓包。
在啟動時候也許會遇到這樣的問題：彈出一個對話框說 NPF driver 沒有啟動，無法抓包。在win7或Vista下找到C: \system\system32下的cmd.exe 以管理員身份運行，然後輸入 net start npf，啟動NPf服務。
重新啟動wireshark就可以抓包了。
抓包之前也可以做一些設置，如上紅色圖標記2，點擊後進入設置對話框，具體設置如下：
Interface：指定在哪個介面（網卡）上抓包（系統會自動選擇一塊網卡）。
Limit each packet：限制每個包的大小，預設情況不限制。
Capture packets in promiscuous mode：是否打開混雜模式。如果打開，抓 取所有的數據包。一般情況下只需要監聽本機收到或者發出的包，因此應該關閉這個選項。
Filter：過濾器。只抓取滿足過濾規則的包。
File：可輸入文件名稱將抓到的包寫到指定的文件中。
Use ring buffer： 是否使用循環緩沖。預設情況下不使用，即一直抓包。循環緩沖只有在寫文件的時候才有效。如果使用了循環緩沖，還需要設置文件的數目，文件多大時回卷。
Update list of packets in real time：如果復選框被選中，可以使每個數據包在被截獲時就實時顯示出來，而不是在嗅探過程結束之後才顯示所有截獲的數據包。
單擊「OK」按鈕開始抓包，系統顯示出接收的不同數據包的統計信息，單擊「Stop」按鈕停止抓包後，所抓包的分析結果顯示在面板中，如下圖所示：
為了使抓取的包更有針對性，在抓包之前，開啟了QQ的視頻聊天，因為QQ視頻所使用的是UDP協議，所以抓取的包大部分是採用UDP協議的包。
3、對抓包結果的說明
wireshark的抓包結果整個窗口被分成三部分：最上面為數據包列表，用來顯示截獲的每個數據包的總結性信息；中間為協議樹，用來顯示選定的數據包所屬的協議信息；最下邊是以十六進制形式表示的數據包內容，用來顯示數據包在物理層上傳輸時的最終形式。
使用wireshark可以很方便地對截獲的數據包進行分析，包括該數據包的源地址、目的地址、所屬協議等。
上圖的數據包列表中，第一列是編號（如第1個包），第二列是截取時間（0.000000），第三列source是源地址（115.155.39.93），第四列destination是目的地址（115.155.39.112），第五列protocol是這個包使用的協議（這里是UDP協議），第六列info是一些其它的信息，包括源埠號和目的埠號（源埠：58459，目的埠：54062）。
中間的是協議樹，如下圖：
通過此協議樹可以得到被截獲數據包的更多信息，如主機的MAC地址（Ethernet II）、IP地址（Internet protocol）、UDP埠號（user datagram protocol）以及UDP協議的具體內容（data）。
最下面是以十六進制顯示的數據包的具體內容，如圖：
這是被截獲的數據包在物理媒體上傳輸時的最終形式，當在協議樹中選中某行時，與其對應的十六進制代碼同樣會被選中，這樣就可以很方便的對各種協議的數據包進行分析。
4、驗證網路位元組序
網路上的數據流是位元組流，對於一個多位元組數值（比如十進制1014 = 0x03 f6），在進行網路傳輸的時候，先傳遞哪個位元組，即先傳遞高位「03」還是先傳遞低位「f6」。 也就是說，當接收端收到第一個位元組的時候，它是將這個位元組作為高位還是低位來處理。
下面通過截圖具體說明：
最下面是物理媒體上傳輸的位元組流的最終形式，都是16進製表示，發送時按順序先發送00 23 54 c3 …00 03 f6 …接收時也按此順序接收位元組。
選中total length：1014， 它的十六進製表示是0x03f6， 從下面的藍色選中區域可以看到，03在前面，f6在後面，即高位元組數據在低地址，低位元組數據在高地址（圖中地址從上到下從左到右依次遞增），所以可知，網路位元組序採用的是大端模式。
『叄』 怎麼抓包網頁發給手機的驗證碼
抓不到，因為驗證碼是伺服器端發給手機的，不是頁面端。PC抓包可以試試基於進程抓包的軟體QPA
『肆』 網路驗證轉本地驗證
我剛找到一個教程，發給你，一起學習。
http://www.52pojie.cn/thread-169854-1-1.html