## この記事でわかること

- Cloudflare でセキュリティヘッダを設定する 2 つの方法と使い分け
- HSTS の専用 UI 設定（最も簡単）
- Transform Rules で任意のヘッダを設定する 4 ステップ
- Free プランで使えるルール数とその範囲

## Cloudflare の 2 つの設定方法

![Cloudflare でセキュリティヘッダを設定する 2 つの方法](/blog/cloudflare-security-headers/two-methods.svg)

### A. 専用 UI（HSTS / nosniff のみ、最も簡単）

Cloudflare には HSTS と nosniff の専用 UI があり、GUI から数クリックで設定できます。

### B. Transform Rules（任意のヘッダ）

CSP / X-Frame-Options / Referrer-Policy / Permissions-Policy 等は専用 UI が無いため、**Transform Rules → Modify Response Header** で設定します。

**推奨は両者のハイブリッド**:
- HSTS は専用 UI で簡単に設定
- それ以外は Transform Rules で 1 ルールずつ追加

## A. 専用 UI で HSTS を設定する

### 手順
1. Cloudflare ダッシュボード → 対象ドメインを選択
2. **SSL/TLS** → **Edge Certificates**
3. 下部の **HTTP Strict Transport Security (HSTS)** で **Enable HSTS** をクリック
4. **初回設定（推奨）**:
   - **Max Age Header (max-age)**: `1 day` または `1 month`（短期で動作確認）
   - **Apply HSTS policy to subdomains**: OFF（保有サブドメインを全棚卸しするまで）
   - **Preload**: OFF
   - **No-Sniff Header**: ON
5. **Save** をクリック → 動作確認 → 問題なければ Max Age を `12 months` に拡大、includeSubDomains / preload を有効化

> **重要**: いきなり `12 months` + includeSubDomains + preload を ON にしないでください。一度ブラウザに記憶された HSTS は撤回が困難で、HTTPS 設定の不備や未把握サブドメインの HTTP 停止が起きるとサービス停止に直結します。段階導入の詳細は [HSTS の設定方法｜Cloudflare / Nginx / WordPress 別の手順](/blog/hsts-settei-houhou) を参照してください。

### 注意点
- HSTS は一度有効化するとブラウザに記憶されるため、**事前に保有サブドメインが全て HTTPS 対応済み**であることを確認してから includeSubDomains を ON に
- Preload は申請後の解除に半年以上かかるので慎重に

## B. Transform Rules で任意のヘッダを設定する

CSP / X-Frame-Options 等は Transform Rules で追加します。Free プランでも 5 ルールまで使えるので、主要ヘッダの設定は無料枠で十分です。

![Cloudflare Transform Rules の設定 4 ステップ](/blog/cloudflare-security-headers/transform-rule-setup.svg)

### 設定 4 ステップ

1. **Rules** → **Transform Rules** を開く
2. **Modify Response Header** タブ → **Create rule**
3. **条件**:
   - Field: `Hostname`
   - Operator: `equals`
   - Value: `example.co.jp`
4. **アクション**:
   - Modify response header
   - Set static
   - Header name: `X-Frame-Options`
   - Value: `SAMEORIGIN`
5. **Deploy** をクリック → 数十秒で全 PoP に反映

### 推奨ヘッダの値（コピペ用）

| Header name | Value |
|---|---|
| `X-Frame-Options` | `SAMEORIGIN` |
| `Referrer-Policy` | `strict-origin-when-cross-origin` |
| `Permissions-Policy` | `camera=(), microphone=(), geolocation=(), payment=(), usb=()`（[Permissions-Policy とは？](/blog/permissions-policy-toha)） |
| `Content-Security-Policy-Report-Only` | `default-src 'self'; script-src 'self'; report-uri /csp-report` |

CSP は最初 Report-Only で設定し、違反レポートを観察してから本番（Content-Security-Policy）に切り替えるのが安全です。詳しくは [CSP の段階的導入](/blog/csp-content-security-policy-toha) を参照。

## Free プランの制約

| プラン | Transform Rules（Modify Response Header） |
|---|---|
| Free | 5 ルール |
| Pro | 25 ルール |
| Business | 50 ルール |
| Enterprise | 125 ルール |

セキュリティヘッダ設定は **Free プランの 5 ルール枠で十分**です。HSTS は専用 UI で設定するので Transform Rules を消費しません。

## CDN Origin Pull の注意点

Cloudflare 配下のサイトでは、ブラウザに届くレスポンスヘッダは「Origin（オリジン）サーバーが返したヘッダ」+「Cloudflare がエッジで追加したヘッダ」の合計です。

- **Origin で同じヘッダを設定済み** → Cloudflare の Transform Rules で重複が起きる場合あり
- **CSP / Referrer-Policy 等は片方だけで設定**するのが安全

特に WordPress を Cloudflare 配下で運用している場合、`.htaccess` と Cloudflare の両方で同じヘッダを書くと値が二重になります。**どちらか片方に統一**するルールを社内で決めておきましょう。

推奨運用:
- **エッジで動作する HSTS / nosniff**: Cloudflare 専用 UI
- **動的に変える可能性が低い CSP / X-Frame / Referrer / Permissions**: Cloudflare Transform Rules
- **動的に nonce 付き CSP を生成したい**: Origin（WordPress / Nginx）で設定

## 設定後の確認

### Cloudflare ダッシュボードでの確認

Transform Rules の一覧で「Active」になっていることを確認。

### ブラウザの開発者ツール

F12 → Network → 任意のページ → Response Headers にヘッダが表示される。`cf-ray` ヘッダが付いていれば Cloudflare 経由のリクエストです。

### コマンドライン

```bash
curl -I https://example.co.jp/
```

### ドメイン番人の単発チェック

[Web セキュリティヘッダ 単発チェック](/security-headers/check) で 30 秒で全ヘッダの状態がスコアリングされます。

## まとめ

- **HSTS / nosniff** は Cloudflare の専用 UI（GUI でクリックだけ、所要 1 分）
- **CSP / X-Frame-Options / Referrer-Policy / Permissions-Policy** は Transform Rules
- Free プラン 5 ルール枠で十分
- Origin と Cloudflare の両方でヘッダを書かない（重複対策）

## まずは現状を把握しましょう

ドメイン番人の [Web セキュリティヘッダ 単発チェック](/security-headers/check) で 30 秒で確認できます。Cloudflare 配下でも、エッジで返されているヘッダの最終結果がそのまま見えます。

設定支援が必要な場合は [Web セキュリティヘッダ診断＋設定支援](/contact)（3 万円〜）でご相談ください。

サーバー別の設定: [WordPress でセキュリティヘッダを設定する](/blog/wordpress-security-headers) / [Nginx でセキュリティヘッダを設定する](/blog/nginx-security-headers) も参照してください。

各ヘッダの個別解説:
- [CSP（Content-Security-Policy）とは](/blog/csp-content-security-policy-toha)
- [HSTS の設定方法](/blog/hsts-settei-houhou)
- [クリックジャッキング対策](/blog/x-frame-options-clickjacking)

総合点検は [無料のドメイン診断](/diagnose) を、SSL 単独は [SSL 単発チェック](/ssl/check) をご利用ください。