Featured image of post 為 Hugo 部落格設計現代內容安全策略Featured image of post 為 Hugo 部落格設計現代內容安全策略
Security

為 Hugo 部落格設計現代內容安全策略

建立合規、安全的 HTTP 標頭，平衡分析、廣告標籤和資產安全。

  1. 首頁
  2. Webs
  3. 為 Hugo 部落格設計現代內容安全策略

為什麼 CSP 對於靜態網站很重要

使用 Hugo 建立的靜態網站本質上比動態應用程式更安全，但它們仍然執行用於分析、廣告和嵌入的第三方腳本。 內容安全策略 (CSP) 透過控制可以載入的資源來保護您的訪客免受 XSS、資料注入和惡意腳本執行的侵害。

透過 Cloudflare Pages 設定 CSP

Cloudflare Pages 支援自訂 _headers 檔案來控制 HTTP 回應標頭：

# static/_headers
/*
  Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'

對於 Hugo，將 _headers 檔案放在 static/ 目錄中，以便將其複製到輸出：

static/
├── _headers
├── css/
└── js/

為 Hugo 建構現實的 CSP

使用 Google AdSense、Google Analytics 和嵌入式 YouTube 影片的部落格需要更寬鬆的政策。這是一個生產就緒的 CSP：

# static/_headers
/*
  Content-Security-Policy:
    default-src 'self';
    script-src 'self'
      'strict-dynamic'
      'sha256-...'   (inline script hash)
      https://www.googletagmanager.com
      https://pagead2.googlesyndication.com
      https://www.youtube.com;
    style-src 'self'
      'sha256-...'   (inline style hash)
      https://fonts.googleapis.com;
    img-src 'self'
      https://*.googleapis.com
      https://*.googlesyndication.com
      https://www.google.com
      https://*.doubleclick.net
      https://*.youtube.com
      data:;
    font-src 'self'
      https://fonts.gstatic.com;
    frame-src 'self'
      https://www.youtube.com
      https://www.google.com;
    connect-src 'self'
      https://*.google-analytics.com;
    report-uri /csp-report;

使用隨機數與哈希值

對於內嵌腳本（在 Hugo 主題中常見），您有兩個選項：

隨機數字（每個請求唯一）：

<script nonce="ABC123">console.log("safe")</script>

客戶服務提供者：script-src 'nonce-ABC123'

隨機數最適合動態站點，但需要伺服器端生成，這對於完全靜態的 Hugo 站點來說很困難。

哈希（基於內容）：

<script>console.log("safe")</script>

客戶服務提供者：script-src 'sha256-...'

哈希對於靜態站點來說是理想的選擇，因為它們在部署過程中保持不變。計算內聯腳本的雜湊值並將其新增至策略中：

echo -n 'console.log("safe")' | openssl dgst -sha256 -binary | base64

理解嚴格動態

'strict-dynamic' 指令是一項強大的 CSP 功能。它告訴瀏覽器信任由已信任腳本載入的腳本，從而減少枚舉所有 CDN URL 的需要：

script-src 'self' 'strict-dynamic' 'sha256-ABC...';

使用 strict-dynamic ，如果您的主套件（透過雜湊受信任）載入 CDN 腳本，則該 CDN 腳本會自動受信任。這顯著簡化了具有許多第三方腳本的網站的 CSP 管理。

Google AdSense 的 CSP

AdSense 需要特定的 CSP 津贴。主要指令：

指令所需來源
腳本-srchttps://pagead2.googlesyndication.com、'unsafe-inline'（或雜湊）
img-srchttps://*.googlesyndication.com、https://*.doubleclick.net
框架-src佔位符_0

考慮僅將 'unsafe-inline' 作為最後的手段 - 哈希值更好。

雲端服務提供者報告

設定 report-uri 或 report-to 指令以接收違規報告：

Content-Security-Policy: ...; report-uri /csp-report;

您可以使用 report-uri.com 或 Cloudflare CSP Analytics 等服務來收集和視覺化報告。這有助於識別被阻止的資源而不破壞功能。

測試您的 CSP

在部署之前，使用 Content-Security-Policy-Report-Only 進行限制性策略測試：

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report;

該標頭除了發送違規報告外什麼也不強制執行，讓您安全地識別問題。

結論

配置良好的 CSP 可保護 Hugo 部落格訪客免受 XSS 和腳本注入的侵害，同時允許合法的第三方服務運作。透過僅報告模式結合 strict-dynamic、腳本雜湊和增量部署，您可以建立強大的安全態勢，平衡保護與功能。

©2022 - 2026 Commentary of Takao