CSPの始め方 GA4とAdSenseを許可する書き方

Content-Security-Policy は、設定を誤ると自分のサイトのスクリプトも止まります。Report-Only で違反を記録してから本番に移す手順、GA4 と AdSense を許可するディレクティブの書き方、本番後の維持の仕方を説明します。

CSP が防ぐもの

Content-Security-Policy(CSP)は、「このページで読み込んでよいスクリプト、画像、接続先はこれだけ」とブラウザに宣言するヘッダーです。掲示板やフォームの入力を通じてページに注入されたスクリプト(クロスサイトスクリプティング、XSS)は、許可されていない場所から来るため実行されません。改ざんでサイトに埋め込まれた外部への送信も、接続先が許可リストにないため止まります。

反面、設定を誤ると自分のサイトのスクリプトも止まります。他のセキュリティヘッダーと違い、CSP は「試して、記録を見て、直す」工程を省けません。この記事はその工程を扱います。5つの基本的なヘッダーについては、セキュリティヘッダー入門を先に読んでください。

Report-Only から始める

CSP には2つのヘッダー名があります。Content-Security-Policy は違反を実際にブロックし、Content-Security-Policy-Report-Only は何もブロックせず、違反をブラウザのコンソールと指定した送信先に記録するだけです。導入は必ず Report-Only から始めます。

Header always set Content-Security-Policy-Report-Only "default-src 'self'; script-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'"

この状態で1〜2週間、自分で主要なページを開き、開発者ツールのコンソールに出る違反を1つずつ確かめます。自分で入れた外部サービスのものはポリシーに追加し、心当たりのないものは、改ざんかプラグインの隠れた通信を疑って調べます。違反がなくなったら、ヘッダー名を Content-Security-Policy に変えて本番にします。

違反を自動で集めたい場合は、report-to ディレクティブで送信先を指定します。古い report-uri は非推奨ですが、当面は併記しておくと広いブラウザで記録されます。

GA4 を許可する書き方

Google アナリティクス(GA4)のタグは、googletagmanager.com からスクリプトを読み、計測データを google-analytics.com などへ送ります。必要な許可は次の3種類です。

script-src 'self' https://www.googletagmanager.com;
img-src 'self' https://*.google-analytics.com https://*.googletagmanager.com;
connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com;

加えて、ページに直接書く gtag('config', ...) の数行はインラインスクリプトなので、そのままでは script-src 'self' に弾かれます。対処は2つで、その数行をハッシュ値('sha256-...')で個別に許可するか、サーバー側で毎回違う nonce を生成してタグとヘッダーの両方に付けるかです。'unsafe-inline' を script-src に書けば動きますが、それでは XSS を防ぐ効果がほぼ失われます。Google タグマネージャーを経由する場合は、Google がタグマネージャー用の CSP ガイドを公開しているので、その記述に従ってください。

AdSense は広告ごとに配信元が変わり、iframe の中でさらにスクリプトを読むため、許可の範囲が GA4 よりずっと広くなります。Google が公開している AdSense 向けの CSP ガイドでは、script-src、frame-src、img-src、connect-src などに、googlesyndication.com、doubleclick.net、google.com、adtrafficquality.google といった複数のドメインをワイルドカードで列挙する形が示されています。このリストは Google 側の変更で更新されるため、記事に固定で書いた値を写すより、必ず最新のガイドを参照してください。

現実的には、広告を載せるページで厳格な CSP を保つのは難しく、「AdSense に必要な範囲は許可し、それ以外の読み込み先を絞る」という落としどころになります。Content-Security-Policy生成には GA4 と AdSense のプリセットがあり、使っているサービスにチェックを入れるだけで、上のような許可をまとめた雛形が出ます。まず Report-Only で出力し、コンソールの違反を見て調整してください。

本番での維持

CSP は一度書いて終わりではありません。プラグインの追加、外部サービスの変更、Google 側のドメイン変更で、ある日突然ブロックが起きます。本番化した後も Report-Only のヘッダーを「次に試す案」として併記しておくと、新しい制限を安全に試せます。セキュリティヘッダー診断で、ヘッダーが実際に出ているかを定期的に確かめてください。

確認に使えるツール

Content-Security-Policy生成: GA4、AdSense などのプリセットから雛形を作り、既存の CSP を解析します
セキュリティヘッダー診断: CSP を含むヘッダーの設定状況を確認します