HTTP Content Security Policy（CSP）安全設定指南

Content Security Policy（CSP）是一種 HTTP 安全標頭（Header），用於減少 XSS（跨站腳本攻擊）、資料竊取 以及 惡意代碼注入 的風險。本指南將介紹如何在 Apache（httpd） 和 NGINX 設定 CSP 標頭，並提供最佳安全實踐。

---

目錄

• 什麼是 CSP？
• CSP 設定語法
• Apache 設定 CSP
• NGINX 設定 CSP
• CSP 安全最佳實踐
• 測試與驗證 CSP 設定
• 結語

---

什麼是 CSP？

CSP 是一種 HTTP 回應標頭，允許網站管理員控制 允許載入的資源（如 JavaScript、CSS、影像、字型等），防止惡意代碼執行。例如：

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-scripts.com

此設定允許：
✅ 只從相同來源 (self) 加載所有資源
✅ 允許 https://trusted-scripts.com 提供 JavaScript
❌ 禁止內聯 JavaScript (<script> alert(1); </script>)
❌ 禁止載入未知的外部 JavaScript

---

CSP 設定語法

CSP 使用 指令（Directives） 來控制不同類型的資源載入。常見指令包括：

指令	作用
default-src	預設來源（適用於所有類別資源）
script-src	允許的 JavaScript 來源
style-src	允許的 CSS 來源
img-src	允許的圖片來源
font-src	允許的字型來源
connect-src	允許的 AJAX、WebSocket 來源
frame-src	允許的 iframe 來源
object-src	允許的 object、embed 來源

範例 CSP 設定

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-scripts.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:

⚠️ 避免使用 unsafe-inline（允許內聯腳本），容易遭受 XSS 攻擊！

---

Apache 設定 CSP

在 Apache 上，使用 Header set 設定 CSP 標頭。

步驟 1：啟用 headers 模組

sudo a2enmod headers
sudo systemctl restart apache2

步驟 2：修改 Apache 設定檔（如 /etc/httpd/conf.d/security.conf）

sudo nano /etc/httpd/conf.d/security.conf

新增：

<IfModule mod_headers.c>
    Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://trusted-scripts.com; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'"
</IfModule>

儲存後，重新啟動 Apache：

sudo systemctl restart httpd

---

NGINX 設定 CSP

在 NGINX 上，使用 add_header 設定 CSP 標頭。

步驟 1：編輯 NGINX 設定檔

sudo nano /etc/nginx/conf.d/security.conf

新增：

server {
    listen 443 ssl;
    server_name example.com;

    add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://trusted-scripts.com; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'" always;

    location / {
        root /var/www/html;
        index index.html;
    }
}

儲存後，重新啟動 NGINX：

sudo systemctl restart nginx

---

CSP 安全最佳實踐

✅ 僅允許受信任的來源（script-src、style-src、img-src 等應設定明確的允許來源）。
✅ 阻止內聯 JavaScript 與 CSS（避免 unsafe-inline）。
✅ 阻止 eval()（script-src 應該加入 strict-dynamic）。
✅ 防止 iframe 點擊劫持（使用 frame-ancestors 'none'）。
✅ 避免過度放寬限制（如 * 或 data:）。
✅ 啟用報告模式（使用 report-uri 來接收違規回報）。

範例（增加 report-uri）：

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; report-uri /csp-violation-report

---

測試與驗證 CSP 設定

1. 使用 curl 測試

curl -I -s https://your-domain.com | grep Content-Security-Policy

2. 使用瀏覽器開發者工具

在 Chrome / Firefox 開發者工具（F12）內，檢查 Network > Headers，確認 CSP 標頭是否正確應用。

3. 使用 CSP Evaluator

Google 提供 CSP Evaluator，可分析 CSP 設定的安全性。

---

結語

CSP 是防止 XSS 攻擊的重要安全機制。本指南介紹了如何在 Apache 和 NGINX 上設定 CSP 安全標頭，並提供了最佳安全實踐與測試方法。建議根據網站需求，自訂 最嚴格但不影響功能 的 CSP 設定，以確保 網站安全性。