怎麼透過 wireshark 抓取瀏覽器存取 Http2 的封包？

如何確認網頁是否支援 http2

plugins

chrome 瀏覽器可以透過安裝 HTTP/2 and SPDY indicator 這個 plugins ，來觀察目前正在瀏覽的網站是否支援 http2 。

如果當前瀏覽頁面啟用了 HTTP2 則為藍色，如果啟用了 SPDY 則為綠色。

可以看一下我最常瀏覽的網頁他是支援什麼樣的 protocal

當我瀏覽 Kubernetes.io 的時候可以看到右上角是藍色的閃電表示支援 http2

那今天什麼網頁支援 SPDY 呢？

當我瀏覽 google 首頁的時候發現它支援 SPDY protocal

dev mod

可以透過 chrome 的開發者模式觀察請求是過過什麼樣的協定去進行傳輸的。

當我們開啟 dev mod 的時候存取 github 的頁面可以觀察到有許多的請求是透過http2完成的，如下圖所示。

從圖中我們可以觀察到有http/1.1的請求也有 h2的請求，這兩種請求分別代表著前端網頁透過 http1.1 以及基於 tls 的 http2 請求。

蝦米 wireshark 抓不到 http2 的封包

抓不到 http2 封包

先來看一張圖，是我設定 wireshark filter 只顯示 http2 的封包，並且同時存取 kubernetes.io 。

從上圖會發現….什麼資料都沒有，那怎麼會這樣子？

怎麼解決

原因出在瀏覽器存取服務的時候需要透過基於 TLS 的 Http2 protocal ，所有的資料都被加密了我們不能看到 Client server 之間到底溝通了什麼，解決的方法其實很簡單只要在瀏覽器 Chrome 設定 SSLKEYLOGFILE 就可以順利的從 Chrome 抓到 http2 封包了。

由於我的作業系統是 MACOS 這邊就示範 MACOS 怎麼在 Chrome 上啟動 SSLKEYLOGFILE。

建立keylogfile.log 文件，更改權限。讓 chrome 啟動時能寫入攜帶sslkeylogfile

mkdir ~/sslkeylogfile 
touch ~/sslkeylogfile/keylogfile.log
sudo chmod 777 ~/sslkeylogfile/keylogfile.log

設定環境變數

export SSLKEYLOGFILE=~/sslkeylogfile/keylogfile.log
echo "alias chrome=\"open -a 'Google Chrome'\"" >> ~/.zshrc
source ~/.zshrc

如果要實驗 HTTP2 的話需要從 terminal 開啟 Chrome

chrome

透過 terminal 啟動 chrome 的圖如下所示

可以看一下 sslkeylogfile 的資料，裡面寫什麼不是很重要 wireshark 看得懂就好xDDD

1
2
3
4
5
6
7
8
9


cat ~/sslkeylogfile/keylogfile.log                                 
CLIENT_HANDSHAKE_TRAFFIC_SECRET e379a0d9d454a5c80bf4d7b49dcbc6eb9055f07cda497306768b828b20380056 c0dc0b38f983aa5f1dd82f4b555c6be6195570622e90c956444938027e0dedc5
SERVER_HANDSHAKE_TRAFFIC_SECRET e379a0d9d454a5c80bf4d7b49dcbc6eb9055f07cda497306768b828b20380056 52ff297d7a0b1705bf6a876cbb307836ecc462455b9455d5eac606a1a6b1cac1
CLIENT_TRAFFIC_SECRET_0 e379a0d9d454a5c80bf4d7b49dcbc6eb9055f07cda497306768b828b20380056 ea654ba45d35cae4a0d81fa2eb3e795c930ea8e06caab92f4da992cba14c354b
SERVER_TRAFFIC_SECRET_0 e379a0d9d454a5c80bf4d7b49dcbc6eb9055f07cda497306768b828b20380056 ef0d144892cf974cbb9e8d6ddebf5bd80370951cbaf5cc1223e8c63084e1da20
EXPORTER_SECRET e379a0d9d454a5c80bf4d7b49dcbc6eb9055f07cda497306768b828b20380056 d4e350adc0738aea83d6035fe0a21792fccd1a317208b6f9af547ffa36ba8195
CLIENT_HANDSHAKE_TRAFFIC_SECRET f95d9c5cd50060635969f3a88c89c548a063e1fa74c8cdb59d3af8d55a7e4558 c27c5c111347c718a3875a1300fa7a7dc88bbe4229189d7e0f0b887a0c9ac8a0
SERVER_HANDSHAKE_TRAFFIC_SECRET f95d9c5cd50060635969f3a88c89c548a063e1fa74c8cdb59d3af8d55a7e4558 507c5b0b8040cf85364dd272cf7d26eff2072baee3b2ed32206bddba85a88bc0
...

設定wireshark

開啟 wireshark 後點選wireshark 選擇 Preferences 打開設定頁面，如下圖所示。

接著選擇 Protocols -> TLS -> (Pre)-Master-Secret log filename 把~/sslkeylogfile/keylogfile.log 放進去。

驗證 wireshark 抓取瀏覽器存取 http2 的封包

現在開啟 wireshark filter 輸入 http2 接著透過瀏覽器存取 github的網站，觀察 wireshark 是否能抓取到封包，如下圖所示。

從圖中看起來都能夠順利地抓到封包，後續會針對 http2 的欄位進一步分析與複習相關的概念。