Content Security Policy（CSP）はXSS（クロスサイトスクリプティング）などの攻撃を緩和するためのHTTPレスポンスヘッダーです。許可するリソースの読み込み元をホワイトリスト形式で宣言し、それ以外のリソースをブラウザ側でブロックします。

CSPの仕組み

サーバーが以下のようなレスポンスヘッダーを返すと、ブラウザはそのポリシーに従ってリソースの読み込みを制御します。

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'
この例では「JavaScriptは自ドメインとインラインのみ許可、それ以外の外部JSはブロック」という設定です。

主要なディレクティブ

ディレクティブ制御するもの
default-src未指定ディレクティブのフォールバック
script-srcJavaScriptの読み込み元
style-srcCSSの読み込み元
img-src画像の読み込み元
font-srcフォントの読み込み元
connect-srcfetch / XHR / WebSocketの接続先
frame-srciframeで読み込めるURL
frame-ancestorsこのページをiframeに埋め込めるURL
object-srcFlash等のプラグインリソース
base-uri<base> タグで設定できるURL

基本的な設定例（Apache .htaccess）

<IfModule mod_headers.c>
  Header always set Content-Security-Policy "\
    default-src 'self'; \
    script-src 'self' 'unsafe-inline'; \
    style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; \
    img-src 'self' data: blob:; \
    font-src 'self' https://fonts.gstatic.com; \
    connect-src 'self'; \
    frame-ancestors 'none'; \
    object-src 'none'; \
    base-uri 'self' \
  "
</IfModule>
## Google Tag Manager・広告との互換性

GTMやGoogle広告・Meta Pixelを使っている場合は、それらのドメインを script-src に追加する必要があります。

script-src 'self' 'unsafe-inline' \
  https://www.googletagmanager.com \
  https://pagead2.googlesyndication.com \
  https://connect.facebook.net;

connect-src 'self' \
  https://www.google-analytics.com \
  https://stats.g.doubleclick.net \
  https://www.facebook.com;
外部サービスの追加は都度発生するため、Content-Security-Policy-Report-Only ヘッダーを使ってレポートモードで動作確認してから本番適用するのが安全です。

レポートモードでのテスト

Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self' 'unsafe-inline'
Report-Only ではブロックはせずにコンソールに警告のみ表示されるため、既存サイトへの影響を確認しながら設定を調整できます。問題がなければ Content-Security-Policy ヘッダーに切り替えます。

よくあるエラーと原因

CSP確認ツールでは、URLを入力するだけでCSPの設定状況をチェックし、GTM・GA4・Meta Pixelとの互換性とセキュリティスコアを確認できます。