什麼是 CSP？
CSP（Content Security Policy，內容安全政策）是一個 HTTP 回應標頭，告訴瀏覽器這個頁面允許載入哪些來源的資源。它是防禦 XSS（Cross-Site Scripting，跨站腳本攻擊）最有效的機制之一。
CSP 解決的問題
XSS 攻擊之所以成立，是因為瀏覽器預設信任並執行頁面中出現的所有 JavaScript，不管這段程式碼是否是有意放進去的。只要攻擊者能在留言、搜尋結果或表單錯誤訊息中注入一個 <script> 標籤，瀏覽器就會執行它，且能完整存取頁面的 Cookie、localStorage 和 DOM。
CSP 打破這個假設。透過告訴瀏覽器「只執行來自這些來源的腳本」，即使攻擊者成功注入程式碼，沒有對應 CSP 授權的腳本也會被擋下。
CSP 的運作方式
伺服器在回應中附上 CSP 標頭：
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com
瀏覽器在渲染頁面前讀取這份政策，任何不符合政策的資源都會被擋下，並在開發者工具的主控台記錄錯誤。
常用 CSP 指令
| 指令 | 控制對象 |
|---|---|
| default-src | 所有未明確列出的資源類型的預設來源。 |
| script-src | JavaScript 檔案與行內腳本。安全性最關鍵的指令。 |
| style-src | CSS 樣式表與行內樣式。 |
| img-src | 圖片來源。img-src * 很常見，因為圖片通常不執行程式碼。 |
| connect-src | fetch、XHR、WebSocket 連線目標，API 請求的重要設定。 |
| form-action | 表單可以提交到的網址，防止表單被劫持。 |
| report-uri / report-to | 瀏覽器回報違規的端點。 |
Nonce — 允許行內腳本的正確做法
避免使用 'unsafe-inline' 又需要行內腳本，解法是使用 nonce。伺服器每次回應時產生隨機值，同時放在標頭和 script 標籤中：
Content-Security-Policy: script-src 'nonce-r4nd0mV4lu3'
<script nonce="r4nd0mV4lu3">...</script>
攻擊者注入的 <script> 標籤無法得知當次回應的 nonce，因此被擋下。
Report-Only 測試模式
在現有網站部署 CSP 可能導致資源被誤擋。Content-Security-Policy-Report-Only 標頭讓你在不阻擋任何內容的情況下測試政策。瀏覽器只回報違規，不實際封鎖。確認政策不會破壞網站後，再換成正式的 CSP 標頭。