本系列文章所討論的 JavaScript 資安與逆向工程技術，旨在分享知識、探討防禦之道，並促進技術交流。
所有內容僅供學術研究與學習，請勿用於任何非法或不道德的行為。
讀者應對自己的行為負完全責任。尊重法律與道德規範是所有技術人員應共同遵守的準則。

本文同步發佈：https://nicklabs.cc/nodejs-fetch-network-request

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

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

為什麼需要透過 Node.js 來模擬請求？

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

安裝NodeJS環境

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

驗證是否安裝成功

MAC

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

Windows

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

NodeJS 模擬發送請求的方式

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

http/https

是 Node.js 內建的模組。

無需額外安裝

使用的是回呼函數模式無使用Promise

http2

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

不需要額外安裝

HTTP/2 相較於 HTTP/1.1 有明顯的效能提升

使用的是回呼函數模式無使用Promise

Fetch

與瀏覽器Fetch通用

使用 Promise 支援 async/await

Node 18版本之後即有內建

Axios

使用 Promise 支援 async/await

需要額外安裝套件

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

從Network取得Fetch請求程式碼

複製 NodeJS Fetch 程式碼

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

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

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

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

簡單包裝 Fetch

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

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等待執行成功後將返回值輸出。

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

Request Headers 參數說明

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

User-Agent

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

Cookie

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

Authorization

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

Referer

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