ESLint 安全外掛 eslint-plugin-security：為 Node.js 專案進行資安檢查，攔截潛在漏洞

#ESLint #Node.js #資安防護 #靜態分析 #外掛插件

梨子2026-09-24

ESLint 進階安全外掛 eslint-plugin-security：為專案築起資安防護網

Introduction

介紹如何為專案加入 eslint-plugin-security，在程式碼靜態檢查中築起安全性護欄，自動揪出 ReDoS、物件注入與危險調用等潛在資安漏洞。

想要探索更多高效率前端與工程化工具？歡迎瀏覽本站技術專區獲取最新實戰技巧！

文章目錄

INDEX

START

在上篇 ESLint 工程師必備外掛：第一道程式碼品質檢測中，我們探討了如何透過 ESLint 築起程式碼品質的第一道防線，一存檔就能幫你過濾掉未使用的變數、語法錯誤與格式混亂。

但當程式碼格式整整齊齊、完全符合 Linter 規範時，它就真的「安全」了嗎？

傳統的 ESLint 核心規則主要聚焦在代碼風格（Style）與常見語法瑕疵（Syntax Errors）。一段寫得乾淨整齊、通過所有測試的 JavaScript 程式碼，骨子裡完全可能藏著容易引爆伺服器的 ReDoS 正則回溯地雷、未經防護的動態物件注入，或是潛在的命令列執行風險。

今天介紹的第二款ESLINT外掛，就是專門為此而生的安全檢查：eslint-plugin-security。

什麼是 eslint-plugin-security？

eslint-plugin-security

RESOURCE INFO

GitHub github.com/eslint-community/eslint-plugin-security

核心功能專門針對 Node.js 與 JavaScript 程式碼進行靜態安全審查的 ESLint 外掛。

社群指標

2.4k Stars113 Forks

授權條款

Apache-2.0

＊社群指標數據為文章發布當下擷取，最新數值請以網站為準。

eslint-plugin-security 是一套由 ESLint Community 維護的靜態安全分析插件（Linter Security Plugin）。

它可以辨識出 Node.js 與 JavaScript 常見的危險寫法與潛在漏洞模式。

最近在維護自己的 Vue (Nuxt 3) 專案時，回想在開發初期，我主要將精力著重在網站功能的開發與實現，因此當時只簡單配置了基礎的 ESLint 與 Prettier 來維護程式碼品質與格式。

然而隨著專案漸趨成熟，在深入檢視資安防禦時才發現，當初簡單配置的 ESLint 主要著重在「語法與格式」，針對「資訊安全漏洞」的安全設定其實仍有許多不足，因而發現了 eslint-plugin-security 插件。

本文將依據我自己在 Vue 專案中的實務設定為大家分享：

專案本來有的檢查機制
為什麼我還需要加入 eslint-plugin-security？
如何進行設定說明

一、專案本來有的檢查機制

在未加入資安套件前，我在我的程式專案（以 Nuxt 3 / Vue 3 / TypeScript 為例）已經具備以下四層常見檢查：

語法與基本邏輯 (eslint:recommended)：檢查未宣告變數、未使用的變數或明顯的語法錯誤。
Vue 框架規範 (plugin:vue/vue3-recommended)：確保 Vue 元件結構、模板語法與生命週期符合官方最佳實踐。
型別安全 (@typescript-eslint/recommended)：透過 TypeScript 型別系統防止 undefined 錯誤或型別不匹配。
程式碼格式一致性 (eslint-plugin-prettier)：統一團隊的縮排、單雙引號與換行風格。

➜ 本來檢查的重點：著重在「程式碼寫得對不對、好不好看、有沒有型別 Bug」。

WHY SECURITY

二、為什麼加入 eslint-plugin-security？

從 npm trends 的數據可以看出，eslint-plugin-security 的下載量呈現持續穩定上升的趨勢，顯示出越來越多開發者與團隊開始重視靜態程式碼的資安檢查。

eslint-plugin-security npm trends 下載量趨勢 — npm trends 數據顯示：eslint-plugin-security 每週下載量穩定持續攀升 · 資料來源

「語法完全正確、型別完全符合的程式碼，不代表安全無虞。」

原本的 ESLint 檢查無法識別許多專門針對 Node.js 與 JavaScript 的靜態安全漏洞（SAST）。特別是現代專案大多為全棧架構（例如 Nuxt Nitro / Next.js Server API），伺服器端會直接處理用戶傳入的參數與資料庫操作，更需要專門的資安防禦機制。

eslint-plugin-security 補足了以下常見的資安防護漏洞：

1. 防範 ReDoS (正規表達式阻斷服務攻擊)

原因：寫法完全合法的 Regex，如果包含災難性回溯風險，攻擊者傳入特定字串就會讓 CPU 瞬間爆滿，導致整台 Node.js Server 卡死。
預防規則：detect-unsafe-regex

2. 物件屬性注入 (Object Injection)

原因：當程式碼直接使用前端傳來的動態 key 來存取物件（如 obj[req.query.key]），可能遭攻擊者利用讀取敏感變數或觸發原型鏈污染 (Prototype Pollution)。
預防規則：detect-object-injection

3. 動態載入與路徑穿越 (Path Traversal)

原因：動態使用變數進行 require(userInput) 或 fs.readFile(userInput)，可能導致伺服器上的 .env 或系統檔案被非法讀取。
預防規則：detect-non-literal-require / detect-non-literal-fs-filename

4. 不安全的時間差比較 (Timing Attacks)

