---
title: "Content Security Policy（CSP）の設定方法と書き方"
description: "CSP（Content Security Policy）の基本的な設定方法と主要ディレクティブを解説します。XSS攻撃を防ぐためのヘッダー設定、GTM・Google広告との互換性の取り方もまとめました。"
date: 2026-05-07
tags: [CSP, セキュリティ, HTTP, Web制作]
related_tools: [csp, security-headers]
draft: false
---

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

## CSPの仕組み

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

```
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'
```

この例では「JavaScriptは自ドメインとインラインのみ許可、それ以外の外部JSはブロック」という設定です。

## 主要なディレクティブ

| ディレクティブ | 制御するもの |
|---|---|
| `default-src` | 未指定ディレクティブのフォールバック |
| `script-src` | JavaScriptの読み込み元 |
| `style-src` | CSSの読み込み元 |
| `img-src` | 画像の読み込み元 |
| `font-src` | フォントの読み込み元 |
| `connect-src` | fetch / XHR / WebSocketの接続先 |
| `frame-src` | iframeで読み込めるURL |
| `frame-ancestors` | このページをiframeに埋め込めるURL |
| `object-src` | Flash等のプラグインリソース |
| `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` ヘッダーに切り替えます。

## よくあるエラーと原因

- **インラインスクリプトがブロックされる**: `'unsafe-inline'` を許可するか、ハッシュ（`'sha256-...'`）やnonce方式に切り替える
- **Google Fontsが読み込まれない**: `style-src` に `https://fonts.googleapis.com`、`font-src` に `https://fonts.gstatic.com` を追加する
- **fetch()が失敗する**: `connect-src` に対象ドメインを追加する

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