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

- クリックジャッキング攻撃の仕組みと典型的な被害
- X-Frame-Options（旧仕様）と CSP frame-ancestors（新仕様）の違い
- DENY / SAMEORIGIN / 'none' / 'self' などの設定値の選び方
- サーバー別（Cloudflare / Nginx / WordPress）の設定例

## クリックジャッキング攻撃とは

クリックジャッキングは、**自社サイトを攻撃者の罠サイトに iframe で透明に重ねて、ユーザーに気付かれずに操作させる**攻撃です。

![クリックジャッキング攻撃の流れ](/blog/x-frame-options-clickjacking/clickjacking-attack.svg)

被害例:
- ネットバンキングの送金実行ボタンを誤って押させる
- SNS の投稿・フォロー・友達追加ボタン
- アカウント設定の権限変更
- ECサイトの「購入」ボタン

ユーザーが「ログイン済みの状態」で罠サイトにアクセスすると、ブラウザは認証 Cookie を自動で付けて iframe 内のリクエストを実行します。攻撃者は iframe の中身を見ることはできなくても、**アクション（クリック）だけは確実に実行できる**のがポイントです。

## 対策は「自社サイトを iframe に入れさせない」

対策の方針はシンプル: **自社サイトを第三者サイトの iframe に入れさせない**。これを実現するヘッダが 2 つあります。

### X-Frame-Options（旧仕様、RFC 7034）

```
X-Frame-Options: SAMEORIGIN
```

- **DENY**: どのサイトからも iframe 禁止
- **SAMEORIGIN**: 同一オリジン（自社ドメイン）からの iframe のみ許可
- **ALLOW-FROM**: 特定 URL のみ許可（多くの主要ブラウザで非対応・廃止傾向）

### CSP frame-ancestors（新仕様・推奨）

```
Content-Security-Policy: frame-ancestors 'self' https://partner.example.com
```

- **'none'**: どこからも iframe 禁止（X-Frame-Options DENY 相当）
- **'self'**: 同一オリジンのみ（X-Frame-Options SAMEORIGIN 相当）
- **複数ホスト指定可**: パートナー企業のサイトからの埋め込みだけ許可、等の柔軟な制御

![X-Frame-Options と CSP frame-ancestors の比較](/blog/x-frame-options-clickjacking/xfo-vs-csp.svg)

仕様上、**CSP frame-ancestors が指定されていれば X-Frame-Options は無視される**ため、両方設定しても問題ありません。古いブラウザ向けに X-Frame-Options を残しつつ、新しい制御として CSP frame-ancestors を併用するのが安全です。

## 設定値の選び方（Web 担当者向け）

### 「自社サイトに iframe 埋め込みの予定がない」→ DENY / 'none'

```
X-Frame-Options: DENY
Content-Security-Policy: frame-ancestors 'none'
```

ほとんどのコーポレートサイトはこれで十分です。最も安全。

### 「自社内で iframe を使う（管理画面のプレビュー等）」→ SAMEORIGIN / 'self'

```
X-Frame-Options: SAMEORIGIN
Content-Security-Policy: frame-ancestors 'self'
```

WordPress の管理画面プレビュー機能等を使うサイト向け。

### 「特定パートナーサイトに埋め込みを許可する」→ frame-ancestors で複数指定

```
Content-Security-Policy: frame-ancestors 'self' https://trusted-partner.com
```

X-Frame-Options では実現できないため、CSP に頼ります。

## サーバー別の設定例

### Cloudflare（Transform Rules）

ダッシュボード → Rules → Transform Rules → Modify Response Header

- 名前: Set X-Frame-Options
- 条件: Hostname equals example.co.jp
- アクション: Set static value
  - Header name: `X-Frame-Options`
  - Value: `SAMEORIGIN`

CSP との併設は CSP のルールを別途追加。

### Nginx

```nginx
server {
    listen 443 ssl;
    server_name example.co.jp;

    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header Content-Security-Policy "frame-ancestors 'self'" always;
}
```

`always` を付けて 4xx/5xx 応答にも付与。

### WordPress（.htaccess）

```apache
<IfModule mod_headers.c>
  Header always set X-Frame-Options "SAMEORIGIN"
  Header always set Content-Security-Policy "frame-ancestors 'self'"
</IfModule>
```

## 設定後の確認

ブラウザの開発者ツール → Network タブで対象ページを開き、Response Headers を確認します。

- `X-Frame-Options: SAMEORIGIN` が見える
- `Content-Security-Policy` に `frame-ancestors` が含まれる

加えて、コマンドラインで `curl -I https://example.co.jp/` でも確認できます。

## まとめ

- クリックジャッキングは「自社サイトを罠サイトに iframe で重ねる」攻撃
- X-Frame-Options（旧）と CSP frame-ancestors（新・推奨）の 2 種類の対策ヘッダ
- 多くのサイトは **DENY / 'none'**（iframe 禁止）で十分
- 両方設定しておくと古いブラウザにも対応できる

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

自社サイトに X-Frame-Options / CSP frame-ancestors が設定されているかは、ドメイン番人の [Web セキュリティヘッダ 単発チェック](/security-headers/check) で 30 秒で確認できます。

設定変更のスポット支援は [Web セキュリティヘッダ診断＋設定支援](/contact)（3 万円〜）でご相談いただけます。CSP の入門は [CSP（Content-Security-Policy）とは？Web 担当者のための入門](/blog/csp-content-security-policy-toha)、HSTS の設定方法は [HSTS の設定方法｜Cloudflare / Nginx / WordPress 別の手順](/blog/hsts-settei-houhou) を参照してください。ブラウザ機能を制限する [Permissions-Policy ヘッダーの設定](/blog/permissions-policy-toha) も同じセキュリティヘッダー群の一部です。

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