鐵人賽 Day 4 使用 NodeJS 模擬發送 Network 攔截的請求

鐵人賽 Day 4 使用 NodeJS 模擬發送 Network 攔截的請求
鐵人賽 Day 4 使用 NodeJS 模擬發送 Network 攔截的請求

本系列文章所討論的 JavaScript 資安與逆向工程技術,旨在分享知識、探討防禦之道,並促進技術交流。

所有內容僅供學術研究與學習,請勿用於任何非法或不道德的行為。

讀者應對自己的行為負完全責任。尊重法律與道德規範是所有技術人員應共同遵守的準則。

 

在瀏覽器中觀察請求只是第一步,真正的挑戰是如何在瀏覽器外重現這些請求。

本文將帶你用 Node.js 模擬 NetWork 捕捉到的請求,並解析 Headers 與 Cookie 的細節,讓你能在模擬的過程中靈活操作並驗證請求結果。

能模擬發送請求的方式眾多語言都可以達成,因為NodeJS環境與瀏覽器JavaScript環境類似,能讓讀者不用理解其他語言的程式碼。而且可以將模擬的請求寫成腳本快速驗證及方便修改參數及測試。

可以參考 nodeJS 官網的安裝教學 https://nodejs.org/zh-tw/download

在Terminal輸入 node -v 有看到版本號及安裝成功。

在CMD或PowerShell 輸入 node -v 有看到版本號及安裝成功。

1.jpg

在NodeJS中有多種發送請求的方式。

是 Node.js 內建的模組。

  • 無需額外安裝
  • 使用的是回呼函數模式無使用Promise

是 Node.js 內建的模組,用來處理 HTTP/2 的請求和回應。

  • 不需要額外安裝
  • HTTP/2 相較於 HTTP/1.1 有明顯的效能提升
  • 使用的是回呼函數模式無使用Promise
  • 與瀏覽器Fetch通用
  • 使用 Promise 支援 async/await
  • Node 18版本之後即有內建
  • 使用 Promise 支援 async/await
  • 需要額外安裝套件

本系列文章會使用Fetch進行模擬請求操作,因為可以從Network複製相對應的Fetch程式碼,若需要用其他方式模擬(Python)需要自行改寫,或利用網路上Curl的轉換工具進行程式碼轉換即可。

在Network中Fetch請求點下右鍵 > Copy > Copy as fetch (Node.js) 即可複製NodeJS的程式碼。

2.jpg

這樣就能將請求的程式碼放到檔案當中。

fetch("https://xxxxxxxxxx", {
    "headers": {
        "accept": "*/*",
        "accept-language": "zh-TW,zh;q=0.9,en;q=0.8,en-US;q=0.7",
        "cache-control": "no-cache",
        "pragma": "no-cache",
        "priority": "u=1, i",
        "sec-ch-ua": "\"Not;A=Brand\";v=\"99\", \"Google Chrome\";v=\"139\", \"Chromium\";v=\"139\"",
        "sec-ch-ua-mobile": "?0",
        "sec-ch-ua-platform": "\"macOS\"",
        "sec-fetch-dest": "empty",
        "sec-fetch-mode": "cors",
        "sec-fetch-site": "same-origin",
        "cookie": "session=xxxxxxxxxx;",
        "Referer": "https://xxxxxxxxxx"
    },
    "body": null,
    "method": "GET"
});

存檔(4-1.js)後在Terminal使用node即可執行。

node 4-1.js
3.jpg

但是會發現執行成功但是沒有任何的結果輸出也沒有錯誤訊息,是因為這段代碼只是發送請求,對於結果的回傳沒有顯示。

我們這邊可以將程式碼改寫一下。

const run = async() => {
    const response = await fetch("https://xxxxxxxxxx", {
        "headers": {
            "accept": "*/*",
            "accept-language": "zh-TW,zh;q=0.9,en;q=0.8,en-US;q=0.7",
            "cache-control": "no-cache",
            "pragma": "no-cache",
            "priority": "u=1, i",
            "sec-ch-ua": "\"Not;A=Brand\";v=\"99\", \"Google Chrome\";v=\"139\", \"Chromium\";v=\"139\"",
            "sec-ch-ua-mobile": "?0",
            "sec-ch-ua-platform": "\"macOS\"",
            "sec-fetch-dest": "empty",
            "sec-fetch-mode": "cors",
            "sec-fetch-site": "same-origin",
            "cookie": "session=xxxxxxxxxx;",
            "Referer": "https://xxxxxxxxxx"
        },
        "body": null,
        "method": "GET"
    });

    console.log(await response.text())
}
run()

將Fetch包裝成函式並使用async/await等待執行成功後將返回值輸出。

4.jpg

這時就成功發送請求並輸出回傳結果。

 

最常使用的分別為User-Agent、Cookie、Authorization、Referer

這欄位是請求的用戶端身份訊息 如系統、瀏覽器版本...等,大多數網站會檢查這個欄位。

絕大多數網站的登入資訊SessionID在此,請勿輕易把Cookie內容給別人,後果會非常嚴重。

Bearer Token 通常為API Token驗證欄位。

表示這個請求是從哪一個頁面發出,某些網站也會檢查這個欄位。

作者頭像
Nick

擅長從前端的互動設計到後端的資料處理,都能親自規劃與實作。對我來說開發網站不只是完成功能,而是打造一個能被真正使用、體驗順暢的平台。我喜歡把複雜的技術轉化成簡單好懂的成果,並在這個過程中持續學習與挑戰自己。