XSS 與 CSP

XSS 類型

| 類型 | 說明 | 範例 | |------|------|------| | Reflected XSS | 參數直接渲染到頁面 | ?q=<script>alert(1)</script> | | Stored XSS | 儲存到資料庫後顯示 | 留言板張貼惡意腳本 | | DOM-based XSS | 前端 JavaScript 動態插入 | innerHTML = userInput |

Vibe Prompt

「幫我在 Next.js 中實作 CSP (Content Security Policy) Header，防止 XSS 攻擊。」

// next.config.js
const csp = {
  "default-src": ["'self'"],
  "script-src": ["'self'", "'unsafe-inline'", "https://pagead2.googlesyndication.com"],
  "style-src": ["'self'", "'unsafe-inline'"],
  "img-src": ["'self'", "https:", "data:"],
  "font-src": ["'self'"],
  "connect-src": ["'self'", "https://*.supabase.co"],
}

const cspString = Object.entries(csp)
  .map(([key, vals]) => `${key} ${vals.join(' ')}`)
  .join('; ')

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          { key: 'Content-Security-Policy', value: cspString },
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'X-Content-Type-Options', value: 'nosniff' },
          { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
        ],
      },
    ]
  },
}

關鍵要點

✅ OWASP Top 10 = Web 應用安全最具權威的風險列表
✅ SQL Injection：永遠使用參數化查詢，不要串接字串
✅ XSS：對使用者輸入進行轉義（Escape），使用 CSP Header
✅ CSRF：使用 SameSite Cookie + CSRF Token 雙重保護
✅ 安全是設計階段就要考慮的，不是上線前才補

OWASP Top 10 (2021)

| 排名 | 漏洞 | 說明 | |:----:|------|------| | A01 | 權限控制失效 | IDOR、越權 | | A02 | 加密機制失效 | 未加密敏感資料 | | A03 | 注入攻擊 | SQL、NoSQL、Command Injection | | A04 | 不安全設計 | 安全未在設計階段考慮 | | A05 | 安全配置錯誤 | 預設密碼、未關閉除錯模式 | | A06 | 脆弱元件 | 使用有已知漏洞的套件版本 | | A07 | 認證與身分管理失效 | 弱密碼、Session 固定 | | A08 | 資料完整性失效 | 不安全的反序列化 | | A09 | 日誌與監控不足 | 無法偵測攻擊 | | A10 | SSRF | 伺服器端請求偽造 |

防禦策略摘要

| 漏洞 | 主要防禦 | 次要防禦 | |------|---------|---------| | SQL Injection | 參數化查詢 | 最小權限資料庫帳號 | | XSS | 輸出編碼 + CSP | 輸入驗證 | | CSRF | SameSite Cookie | CSRF Token | | IDOR | 所有權檢查 | UUID | | SSRF | URL 白名單 | 網路隔離 |

XSS：Web 安全最常見的漏洞

XSS（Cross-Site Scripting）允許攻擊者在別人的瀏覽器中執行 JavaScript。它是 OWASP Top 10 的常客，也是最容易被忽略的漏洞之一。

XSS 的三種型態

| 型態 | 說明 | 危險程度 | |:----|:----|:--------| | 反射型（Reflected） | 惡意腳本在 URL 參數中，需要誘騙使用者點擊 | 中 | | 儲存型（Stored） | 惡意腳本被存進資料庫，每次載入頁面都會觸發 | 極高 | | DOM Based | 前端 JavaScript 不安全地處理使用者輸入 | 高 |

防護方式

| 防護 | 做法 | |:----|:----| | 輸出跳脫 | React/Vue 預設跳脫，但 dangerouslySetInnerHTML 要小心 | | CSP | Content Security Policy Header 限制可執行的來源 | | HttpOnly Cookie | 防止 XSS 竊取 Session Token | | 輸入驗證 | 過濾掉 <script>、onerror= 等危險字串 |

CSP 設定範例

# 只允許同網域的腳本執行
Content-Security-Policy: default-src 'self'; script-src 'self'

# 允許特定 CDN 的腳本
Content-Security-Policy: script-src 'self' https://cdn.example.com

# 不允許內聯腳本（預防 XSS 最有效）
Content-Security-Policy: script-src 'self'; style-src 'self'

課程總結

這堂 OWASP 安全課你學到了 SQL Injection、XSS、CSP 等 Web 安全的核心概念。了解漏洞的原理和防護方式，是寫出安全程式碼的第一步。