Terry Yao's Blog

ROADMAP

ROADMAP

閱讀時間約 7 分鐘

CH11 · 前端資安 詳細 ROADMAP

計畫文件，不會被 Quartz 渲染。 回主 roadmap → frontend/ROADMAP.md

章節目標

這一章只放前端特有的資安主題——前端獨有的 attack surface：XSS 家族、CSP、Cookie / Token storage、Clickjacking、Supply Chain、前端 CORS 視角、Web Crypto 前端應用。

通用資安主題（密碼學基礎、SDLC、Red/Blue team、Threat Modeling 等）屬於 content/security/ 系列（已有 7 篇），不在本章。

🌱 基本介紹

#主題SlugStage大綱
01前端資安跟後端資安差在哪01-frontend-vs-backend-security🌱前端的 attack surface（user-supplied content、瀏覽器權限、跨 origin）、前端永遠不能被信任、秘密不能放前端
02Web Security 基礎⛔️ security/03-web-security🌿跨系列

❓ 為什麼需要

#主題SlugStage大綱
03為什麼前端資安獨立成一塊03-why-frontend-security🌱用戶端執行環境不受信任、JS 可被開 DevTools 改、HTTP headers 依賴 server 配合、為什麼 React / Vue 不能「自動安全」
04為什麼 XSS 是前端第一大威脅04-why-xss-is-top-threat🌱攻擊成本低、影響大（session 劫持、帳戶接管）、為什麼 OWASP 長期列 Top 10、現代框架 auto-escape 的保護邊界
05為什麼 CSP 是必備不是選配05-why-csp🌱減少 XSS 攻擊面、ancestor frame 控制、script-src 白名單、為什麼沒 CSP 等於裸奔
06為什麼前端不能存 API secret06-why-no-secrets-in-frontend🌱build-time env var 會進 bundle、browser source 誰都能看、為什麼公開 key 也要有 origin 限制、BFF 為什麼該做

🕰️ 演進

#主題SlugStage大綱
07XSS 演進史07-xss-evolution🌱Stored XSS（早期論壇留言）→ Reflected（URL 參數回顯）→ DOM-based（SPA 時代）→ mutation XSS → 現代框架 auto-escape + Trusted Types
08CSP 演進08-csp-evolution🌱CSP 1.0 → 2.0 (nonce)→ 3.0 (strict-dynamic)、為什麼 nonce 勝過白名單
09CSRF 緩解演進09-csrf-evolution🌱Referer 檢查 → Double Submit Cookie → Synchronizer Token → SameSite Cookie（2020 主流）→ Fetch Metadata
10前端供應鏈攻擊演進10-supply-chain-evolution🌱event-stream 事件（2018）→ colors.js / faker.js（2022）→ polyfill.io（2024），怎麼一步步教訓大家要鎖依賴

🧠 知識型

XSS 家族

#主題SlugStage大綱
11XSS 總覽11-xss-overview🌱三類（Stored / Reflected / DOM-based）差異、攻擊流程、為什麼 innerHTML 是禍源
12Stored XSS12-stored-xss🌱論壇 / 留言 / 使用者內容、伺服器 + 前端雙防禦
13Reflected XSS13-reflected-xss🌱URL 參數、搜尋框回顯、phishing vector
14DOM-based XSS14-dom-based-xss🌱location.hash / document.write / innerHTML / eval 來源、源碼層面防禦
15Trusted Types API15-trusted-types🌱2020+ 新，強制 HTML sink 只接受 trusted type、React / Angular 整合
16React / Vue 的 auto-escape 邊界16-framework-xss-boundary🌱dangerouslySetInnerHTML / v-html 的坑、第三方元件注入風險、Server Component 的 XSS 特殊情境

HTTP Security Headers

#主題SlugStage大綱
17Content Security Policy（CSP）17-csp🌱directive 完整介紹、nonce vs hash、report-only mode、CSP violation reporting
18其他 Security Headers18-security-headers🌱X-Frame-Options / X-Content-Type-Options / Permissions-Policy / Strict-Transport-Security / Cross-Origin-*
19Secure Context / HTTPS 要求19-secure-context🌱哪些 API 需要 secure context、mixed content 問題、HSTS preload

Cookie & Token Storage

#主題SlugStage大綱
20Cookie 安全屬性20-cookie-security🌱Secure / HttpOnly / SameSite（Lax / Strict / None）/ Path / Domain、__Host- 前綴
21Token Storage 選擇決策21-token-storage🌱localStorage vs Cookie vs Memory、XSS vs CSRF tradeoff、SSR 情境、Refresh token 放哪
22OAuth 2.0 PKCE in SPA22-oauth-pkce🌱SPA 為什麼不該用 implicit flow、PKCE 原理、常見實作錯誤
23Session 管理23-session-management🌱Session fixation、logout 清 token、多 tab 同步、idle timeout

CSRF & CORS

