新手指南：深入了解 Content-Security-Policy (CSP) 與網站安全
更新日期： 2025 年 3 月 4 日
本文為 資安入門 系列文，第 10 篇
- OWASP Top 10：最新的 Web 安全風險與防範措施（2021 版）
- MD5 加密演算法是什麼？
- SHA-1 是什麼？為什麼不再安全？
- 深入解析 Session：從概念到運作方式
- 什麼是 Session Fixation（會話固定攻擊）？
- HTTP 與 HTTPS 的差別：新手完整指南
- 跨站請求偽造（CSRF）入門指南：攻擊原理、實例與防禦方法
- 跨站指令碼攻擊（XSS）入門指南：從原理到防禦的全解析
- SQL 注入攻擊全解析：從入門到防禦實戰指南
- 新手指南：深入了解 Content-Security-Policy (CSP) 與網站安全 👈所在位置
- 從零理解 Same-Origin Policy：瀏覽器安全的第一道防線
- 跨來源資源共享（CORS）完整指南：打破瀏覽器的安全邊界
在現代網頁開發中，安全性是不可忽視的重要議題。
惡意攻擊（如 XSS（跨站腳本攻擊））經常利用網頁漏洞來執行未經授權的腳本，從而竊取用戶資料或控制網站行為。
為了防止這類攻擊，瀏覽器提供了一種強大的安全機制——Content-Security-Policy (CSP)。
Content-Security-Policy（CSP） 是一種 HTTP 標頭（Header），可以幫助網站管理和限制可執行的資源。
例如 JavaScript、CSS、圖片和其他內容，從而降低 XSS 和資料洩露的風險。
本文將深入探討 CSP 的概念、語法、實作方式以及最佳實踐，幫助新手開發者理解並正確使用 CSP 來保護網站安全。
什麼是 Content-Security-Policy (CSP)？
Content-Security-Policy（內容安全策略） 是一種安全機制，透過設置 HTTP 標頭，來限制網頁可以載入的資源來源，從而防止 XSS、資料注入攻擊和其他安全威脅。
CSP 的核心概念是「允許清單（Whitelist）」，也就是網站必須明確定義哪些資源是允許載入的，所有未授權的內容都會被瀏覽器自動封鎖。
例如，透過 CSP，我們可以規定：
- 只能載入同一個網域（self）的 JavaScript，而禁止第三方腳本。
- 阻止內嵌 JavaScript（inline script），防止惡意代碼執行。
- 限制圖片、CSS 和字型的來源，防止資源被竄改。
Content-Security-Policy 的基本語法
CSP 主要透過 HTTP 標頭 或 HTML <meta> 標籤 來設定，以下是基本的語法結構：
透過 HTTP 標頭設定
最常見的方式是透過 Content-Security-Policy 標頭在伺服器回應中設定，例如：
Content-Security-Policy: default-src 'self'; script-src 'self' https://apis.example.com這表示：
- 預設只允許來自同一個網域 (
self) 的資源。 - JavaScript 只能來自本機 (
self) 或https://apis.example.com。
透過 <meta> 標籤設定
如果無法修改伺服器的 HTTP 標頭，也可以在 HTML <head> 內使用 <meta> 來設定 CSP：
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://apis.example.com">
這種方法適用於靜態網站，但某些瀏覽器可能不支援所有 CSP 規則。
常見的 CSP 指令與用途
CSP 透過指令（Directives） 來指定不同類型的資源加載策略，以下是幾個最常見的指令：
default-src（預設來源）
- 定義所有資源（JavaScript、CSS、圖片等）的預設來源。
- 若未指定其他細分指令，則
default-src會套用到所有類型的資源。 - 例子：
Content-Security-Policy: default-src 'self'這表示所有資源（除非另外指定）都只能來自當前網站的同一網域。
script-src（限制 JavaScript 來源）
- 限制 JavaScript 的載入來源，防止惡意腳本執行。
- 例子：
Content-Security-Policy: script-src 'self' https://apis.example.com這表示 JavaScript 只能來自本機 (self) 或https://apis.example.com，其他來源的腳本都會被封鎖。
style-src（限制 CSS 來源）
- 限制 CSS 樣式表的載入來源，防止惡意的樣式注入。
- 例子：
Content-Security-Policy: style-src 'self' https://cdn.example.com這表示 CSS 只能來自本機或https://cdn.example.com。
img-src（限制圖片來源）
- 限制圖片的載入來源，防止外部圖片洩露用戶資訊。
- 例子：
Content-Security-Policy: img-src 'self' data:這表示圖片只能來自本機或 base64 內嵌圖片（data:）。
frame-src（限制 <iframe> 來源）
- 限制可以嵌入網站的
<iframe>來源，避免點擊劫持攻擊（Clickjacking）。 - 例子：
Content-Security-Policy: frame-src 'self'這表示只能嵌入同一個網站的 iframe，外部網站的 iframe 會被封鎖。
如何測試與調整 CSP？
在實作 CSP 時，我們可以使用 報告模式（Report-Only） 來測試 CSP 是否會影響網站正常運作。
使用 Content-Security-Policy-Report-Only 進行測試
我們可以先設定 Content-Security-Policy-Report-Only，讓瀏覽器在違反 CSP 時發出警告，但不會阻擋內容：
Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self' https://apis.example.com
這樣我們可以在 開發者工具（F12 → Console） 查看是否有違規資源，再逐步調整 CSP 設定。
利用瀏覽器開發者工具檢測
開啟 Chrome DevTools 或 Firefox DevTools：
- F12 或右鍵 → 檢查，進入 Console 或 Network 分析 CSP 錯誤。
- 檢查
Content-Security-Policy是否阻擋了網站必要的資源。 - 根據報告逐步修改 CSP 設定，確保安全性與網站功能兼容。
CSP 最佳實踐
- 避免使用
unsafe-inlineunsafe-inline允許內嵌 JavaScript，容易導致 XSS 漏洞，應盡量避免：script-src 'self' 'unsafe-inline'- 解決方法：使用 外部 JavaScript 檔案，或利用 nonce 安全標記。
- 使用
nonce或hash允許安全的內嵌腳本- 透過
nonce（一次性隨機碼）允許特定腳本執行：script-src 'self' 'nonce-random123' - 這樣只有帶有正確
nonce的腳本才能執行。
- 透過
- 定期測試並監控 CSP 政策
- 使用
Content-Security-Policy-Report-Only進行測試。 - 配合 CSP 報告機制監控違規內容，及時修正問題。
- 使用
結論
Content-Security-Policy（CSP）是一種強大的網站安全機制，可以有效防範 XSS 和其他攻擊。
透過正確的配置，開發者可以大幅提升網站的安全性，保護用戶資料不被竊取或篡改。
希望這篇文章能幫助新手開發者更好地理解 CSP，並在實際開發中加以應用！ 🚀