[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"page-\u002Fblog\u002Ftech\u002Feslint-plugin-security":147,"searchResults":1089},[4],{"title":5,"path":6,"stem":7,"children":8,"description":146,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16},"Blog","\u002Fblog","blog",[9,30,44,68,112,136],{"title":10,"path":11,"stem":12,"children":13,"description":15,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16,"head":17},"最新文章","\u002Fblog\u002Fnews","blog\u002F0.news\u002F0.index",[14],{"title":10,"path":11,"stem":12,"description":15,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16},null,false,{"meta":18},[19,21,24,27],{"name":20,"content":10},"keywords",{"name":22,"content":23},"robots","index, follow",{"name":25,"content":26},"author","Annie",{"name":28,"content":29},"copyright","© 2024 RinTree",{"title":31,"path":32,"stem":33,"children":34,"description":15,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16,"head":37},"影劇推薦","\u002Fblog\u002Fdrama","blog\u002F2.drama\u002F0.index",[35],{"title":31,"path":32,"stem":33,"description":36,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16},"推薦您 Netflix 和 Disney+ 影劇小編愛好的好評清單。",{"meta":38},[39,40,41,43],{"name":20,"content":31},{"name":22,"content":23},{"name":25,"content":42},"爆米花鼠",{"name":28,"content":29},{"title":45,"path":46,"stem":47,"children":48,"description":15,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16,"head":61},"書籍分享","\u002Fblog\u002Fbook","blog\u002F3.book\u002F0.index",[49,51],{"title":45,"path":46,"stem":47,"description":50,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16},"推薦您好書與全台圖書館的免費可借閱電子書情報！",{"title":52,"path":53,"stem":54,"description":55,"publishedAt":56,"tags":57,"image":58,"score":15,"draft":16},"HyRead 電子書｜書籍推薦｜《不便利的便利店》暖心人生故事 推薦指數⭐⭐⭐⭐","\u002Fblog\u002Fbook\u002Fconvenience-store","blog\u002F3.book\u002F3.convenience-store","《不便利的便利店》以一家便利店為故事核心，是韓國年度最受歡迎的小說之一，銷量突破 70 萬冊，並獲選為 25 個城市的年度推薦好書。由金浩然著，目前已出版兩冊：《不便利的便利店》與《不便利的便利店 2》。","2025-01-17","HyRead，電子書，書籍推薦",{"src":59,"alt":60},"\u002Fcover\u002Fconvenience-store.png","HyRead 電子書 不便利的便利店",{"meta":62},[63,65,66,67],{"name":20,"content":64},"書籍，電子書",{"name":22,"content":23},{"name":25,"content":26},{"name":28,"content":29},{"title":69,"path":70,"stem":71,"children":72,"description":15,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16,"head":106},"科技生活","\u002Fblog\u002Ftech","blog\u002F4.tech\u002F0.index",[73,76,86,96],{"title":74,"path":70,"stem":71,"description":75,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16},"數位開發盒","關於程式開發、網路架站、SEO 等數位工具與心得的分享。",{"title":77,"path":78,"stem":79,"description":80,"publishedAt":81,"tags":82,"image":83,"score":15,"draft":16},"ESLint 工程師必備外掛：第一道程式碼品質檢測，一鍵清理舊程式碼，如何安裝與設定","\u002Fblog\u002Ftech\u002Feslint-first-line-of-defense","blog\u002F4.tech\u002F2.eslint-first-line-of-defense","探討 AI 開發時代為什麼更需要 ESLint，以及如何設定 ESLint 來作為程式碼品質的第一道防線。","2026-08-16","ESLint，AI，程式開發，Code Review，外掛插件",{"src":84,"alt":85},"\u002Fcover\u002Feslint.jpg","AI 寫 Code 忘記清理舊程式嗎？用 ESLint 築起專案第一道護欄，抓出潛在的程式碼地雷",{"title":87,"path":88,"stem":89,"description":90,"publishedAt":91,"tags":92,"image":93,"score":15,"draft":16},"ESLint 安全外掛 eslint-plugin-security：為 Node.js 專案進行資安檢查，攔截潛在漏洞","\u002Fblog\u002Ftech\u002Feslint-plugin-security","blog\u002F4.tech\u002F3.eslint-plugin-security","介紹如何為專案加入 eslint-plugin-security，在程式碼靜態檢查中築起安全性護欄，自動揪出 ReDoS、物件注入與危險調用等潛在資安漏洞。","2026-09-24","ESLint，Node.js，資安防護，靜態分析，外掛插件",{"src":94,"alt":95},"\u002Fcover\u002Feslint-plugin-security.jpg","ESLint 進階安全外掛 eslint-plugin-security：為專案築起資安防護網",{"title":97,"path":98,"stem":99,"description":100,"publishedAt":101,"tags":102,"image":103,"score":15,"draft":16},"Git Hooks 自動化守門員 Husky：在 Commit 與 Push 前執行檢查腳本","\u002Fblog\u002Ftech\u002Fhusky-git-hooks","blog\u002F4.tech\u002F4.husky-git-hooks","介紹如何運用 Husky 搭配 Git Hooks，在程式碼 Commit 與 Push 階段自動化執行 ESLint、測試 與各種自訂檢查腳本，只要三分鐘就能設定完成，再也不用擔心忘記執行檢查。","2026-09-30","Husky，外掛插件，專案工程，程式碼品質",{"src":104,"alt":105},"\u002Fcover\u002Fhusky.jpg","告別手動執行！Husky 幫專案築起 Git 推送守衛牆",{"meta":107},[108,110,111],{"name":20,"content":109},"科技，生活",{"name":22,"content":23},{"name":28,"content":29},{"title":113,"path":114,"stem":115,"children":116,"description":15,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16,"head":130},"梨子製造所","\u002Fblog\u002Ftools","blog\u002F5.tools\u002F0.index",[117,120],{"title":118,"path":114,"stem":115,"description":119,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16},"數位工具箱","好用的精選資源，線上網站與 手機 APP 等分享。",{"title":121,"path":122,"stem":123,"description":124,"publishedAt":125,"tags":126,"image":127,"score":15,"draft":16},"手機 One UI 6 更新！ 新增螢幕搜索功能：圖像和文字搜尋太棒了！","\u002Fblog\u002Ftools\u002Fone-ui-search","blog\u002F5.tools\u002F1.one-ui-search","最近，我的 Samsung 手機剛剛才升級到了 One UI 6.1，其中一個讓我驚喜的新功能就是螢幕搜尋圈 (Circle to Search with Google) 。這個功能讓我們可以更加輕鬆地在手機上搜尋圖片和文字。今天，我將帶大家一起探索這個實用的功能，並教大家如何使用它。","2024-03-18","安卓 Android，三星 Samsung，手機操作",{"src":128,"alt":129},"\u002Fimg\u002Fcontent\u002Fsamsung-one-ui-circle-to-search-overview.jpg","Samsung One UI 圈選搜尋 (Circle to Search)",{"meta":131},[132,134,135],{"name":20,"content":133},"開發，製造",{"name":22,"content":23},{"name":28,"content":29},{"title":113,"path":137,"stem":138,"children":139,"description":15,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16,"head":141},"\u002Fblog\u002Fcreator","blog\u002F6.creator\u002F0.index",[140],{"title":69,"path":137,"stem":138,"description":15,"publishedAt":15,"tags":15,"image":15,"score":15,"draft":16},{"meta":142},[143,144,145],{"name":20,"content":133},{"name":22,"content":23},{"name":28,"content":29},"Read the latest news about Nuxt Content or articles about the Studio platform.",{"page":148,"surround":1086},{"id":149,"title":87,"author":150,"body":151,"description":90,"draft":16,"extension":1081,"image":1082,"meta":1083,"navigation":642,"path":88,"publishedAt":91,"score":15,"seo":1084,"stem":89,"tags":92,"updated":91,"__hash__":1085},"blog\u002Fblog\u002F4.tech\u002F3.eslint-plugin-security.md","梨子",{"type":152,"value":153,"toc":1061},"minimark",[154,173,176,181,188,191,215,222,225,230,239,244,247,250,259,262,284,286,290,293,337,348,352,356,369,376,381,392,397,402,419,423,441,445,475,479,497,531,535,544,562,568,572,576,589,594,597,600,686,689,697,706,712,848,851,855,858,898,916,919,925,931,959,965,968,970,973,1019,1021,1024,1054,1057],[155,156,157,164],"desc",{},[158,159,160],"p",{},[161,162],"binding",{"value":163},"description",[158,165,166,167,172],{},"想要探索更多高效率前端與工程化工具？歡迎瀏覽 ",[168,169,171],"a",{"href":70,"target":170},"_blank","本站技術專區"," 獲取最新實戰技巧！",[174,175],"toc",{},[177,178],"rest",{"icon":179,"label":180},"ph:shield-check-duotone","START",[158,182,183,184,187],{},"在上篇 ",[168,185,186],{"href":78,"target":170},"ESLint 工程師必備外掛：第一道程式碼品質檢測"," 中，我們探討了如何透過 ESLint 築起程式碼品質的第一道防線，一存檔就能幫你過濾掉未使用的變數、語法錯誤與格式混亂。",[158,189,190],{},"但當程式碼格式整整齊齊、完全符合 Linter 規範時，它就真的「安全」了嗎？",[158,192,193,194,202,203,206,207,210,211,214],{},"傳統的 ESLint 核心規則主要聚焦在",[195,196,197,198,201],"strong",{},"代碼風格（Style）",[195,199,200],{},"與","常見語法瑕疵（Syntax Errors）","。一段寫得乾淨整齊、通過所有測試的 JavaScript 程式碼，骨子裡完全可能藏著容易引爆伺服器的 ",[195,204,205],{},"ReDoS 正則回溯地雷","、未經防護的",[195,208,209],{},"動態物件注入","，或是潛在的",[195,212,213],{},"命令列執行風險","。",[158,216,217,218,214],{},"今天介紹的第二款ESLINT外掛，就是專門為此而生的安全檢查：",[219,220,221],"code",{},"eslint-plugin-security",[223,224],"hr",{},[226,227,229],"h2",{"id":228},"什麼是-eslint-plugin-security","什麼是 eslint-plugin-security？",[231,232],"resource-card",{"description":233,"forks":234,"icon":235,"license":236,"stars":237,"title":221,"url":238},"專門針對 Node.js 與 JavaScript 程式碼進行靜態安全審查的 ESLint 外掛。","113","ri:github-fill","Apache-2.0","2.4k","https:\u002F\u002Fgithub.com\u002Feslint-community\u002Feslint-plugin-security",[158,240,241,243],{},[219,242,221],{}," 是一套由 ESLint Community 維護的靜態安全分析插件（Linter Security Plugin）。",[158,245,246],{},"它可以辨識出 Node.js 與 JavaScript 常見的危險寫法與潛在漏洞模式。",[158,248,249],{},"最近在維護自己的 Vue (Nuxt 3) 專案時，回想在開發初期，我主要將精力著重在網站功能的開發與實現，因此當時只簡單配置了基礎的 ESLint 與 Prettier 來維護程式碼品質與格式。",[158,251,252,253],{},"然而隨著專案漸趨成熟，在深入檢視資安防禦時才發現，",[195,254,255,256,258],{},"當初簡單配置的 ESLint 主要著重在「語法與格式」，針對「資訊安全漏洞」的安全設定其實仍有許多不足，因而發現了 ",[219,257,221],{}," 插件。",[158,260,261],{},"本文將依據我自己在 Vue 專案中的實務設定為大家分享：",[263,264,265,271,279],"ol",{},[266,267,268],"li",{},[195,269,270],{},"專案本來有的檢查機制",[266,272,273],{},[195,274,275,276,278],{},"為什麼我還需要加入 ",[219,277,221],{},"？",[266,280,281],{},[195,282,283],{},"如何進行設定說明",[223,285],{},[226,287,289],{"id":288},"一專案本來有的檢查機制","一、專案本來有的檢查機制",[158,291,292],{},"在未加入資安套件前，我在我的程式專案（以 Nuxt 3 \u002F Vue 3 \u002F TypeScript 為例）已經具備以下四層常見檢查：",[294,295,296,306,315,328],"ul",{},[266,297,298,305],{},[195,299,300,301,304],{},"語法與基本邏輯 (",[219,302,303],{},"eslint:recommended",")","：檢查未宣告變數、未使用的變數或明顯的語法錯誤。",[266,307,308,314],{},[195,309,310,311,304],{},"Vue 框架規範 (",[219,312,313],{},"plugin:vue\u002Fvue3-recommended","：確保 Vue 元件結構、模板語法與生命週期符合官方最佳實踐。",[266,316,317,323,324,327],{},[195,318,319,320,304],{},"型別安全 (",[219,321,322],{},"@typescript-eslint\u002Frecommended","：透過 TypeScript 型別系統防止 ",[219,325,326],{},"undefined"," 錯誤或型別不匹配。",[266,329,330,336],{},[195,331,332,333,304],{},"程式碼格式一致性 (",[219,334,335],{},"eslint-plugin-prettier","：統一團隊的縮排、單雙引號與換行風格。",[158,338,339,340,343,344,347],{},"➜ ",[195,341,342],{},"本來檢查的重點","：著重在「",[195,345,346],{},"程式碼寫得對不對、好不好看、有沒有型別 Bug","」。",[177,349],{"icon":350,"label":351},"ph:shield-warning-duotone","WHY SECURITY",[226,353,355],{"id":354},"二為什麼加入-eslint-plugin-security","二、為什麼加入 eslint-plugin-security？",[158,357,358,359,365,366,368],{},"從 ",[168,360,364],{"href":361,"target":170,"rel":362},"https:\u002F\u002Fwww.npmtrends.com\u002Feslint-plugin-security",[363],"nofollow","npm trends"," 的數據可以看出，",[219,367,221],{}," 的下載量呈現持續穩定上升的趨勢，顯示出越來越多開發者與團隊開始重視靜態程式碼的資安檢查。",[158,370,371],{},[372,373],"img",{"alt":374,"src":375},"eslint-plugin-security npm trends 下載量趨勢 : npm trends 數據顯示：eslint-plugin-security 每週下載量穩定持續攀升 | 資料來源:https:\u002F\u002Fwww.npmtrends.com\u002Feslint-plugin-security","\u002Fimg\u002Fcontent\u002Feslint-security-npm-trends.webp",[158,377,378],{},[195,379,380],{},"「語法完全正確、型別完全符合的程式碼，不代表安全無虞。」",[158,382,383,384,387,388,391],{},"原本的 ESLint 檢查無法識別許多專門針對 Node.js 與 JavaScript 的",[195,385,386],{},"靜態安全漏洞（SAST）","。特別是現代專案大多為全棧架構（例如 Nuxt Nitro \u002F Next.js Server API），",[195,389,390],{},"伺服器端會直接處理用戶傳入的參數與資料庫操作","，更需要專門的資安防禦機制。",[158,393,394,396],{},[219,395,221],{}," 補足了以下常見的資安防護漏洞：",[398,399,401],"h3",{"id":400},"_1-防範-redos-正規表達式阻斷服務攻擊","1. 防範 ReDoS (正規表達式阻斷服務攻擊)",[294,403,404,410],{},[266,405,406,409],{},[195,407,408],{},"原因","：寫法完全合法的 Regex，如果包含災難性回溯風險，攻擊者傳入特定字串就會讓 CPU 瞬間爆滿，導致整台 Node.js Server 卡死。",[266,411,412,415,416],{},[195,413,414],{},"預防規則","：",[219,417,418],{},"detect-unsafe-regex",[398,420,422],{"id":421},"_2-物件屬性注入-object-injection","2. 物件屬性注入 (Object Injection)",[294,424,425,434],{},[266,426,427,429,430,433],{},[195,428,408],{},"：當程式碼直接使用前端傳來的動態 key 來存取物件（如 ",[219,431,432],{},"obj[req.query.key]","），可能遭攻擊者利用讀取敏感變數或觸發原型鏈污染 (Prototype Pollution)。",[266,435,436,415,438],{},[195,437,414],{},[219,439,440],{},"detect-object-injection",[398,442,444],{"id":443},"_3-動態載入與路徑穿越-path-traversal","3. 動態載入與路徑穿越 (Path Traversal)",[294,446,447,464],{},[266,448,449,451,452,455,456,459,460,463],{},[195,450,408],{},"：動態使用變數進行 ",[219,453,454],{},"require(userInput)"," 或 ",[219,457,458],{},"fs.readFile(userInput)","，可能導致伺服器上的 ",[219,461,462],{},".env"," 或系統檔案被非法讀取。",[266,465,466,415,468,471,472],{},[195,467,414],{},[219,469,470],{},"detect-non-literal-require"," \u002F ",[219,473,474],{},"detect-non-literal-fs-filename",[398,476,478],{"id":477},"_4-不安全的時間差比較-timing-attacks","4. 不安全的時間差比較 (Timing Attacks)",[294,480,481,490],{},[266,482,483,485,486,489],{},[195,484,408],{},"：在比對 API Key 或密碼 Hash 時使用 ",[219,487,488],{},"===","，會因字串比對時間差異被攻擊者推算出金鑰。",[266,491,492,415,494],{},[195,493,414],{},[219,495,496],{},"detect-possible-timing-attacks",[498,499,502],"footnote",{"en-title":500,"title":501},"SECURITY GLOSSARY","常見靜態資安風險術語",[294,503,504,510,516,525],{},[266,505,506,509],{},[195,507,508],{},"ReDoS (Regular Expression Denial of Service)","：正則表達式阻斷服務攻擊。利用正則引擎在面對惡意構造字串時的災難性回溯計算，耗盡伺服器 CPU 資源。",[266,511,512,515],{},[195,513,514],{},"物件屬性注入 (Object Injection)","：透過外部未經過濾的鍵值存取 JavaScript 物件，可能導致存取未授權屬性或污染原型鏈（Prototype Pollution）。",[266,517,518,521,522,524],{},[195,519,520],{},"路徑穿越 (Path Traversal)","：使用未經驗證的變數拼接檔案路徑，可能導致敏感檔案（如 ",[219,523,462],{},"、私密金鑰）遭非法讀取。",[266,526,527,530],{},[195,528,529],{},"時序攻擊 (Timing Attack)","：攻擊者透過比對驗證時所需的時間微小差異，逐位元推敲出私密金鑰或密碼雜湊值。",[226,532,534],{"id":533},"我的專案需要嗎適用情境與決策建議","我的專案需要嗎？適用情境與決策建議",[158,536,537,539,540,543],{},[219,538,221],{}," 所提供的防護重點，主要集中在",[195,541,542],{},"伺服器端處理外部輸入與敏感操作","的場景。你可以根據自己的專案類型來評估是否需要優先導入：",[294,545,546,552],{},[266,547,548,551],{},[195,549,550],{},"純前端 \u002F 靜態展示頁面","：若專案沒有 Server API，僅為單純的 SPA 或 SSG 靜態頁面，這套件能發揮的防禦效益相對有限。",[266,553,554,557,558,561],{},[195,555,556],{},"全棧架構 \u002F 後端 API","：若專案採用 Nuxt Nitro、Next.js Server API，或是任何會接觸到",[195,559,560],{},"使用者輸入、資料庫查詢、檔案讀寫或機密資訊比對","的 Node.js 專案，導入這個套件的價值就顯著提高。",[158,563,564,567],{},[195,565,566],{},"總結定位","：特別是在全棧架構下，只要伺服器端會直接處理外部輸入，這類靜態資安檢查就不只是「加分」，而是應該視為基礎防衛不可或缺的一環。",[177,569],{"icon":570,"label":571},"ph:gear-duotone","CONFIG",[226,573,575],{"id":574},"三如何設定與程式碼簡單說明","三、如何設定與程式碼簡單說明",[577,578,581],"callout",{"title":579,"type":580},"📌 前提條件","left",[158,582,583,585,586,214],{},[219,584,221],{}," 是 ESLint 的擴充外掛（Plugin），因此以下步驟",[195,587,588],{},"基於您的專案已經安裝並配置好基礎 ESLint 環境",[590,591],"u-button",{"label":592,"type":593},"STEP 1","step",[398,595,596],{"id":596},"安裝套件",[158,598,599],{},"透過 npm \u002F pnpm \u002F yarn 安裝套件至開發依賴：",[601,602,608],"pre",{"className":603,"code":604,"filename":605,"language":606,"meta":607,"style":607},"language-bash shiki shiki-themes ayu-dark","# npm\nnpm install -D eslint-plugin-security\n\n# pnpm\npnpm add -D eslint-plugin-security\n\n# yarn\nyarn add -D eslint-plugin-security\n","Terminal","bash","",[219,609,610,619,637,644,650,663,668,674],{"__ignoreMap":607},[611,612,615],"span",{"class":613,"line":614},"line",1,[611,616,618],{"class":617},"sOSKZ","# npm\n",[611,620,622,626,630,634],{"class":613,"line":621},2,[611,623,625],{"class":624},"sP_rH","npm",[611,627,629],{"class":628},"skAsU"," install",[611,631,633],{"class":632},"sHCZS"," -D",[611,635,636],{"class":628}," eslint-plugin-security\n",[611,638,640],{"class":613,"line":639},3,[611,641,643],{"emptyLinePlaceholder":642},true,"\n",[611,645,647],{"class":613,"line":646},4,[611,648,649],{"class":617},"# pnpm\n",[611,651,653,656,659,661],{"class":613,"line":652},5,[611,654,655],{"class":624},"pnpm",[611,657,658],{"class":628}," add",[611,660,633],{"class":632},[611,662,636],{"class":628},[611,664,666],{"class":613,"line":665},6,[611,667,643],{"emptyLinePlaceholder":642},[611,669,671],{"class":613,"line":670},7,[611,672,673],{"class":617},"# yarn\n",[611,675,677,680,682,684],{"class":613,"line":676},8,[611,678,679],{"class":624},"yarn",[611,681,658],{"class":628},[611,683,633],{"class":632},[611,685,636],{"class":628},[590,687],{"label":688,"type":593},"STEP 2",[398,690,692,693,696],{"id":691},"在-eslintconfigmjs-中引進與設定","在 ",[219,694,695],{},"eslint.config.mjs"," 中引進與設定",[158,698,699,700,214],{},"由於每個人的專案架構（例如純 Vue、Nuxt 3、Next.js 或 React）與 ESLint 設定檔內容都不同，最簡單的做法是",[195,701,702,703,705],{},"直接將你專案現有的 ",[219,704,695],{}," 提供給 AI，請 AI 幫忙整合",[158,707,708,709,711],{},"在採用全域 Flat Config 格式（",[219,710,695],{},"）的現代專案中，設定步驟參考如下：",[601,713,717],{"className":714,"code":715,"filename":695,"language":716,"meta":607,"style":607},"language-javascript shiki shiki-themes ayu-dark","import pluginSecurity from 'eslint-plugin-security';\n\nexport default [\n  \u002F\u002F 1. 引入官方推薦的安全檢查配置\n  pluginSecurity.configs.recommended,\n\n  \u002F\u002F 2. 自訂規則微調（選填）\n  {\n    rules: {\n      \u002F\u002F 若 detect-object-injection 假警報較多，可調降為 warn 或局部關閉\n      'security\u002Fdetect-object-injection': 'warn',\n    },\n  },\n];\n","javascript",[219,718,719,739,743,754,759,779,783,788,793,805,811,824,832,840],{"__ignoreMap":607},[611,720,721,725,729,732,735],{"class":613,"line":614},[611,722,724],{"class":723},"stcy1","import",[611,726,728],{"class":727},"skCYq"," pluginSecurity ",[611,730,731],{"class":723},"from",[611,733,734],{"class":628}," 'eslint-plugin-security'",[611,736,738],{"class":737},"s1auz",";\n",[611,740,741],{"class":613,"line":621},[611,742,643],{"emptyLinePlaceholder":642},[611,744,745,748,751],{"class":613,"line":639},[611,746,747],{"class":723},"export",[611,749,750],{"class":723}," default",[611,752,753],{"class":727}," [\n",[611,755,756],{"class":613,"line":646},[611,757,758],{"class":617},"  \u002F\u002F 1. 引入官方推薦的安全檢查配置\n",[611,760,761,764,768,771,773,776],{"class":613,"line":652},[611,762,763],{"class":727},"  pluginSecurity",[611,765,767],{"class":766},"sh1d5",".",[611,769,770],{"class":727},"configs",[611,772,767],{"class":766},[611,774,775],{"class":727},"recommended",[611,777,778],{"class":737},",\n",[611,780,781],{"class":613,"line":665},[611,782,643],{"emptyLinePlaceholder":642},[611,784,785],{"class":613,"line":670},[611,786,787],{"class":617},"  \u002F\u002F 2. 自訂規則微調（選填）\n",[611,789,790],{"class":613,"line":676},[611,791,792],{"class":727},"  {\n",[611,794,796,799,802],{"class":613,"line":795},9,[611,797,798],{"class":727},"    rules",[611,800,801],{"class":737},":",[611,803,804],{"class":727}," {\n",[611,806,808],{"class":613,"line":807},10,[611,809,810],{"class":617},"      \u002F\u002F 若 detect-object-injection 假警報較多，可調降為 warn 或局部關閉\n",[611,812,814,817,819,822],{"class":613,"line":813},11,[611,815,816],{"class":628},"      'security\u002Fdetect-object-injection'",[611,818,801],{"class":737},[611,820,821],{"class":628}," 'warn'",[611,823,778],{"class":737},[611,825,827,830],{"class":613,"line":826},12,[611,828,829],{"class":727},"    }",[611,831,778],{"class":737},[611,833,835,838],{"class":613,"line":834},13,[611,836,837],{"class":727},"  }",[611,839,778],{"class":737},[611,841,843,846],{"class":613,"line":842},14,[611,844,845],{"class":727},"]",[611,847,738],{"class":737},[590,849],{"label":850,"type":593},"STEP 3",[398,852,854],{"id":853},"設定完後執行-eslint","設定完後執行 ESLint",[158,856,857],{},"完成設定後，即可透過命令列執行檢查，掃描專案中是否存在潛在的資安問題：",[601,859,861],{"className":603,"code":860,"filename":605,"language":606,"meta":607,"style":607},"# 執行全域 ESLint 檢查\nnpx eslint .\n\n# 或執行 package.json 中配置的 lint 指令\nnpm run lint\n",[219,862,863,868,879,883,888],{"__ignoreMap":607},[611,864,865],{"class":613,"line":614},[611,866,867],{"class":617},"# 執行全域 ESLint 檢查\n",[611,869,870,873,876],{"class":613,"line":621},[611,871,872],{"class":624},"npx",[611,874,875],{"class":628}," eslint",[611,877,878],{"class":628}," .\n",[611,880,881],{"class":613,"line":639},[611,882,643],{"emptyLinePlaceholder":642},[611,884,885],{"class":613,"line":646},[611,886,887],{"class":617},"# 或執行 package.json 中配置的 lint 指令\n",[611,889,890,892,895],{"class":613,"line":652},[611,891,625],{"class":624},[611,893,894],{"class":628}," run",[611,896,897],{"class":628}," lint\n",[294,899,900,906],{},[266,901,902,905],{},[195,903,904],{},"即時反饋","：若編輯器有安裝 ESLint 擴充套件（如 VS Code ESLint Extension），在開發時撰寫到不安全的程式碼（如 unsafe regex 或未驗證的動態 key 存取），IDE 畫面上就會立刻出現紅字或黃字波浪線警示。",[266,907,908,911,912,915],{},[195,909,910],{},"自動化防禦","：建議將 ",[219,913,914],{},"npm run lint"," 整合至專案的 Git Pre-commit 鉤子或 CI\u002FCD 流程中，確保資安風險在程式碼提交前就被阻擋。",[398,917,918],{"id":918},"結果驗證",[158,920,921,922,924],{},"修改完 ",[219,923,695],{}," 後，如果你是在 IDE（如 VS Code）中開啟專案，建議手動重啟 ESLint 服務以讓新規則立刻生效：",[158,926,927],{},[372,928],{"alt":929,"src":930},"VS Code 重啟 ESLint 伺服器命令 : 在 VS Code 命令列執行「ESLint: Restart ESLint Server」讓新規則即時生效","\u002Fimg\u002Fcontent\u002Feslint-security-restart-server.webp",[263,932,933,944,952],{},[266,934,935,936,939,940,943],{},"按下快捷鍵開啟命令列（macOS: ",[219,937,938],{},"Cmd + Shift + P"," \u002F Windows: ",[219,941,942],{},"Ctrl + Shift + P","）。",[266,945,946,947,214],{},"輸入並執行 ",[195,948,949],{},[219,950,951],{},"ESLint: Restart ESLint Server",[266,953,954,955,958],{},"重啟後開啟 IDE 下方的 ",[195,956,957],{},"Problems（問題）"," 面板，就能看到系統即時捕捉到的資安告警訊息！",[158,960,961],{},[372,962],{"alt":963,"src":964},"VS Code Problems 面板資安警示截圖 : VS Code Problems 面板即時捕捉到的潛在資安漏洞警示","\u002Fimg\u002Fcontent\u002Feslint-security-problems-panel.webp",[158,966,967],{},"接著你就能進一步針對這些問題去做修改程式碼等改寫。",[223,969],{},[226,971,972],{"id":972},"延伸閱讀與社群資源",[577,974,978],{"title":975,"type":976,":simple":977},"官方與進階參考資源","link","true",[294,979,980,990,999,1009],{},[266,981,982,986,987],{},[168,983,985],{"href":238,"target":170,"rel":984},[363],"[eslint-plugin-security 官方 GitHub 倉庫 ↗]"," ",[219,988,989],{},"[github.com]",[266,991,992,986,997],{},[168,993,996],{"href":994,"target":170,"rel":995},"https:\u002F\u002Fgithub.com\u002Feslint-community\u002Feslint-plugin-security#rules",[363],"[完整外掛規則清單 (Rules Documentation) ↗]",[219,998,989],{},[266,1000,1001,986,1006],{},[168,1002,1005],{"href":1003,"target":170,"rel":1004},"https:\u002F\u002Fowasp.org\u002Fwww-project-top-ten\u002F",[363],"[OWASP Top 10 安全風險指南 ↗]",[219,1007,1008],{},"[owasp.org]",[266,1010,1011,986,1016],{},[168,1012,1015],{"href":1013,"target":170,"rel":1014},"https:\u002F\u002Fnodejs.org\u002Fen\u002Flearn\u002Fgetting-started\u002Fsecurity-best-practices",[363],"[Node.js 安全最佳實踐指南 ↗]",[219,1017,1018],{},"[nodejs.org]",[223,1020],{},[226,1022,1023],{"id":1023},"結語",[294,1025,1026,1036,1045],{},[266,1027,1028,1031,1032,1035],{},[195,1029,1030],{},"本來有的檢查","：為程式碼的",[195,1033,1034],{},"品質與格式","打好基礎。",[266,1037,1038,1041,1042,214],{},[195,1039,1040],{},"加入 Security 外掛","：為專案（特別是 Server 端）築起",[195,1043,1044],{},"資安防線",[266,1046,1047,1050,1051,1053],{},[195,1048,1049],{},"設定簡單","：只需要幾分鐘就能將 ",[219,1052,695],{}," 引入並設定推薦配置，在 IDE 與 CI 流程中自動預防隱形資安風險！",[158,1055,1056],{},"花個幾分鐘把資安檢查設定好，就像是替專案預先裝上防禦門，寫扣時心裡也踏實許多！",[1058,1059,1060],"style",{},"html pre.shiki code .sOSKZ, html code.shiki .sOSKZ{--shiki-default:#5A6673;--shiki-default-font-style:italic}html pre.shiki code .sP_rH, html code.shiki .sP_rH{--shiki-default:#59C2FF}html pre.shiki code .skAsU, html code.shiki .skAsU{--shiki-default:#AAD94C}html pre.shiki code .sHCZS, html code.shiki .sHCZS{--shiki-default:#95E6CB}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .stcy1, html code.shiki .stcy1{--shiki-default:#FF8F40}html pre.shiki code .skCYq, html code.shiki .skCYq{--shiki-default:#BFBDB6}html pre.shiki code .s1auz, html code.shiki .s1auz{--shiki-default:#BFBDB6B3}html pre.shiki code .sh1d5, html code.shiki .sh1d5{--shiki-default:#F29668}",{"title":607,"searchDepth":621,"depth":621,"links":1062},[1063,1064,1065,1071,1072,1079,1080],{"id":228,"depth":621,"text":229},{"id":288,"depth":621,"text":289},{"id":354,"depth":621,"text":355,"children":1066},[1067,1068,1069,1070],{"id":400,"depth":639,"text":401},{"id":421,"depth":639,"text":422},{"id":443,"depth":639,"text":444},{"id":477,"depth":639,"text":478},{"id":533,"depth":621,"text":534},{"id":574,"depth":621,"text":575,"children":1073},[1074,1075,1077,1078],{"id":596,"depth":639,"text":596},{"id":691,"depth":639,"text":1076},"在 eslint.config.mjs 中引進與設定",{"id":853,"depth":639,"text":854},{"id":918,"depth":639,"text":918},{"id":972,"depth":621,"text":972},{"id":1023,"depth":621,"text":1023},"md",{"src":94,"alt":95},{},{"title":87,"description":90},"2ov5bj6d2qasm50jDuYM369dXgg439KjUtZmznq-Nzg",[1087,1088],{"title":77,"path":78,"stem":79,"description":80,"children":-1},{"title":97,"path":98,"stem":99,"description":100,"children":-1},[]]