静的サイトにおけるCSPの重要性
Hugoで構築された静的サイトは動的アプリケーションより本質的に安全ですが、アクセス解析、広告、埋め込みコンテンツのためにサードパーティスクリプトを実行します。**Content Security Policy（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/ディレクトリに配置します。ビルド時に出力ディレクトリにコピーされ、Cloudflare Pagesが自動的に認識します。
Hugoブログ向けの現実的なCSP
Google AdSense、Google Analytics、YouTube埋め込みを使用するブログでは、より許容的なポリシーが必要です：
Content-Security-Policy:
default-src 'self';
script-src 'self' 'strict-dynamic'
'sha256-...'
https://www.googletagmanager.com
https://pagead2.googlesyndication.com
https://www.youtube.com;
img-src 'self' https://*.googleapis.com
https://*.googlesyndication.com
data:;
frame-src 'self' https://www.youtube.com;
connect-src 'self' https://*.google-analytics.com;
report-uri /csp-report;
Nonce vs Hashの選択
インラインスクリプトの認証には、nonce方式とhash方式があります。静的なHugoサイトでは、デプロイ間で値が変わらないhash方式が適しています。
echo -n 'console.log("safe")' | openssl dgst -sha256 -binary | base64
strict-dynamicの活用
'strict-dynamic'ディレクティブは、信頼されたスクリプトによって読み込まれたスクリプトを自動的に信頼します。これにより、すべてのCDN URLを列挙する必要がなくなり、CSP管理が大幅に簡素化されます。
script-src 'self' 'strict-dynamic' 'sha256-ABC...';
Google AdSenseのCSP要件
AdSenseの利用には以下の最低限の許可が必要です：
| ディレクティブ | 必要なソース |
|---|---|
| script-src | https://pagead2.googlesyndication.com |
| img-src | https://*.googlesyndication.com, https://*.doubleclick.net |
| frame-src | https://googleads.g.doubleclick.net |
CSPレポートの設定
report-uriディレクティブを設定すると、CSP違反レポートを受信できます。本番展開前にContent-Security-Policy-Report-Onlyヘッダーを使用してテストすることで、機能を壊さずに問題を特定できます。
適切に設定されたCSPは、XSSやスクリプトインジェクションからHugoブログの訪問者を保護しつつ、正当なサードパーティサービスの機能を維持します。strict-dynamic、スクリプトハッシュ、Report-Onlyモードによる段階的デプロイを組み合わせることで、保護と機能のバランスが取れた堅牢なセキュリティ体制を構築できます。