**內容安全策略（CSP, Content Security Policy）** 是一套由瀏覽器支援的安全機制，用來防止跨站腳本攻擊（XSS）、資料注入等網頁安全問題。CSP 是透過 HTTP 標頭或 `<meta>` 標籤告訴瀏覽器「哪些資源可以被載入」。

---

## 📚 主要 CSP 指令（Directives）

以下是 CSP 2025 年通用且常見的指令：

| 指令名稱 | 說明 |
| --------------------------- | ----------------------------------------------------------- |
| `default-src` | 所有未被明確指定的類別預設來源。 |
| `script-src` | JavaScript 腳本的允許來源。 |
| `style-src` | CSS 樣式的允許來源。 |
| `img-src` | 圖片的允許來源。 |
| `font-src` | 字體的允許來源。 |
| `media-src` | 音訊與影片的來源。 |
| `frame-src` | `<iframe>` 的來源。 |
| `connect-src` | XHR、Fetch、WebSocket 等連線的允許來源。 |
| `object-src` | `<object>`, `<embed>`, `<applet>` 的來源。 |
| `child-src` | frame、iframe、worker 的來源（部分被 `frame-src` 和 `worker-src` 取代）。 |
| `form-action` | `<form>` 表單可提交的目的地。 |
| `base-uri` | 限制 `<base>` 的 URL。 |
| `frame-ancestors` | 限制哪個來源可以將此頁嵌入 iframe 中（防止點擊劫持）。 |
| `worker-src` | 限定 Web Workers 或 Shared Workers 的來源。 |
| `manifest-src` | 指定應用 manifest 的來源。 |
| `prefetch-src` | 預先加載（prefetch、prerender）的來源。 |
| `navigate-to` | 控制允許跳轉的目的地（例如 `window.location.href`）。 |
| `script-src-attr` | 控制 `<script>` 標籤上的 `on*` 事件處理器。 |
| `script-src-elem` | 控制 `<script>` 元素來源。 |
| `style-src-attr` | 控制 HTML 元素上的 inline `style="..."` 屬性。 |
| `style-src-elem` | 控制 `<style>` 元素內的樣式來源。 |
| `sandbox` | 與 iframe 同名，限制文件權限。 |
| `require-trusted-types-for` | 啟用 Trusted Types 強化對 DOM XSS 的防禦。 |
| `trusted-types` | 定義允許哪些 Trusted Types 政策（進階 XSS 防禦）。 |
| `upgrade-insecure-requests` | 自動將 HTTP 請求升級為 HTTPS。 |
| `block-all-mixed-content` | 阻止混合內容（HTTP + HTTPS）載入。 |

---

## 🛡️ CSP 選項（值）

| 值 | 說明 |
| ------------------ | ---------------------------------------- |
| `'self'` | 僅允許同源（自己的網域）。 |
| `'none'` | 完全不允許載入任何來源。 |
| `'unsafe-inline'` | 允許內嵌的 `<script>` 或 `style`，不推薦使用。 |
| `'unsafe-eval'` | 允許 `eval()`，不推薦使用。 |
| `'strict-dynamic'` | 允許動態腳本信任鏈條，與 nonce/hash 配合使用。 |
| `'report-sample'` | 發送 CSP 報告時包含觸發的原始碼。 |
| `https:` | 僅允許 HTTPS 資源。 |
| `data:` | 允許資料 URI，例如 `data:image/png;base64,...`。 |

---

## ✉️ 報告相關指令

| 指令 | 說明 |
| ------------ | ---------------------------- |
| `report-uri` | （舊）報告 CSP 違規的 URL。 |
| `report-to` | （新）使用 Reporting API 設定報告接收端。 |

---

## 🧪 範例

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://apis.google.com;
  style-src 'self' 'unsafe-inline';
  img-src *;
  connect-src 'self' https://api.example.com;
  frame-src https://www.youtube.com https://player.vimeo.com;
  report-uri /csp-report;

---

## ✅ 建議實務

* **優先使用 nonce 或 hash**，不要使用 `unsafe-inline`。
* **使用 `report-uri` 或 `report-to`** 來偵測潛在違規。
* **避免過度限制導致功能異常**，可先以 `Content-Security-Policy-Report-Only` 模式觀察。

---