使用 Chrome NetLog 解析隱藏在 DevTools 中的 Header 資訊 | Daily Oops!
Daily Oops

Daily Oops!

March 2, 2019

使用 Chrome NetLog 解析隱藏在 DevTools 中的 Header 資訊

在檢視 DevTools 網路頁的 Headers 資訊時,有時後會顯示下面這行警告訊息:

Provisional headers are shown

這就代表有些敏感資訊被 DevTools 隱藏。舉例來說,CloudFront 有一套 基於 Signed Cookie 的驗證系統,某些需要登入後才能存取的資源,比如 電子書、影音就需要用這種方式來防止外流。不過有做 DRM 還是比較好啦,畢竟沒 DRM 你的檔案還是跟裸奔一樣啊!😆

該是 NetLog 登場的時刻

NetLog 顧名思義,是一套 Chromium Project 內建的網路事件記錄系統 (Network Logging System),因為我們需要拿取被 DevTools 隱藏的資訊,所以就要靠 NetLog 啦。有 Log 才能 Debug!

  1. 打開 chrome://net-export/,你應該會看到以下的介面
  2. 記得選擇第二項 Include cookies and credentials,這才是我們要的
  3. 點按鈕,選擇完 dump 位置後開始記錄網路事件。開始進行你要 Log 的操作,此時分頁開越少越好,輸出資料的雜訊不會那麼多比較好讀

用 NetLog Viewer 來打開 dump 出的 log 檔

那麼輸出的 JSON 檔要怎麼讀?Google 也幫你弄好了。

  1. 打開 NetLog Viewer
  2. 把剛剛輸出的 JSON 檔案,拖弋到視窗
  3. Bang!
  4. 點開左側的 Event,搜尋框輸入你要找的東西就可以了
  5. 剩下來就不說啦,搜尋你要的 Request 或 Cookie 鍵值,拉出你要的資訊,就和使用 DevTools 一樣

所以說,你要解析的敏感資訊是什麼呢?

光喜自得!