#主題SlugStage大綱
24CSRF 攻擊原理與前端緩解24-csrf-frontend🌱經典攻擊 flow、SameSite Cookie 現代解法、CSRF token 什麼情況還要、跟 CORS 的互動
25CORS 前端視角25-cors-frontend🌱preflight / credentials / cache、為什麼 Access-Control-Allow-Origin: * 不能搭 credentials、常見配置錯誤

進階攻擊

#主題SlugStage大綱
26Clickjacking 與 iframe 沙箱26-clickjacking-iframe🌱frame-ancestors、X-Frame-Options、<iframe sandbox> 精細控制
27Prototype Pollution27-prototype-pollution🌱JS 原型污染攻擊、npm 套件常見漏洞、mitigation（Object.freeze / Map）
28Supply Chain Attack（npm）28-npm-supply-chain🌱typosquatting、compromised maintainer、post-install script、lockfile 驗證、雙因素認證
29Subresource Integrity（SRI）29-sri🌱第三方 CDN 腳本的 hash 鎖定、integrity 屬性、2024 polyfill.io 事件為什麼值得所有人學
30Open Redirect30-open-redirect🌱前端 redirect 的 validation、OAuth callback 的 redirect 陷阱

Web Crypto & 其他

#主題SlugStage大綱
31Web Crypto API 前端應用31-web-crypto🌱為什麼原生 crypto 安全勝過自己寫、SubtleCrypto 常用 operation、Passkey 相關用法
32Passkeys（WebAuthn）實作32-passkeys🌱無密碼登入、跟傳統 OAuth 對比、實作步驟、iOS/Android 支援
33前端依賴掃描33-dependency-scanning🌱npm audit / Snyk / Dependabot / Socket / Renovate，自動化漏洞修補

🔧 小實作注意事項

#主題SlugStage大綱
34前端 Security Headers 一次配置完成34-security-headers-setup🌱Nginx / Vercel / Cloudflare 配置、Lighthouse security audit、securityheaders.com 達 A+
35CSP 導入實戰（從 report-only 到 enforce）35-csp-implementation🌱實際導入流程、violation log 收集、nonce 在 Next.js / Remix 怎麼做
36Token Storage 選型實戰36-token-storage-in-practice🌱SPA + Cookie + BFF、SPA + httpOnly cookie、SSR + refresh token，三種情境對比
37Subresource Integrity 設定37-sri-setup🌱自動生成 SRI hash、CDN 失效策略、Rollup / Webpack plugin
38npm audit / Snyk / Dependabot 整合38-deps-security-ci🌱PR 自動掃、allowlist 策略、假陽性處理
39AI / LLM 前端 Prompt Injection 防禦39-ai-prompt-injection🌱LLM 回應內容被 XSS 注入、前端 render AI 輸出的安全規則、Trusted Types for AI

💣 Anti-pattern

#主題SlugStage大綱
40前端資安 Anti-patterns40-frontend-security-anti-patterns🌱dangerouslySetInnerHTML 濫用、API key 塞 .env.NEXT_PUBLIC_*、localStorage 存 auth token、Access-Control-Allow-Origin: * 搭 credentials、跟 user 隱藏錯誤而不處理、忘記 rotate token

🧰 對應檢查工具

#主題SlugStage大綱
41前端資安工具41-frontend-security-tooling🌱eslint-plugin-security、ESLint React/Vue security rules、Snyk、OWASP ZAP、Burp Suite（前端角度）、Lighthouse security、securityheaders.com、Mozilla Observatory

📎 補充

#主題SlugStage大綱
S01Bug Bounty 看前端s01-bug-bounty-frontend🌱常見前端漏洞獎金等級、HackerOne / BugCrowd 看得到什麼
S02前端 Privacy（GDPR / CCPA）s02-frontend-privacy🌱Cookie consent、fingerprinting、GA 替代（Plausible / PostHog）、跨 CH8 F09
S03Formal Security Audit 流程s03-security-audit-flow🌱第三方 audit 準備、pentest 前端視角、fix 追蹤

章節進度統計

  • 知識主題：41 + 3 補充 = 44 項
  • 🌿 growing：1（跨系列）
  • 🌱 seed：43

⚠️ 屬於 content/security/ 通用資安系列（不在本章）

  • 密碼學基礎
  • 紅藍隊對抗（Red / Blue team）
  • Secure Development Lifecycle（SDLC）
  • 一般 Web Security（security/03）
  • Threat Modeling
  • Penetration Testing 基礎
  • Incident Response
  • 資安合規與法規（SOC2 / ISO27001 / GDPR 深入）

跨系列連結

  • → content/security/ 通用資安系列
  • → frontend/browser/ CH4（Secure Context / COOP-COEP / Web Crypto）
  • → frontend/application/ CH8 F09（認證 OAuth、錯誤處理）
  • → frontend/framework/ CH6（dangerouslySetInnerHTML 框架特定）
  • → frontend/js/ CH3（Prototype pollution）
  • → frontend/ecosystem/ CH19（npm 依賴管理、鎖檔）

關係圖譜

反向連結

  • ROADMAP

    Walkthroughs 詳細 ROADMAP 計畫文件，不會被 Quartz 渲染（無 frontmatter）。 公...