Egg.js學習與實戰系列 · Post請求`csrf token`問題

在使用axios請求egg.js封裝的post接口時出現missing csrf token 或 invalid csrf token。踩過坑的新手估計不在少數，本篇記錄一下解決方法。

問題原因

• 引用一下官網的Web 安全概念：

Web 應用中存在很多安全風險，這些風險會被黑客利用，輕則篡改網頁內容，重則竊取網站內部數據，更為嚴重的則是在網頁中植入惡意代碼，使得用戶受到侵害。

常見的安全漏洞如下：

• XSS 攻擊：對 Web 頁面注入腳本，使用 JavaScript 竊取用戶信息，誘導用戶操作。
• CSRF 攻擊：偽造用戶請求向網站發起惡意請求。
• 釣魚攻擊：利用網站的跳轉鏈接或者圖片制造釣魚陷阱。
• HTTP參數污染：利用對參數格式驗證的不完善，對服務器進行參數注入攻擊。
• 遠程代碼執行：用戶通過瀏覽器提交執行命令，由於服務器端沒有針對執行函數做過濾，導致在沒有指定絕對路徑的情況下就執行命令。

對於這些風險，Egg框架本身內置了豐富的解決方案。回歸本題，其中出現missing csrf token就是因為CSRF 的防御方案。

解決方案如下：

關閉配置（不推薦）

// config/config.default.js

exports.security = {
  csrf: {
    enable: false,
  },
};

注意： 框架的安全插件是默認開啟的。除非清楚的確認后果，否則不建議擅自關閉安全插件提供的功能。

配置請求headers

• 修改config中security的配置

// config/config.default.js

exports.security = {
  csrf: {
    enable: true,
    headerName: 'token',
  },
};

解釋： 通過 header 的 token 字段傳遞 CSRF token，默認字段為 x-csrf-token。

• axios請求配置：

// 例：

async function getData(data) {
  try {
    let res = await axios({
      url: "http://127.0.0.1:7001/api/test/list",
      method: 'POST',
      data,
      headers: {
        "token": 'xxxxxxxxx',
      }
    });
    console.log(res.data)
  } catch (e) {
    console.log(e)
  }
}

• 在Node環境請求post接口，沒有Cookie信息，所以還需要在請求的headers中加上Cookie，不然會報錯invalid csrf token。代碼如下：

headers: {
    "token": 'xxxxxxxxx',
    "Cookie": 'csrfToken=xxxxxxxxx',
}

參考文檔：

• https://eggjs.org/zh-cn/core/security.html

---

歡迎訪問：個人博客地址