原因：在比對 API Key 或密碼 Hash 時使用 ===，會因字串比對時間差異被攻擊者推算出金鑰。
預防規則：detect-possible-timing-attacks

常見靜態資安風險術語 / SECURITY GLOSSARY

ReDoS (Regular Expression Denial of Service)：正則表達式阻斷服務攻擊。利用正則引擎在面對惡意構造字串時的災難性回溯計算，耗盡伺服器 CPU 資源。
物件屬性注入 (Object Injection)：透過外部未經過濾的鍵值存取 JavaScript 物件，可能導致存取未授權屬性或污染原型鏈（Prototype Pollution）。
路徑穿越 (Path Traversal)：使用未經驗證的變數拼接檔案路徑，可能導致敏感檔案（如 .env、私密金鑰）遭非法讀取。
時序攻擊 (Timing Attack)：攻擊者透過比對驗證時所需的時間微小差異，逐位元推敲出私密金鑰或密碼雜湊值。

我的專案需要嗎？適用情境與決策建議

eslint-plugin-security 所提供的防護重點，主要集中在伺服器端處理外部輸入與敏感操作的場景。你可以根據自己的專案類型來評估是否需要優先導入：

純前端 / 靜態展示頁面：若專案沒有 Server API，僅為單純的 SPA 或 SSG 靜態頁面，這套件能發揮的防禦效益相對有限。
全棧架構 / 後端 API：若專案採用 Nuxt Nitro、Next.js Server API，或是任何會接觸到使用者輸入、資料庫查詢、檔案讀寫或機密資訊比對的 Node.js 專案，導入這個套件的價值就顯著提高。

總結定位：特別是在全棧架構下，只要伺服器端會直接處理外部輸入，這類靜態資安檢查就不只是「加分」，而是應該視為基礎防衛不可或缺的一環。

CONFIG

三、如何設定與程式碼簡單說明

📌 前提條件

eslint-plugin-security 是 ESLint 的擴充外掛（Plugin），因此以下步驟基於您的專案已經安裝並配置好基礎 ESLint 環境。

STEP 1

安裝套件

透過 npm / pnpm / yarn 安裝套件至開發依賴：

Terminal

# npm
npm install -D eslint-plugin-security

# pnpm
pnpm add -D eslint-plugin-security

# yarn
yarn add -D eslint-plugin-security

STEP 2

在 `eslint.config.mjs` 中引進與設定

由於每個人的專案架構（例如純 Vue、Nuxt 3、Next.js 或 React）與 ESLint 設定檔內容都不同，最簡單的做法是直接將你專案現有的 eslint.config.mjs 提供給 AI，請 AI 幫忙整合。

在採用全域 Flat Config 格式（eslint.config.mjs）的現代專案中，設定步驟參考如下：

eslint.config.mjs

import pluginSecurity from 'eslint-plugin-security';

export default [
  // 1. 引入官方推薦的安全檢查配置
  pluginSecurity.configs.recommended,

  // 2. 自訂規則微調（選填）
  {
    rules: {
      // 若 detect-object-injection 假警報較多，可調降為 warn 或局部關閉
      'security/detect-object-injection': 'warn',
    },
  },
];

STEP 3

設定完後執行 ESLint

完成設定後，即可透過命令列執行檢查，掃描專案中是否存在潛在的資安問題：

Terminal

# 執行全域 ESLint 檢查
npx eslint .

# 或執行 package.json 中配置的 lint 指令
npm run lint

即時反饋：若編輯器有安裝 ESLint 擴充套件（如 VS Code ESLint Extension），在開發時撰寫到不安全的程式碼（如 unsafe regex 或未驗證的動態 key 存取），IDE 畫面上就會立刻出現紅字或黃字波浪線警示。
自動化防禦：建議將 npm run lint 整合至專案的 Git Pre-commit 鉤子或 CI/CD 流程中，確保資安風險在程式碼提交前就被阻擋。

結果驗證

修改完 eslint.config.mjs 後，如果你是在 IDE（如 VS Code）中開啟專案，建議手動重啟 ESLint 服務以讓新規則立刻生效：

VS Code 重啟 ESLint 伺服器命令 — 在 VS Code 命令列執行「ESLint: Restart ESLint Server」讓新規則即時生效

按下快捷鍵開啟命令列（macOS: Cmd + Shift + P / Windows: Ctrl + Shift + P）。
輸入並執行 ESLint: Restart ESLint Server。
重啟後開啟 IDE 下方的 Problems（問題） 面板，就能看到系統即時捕捉到的資安告警訊息！

VS Code Problems 面板資安警示截圖 — VS Code Problems 面板即時捕捉到的潛在資安漏洞警示

接著你就能進一步針對這些問題去做修改程式碼等改寫。

延伸閱讀與社群資源

官方與進階參考資源

[eslint-plugin-security 官方 GitHub 倉庫 ↗] [github.com]
[完整外掛規則清單 (Rules Documentation) ↗] [github.com]
[OWASP Top 10 安全風險指南 ↗] [owasp.org]
[Node.js 安全最佳實踐指南 ↗] [nodejs.org]

結語

本來有的檢查：為程式碼的品質與格式打好基礎。
加入 Security 外掛：為專案（特別是 Server 端）築起資安防線。
設定簡單：只需要幾分鐘就能將 eslint.config.mjs 引入並設定推薦配置，在 IDE 與 CI 流程中自動預防隱形資安風險！

花個幾分鐘把資安檢查設定好，就像是替專案預先裝上防禦門，寫扣時心裡也踏實許多！