XSS（跨站腳本攻擊）是 OWASP Top 10 中長期存在的安全威脅。2026 年，CSP Level 3 和 Trusted Types 已經成為防禦 XSS 的核心技術。理解它們的原理和實踐方法，是每個前端開發者的必備能力。

XSS 攻擊的本質

XSS 攻擊的核心是攻擊者能夠向頁面注入惡意腳本並執行：

<!-- 反射型 XSS -->
<img src="x" onerror="alert('XSS')">

<!-- 存儲型 XSS -->
<div class="comment">
  <script>stealCookies()</script>
</div>

CSP Level 3 基礎

Content Security Policy（CSP）透過限制頁面可以載入和執行的資源來防禦 XSS：

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' 'nonce-random123';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com;
">

Nonce 和 Hash

Nonce（一次性隨機數）和 Hash 是 CSP 中最安全的腳本載入方式：

<script nonce="random123">
  // 只有帶有正確 nonce 的腳本才能執行
  console.log('This script is allowed')
</script>

Trusted Types 詳解

Trusted Types 是 Google 提出的 DOM XSS 防禦方案，它強制所有 DOM 操作使用型別安全的 API：

// 禁止直接使用 innerHTML
element.innerHTML = userInput  // ❌ 違反 CSP

// 必須透過 TrustedHTML
const trustedHTML = trustedTypes.createPolicy('default', {
  createHTML: (input) => {
    return DOMPurify.sanitize(input)
  }
})

element.innerHTML = trustedHTML.createHTML(userInput)  // ✅ 允許

漸進式遷移策略

// 第一步：只報告不阻止
<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  report-uri /csp-report;
">

// 第二步：新增常用指令
<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self';
  style-src 'self' 'unsafe-inline';
  report-uri /csp-report;
">

// 第三步：啟用 Trusted Types
<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' 'nonce-${NONCE}';
  style-src 'self' 'unsafe-inline';
  trusted-types default;
  report-uri /csp-report;
">

小結

CSP Level 3 和 Trusted Types 是現代前端安全的基石。CSP 透過限制資源來源來防禦 XSS，Trusted Types 透過型別安全的 API 來防止 DOM 注入攻擊。在實際專案中，推薦漸進式遷移：先報告違規，再逐步啟用嚴格策略。