Web セキュリティクリックジャッキングWeb 担当者学習

クリックジャッキング対策｜X-Frame-Options と CSP frame-ancestors

2026年5月9日ドメイン番人約 5 分で読めます

この記事でわかること

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

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

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

クリックジャッキング攻撃の流れ

被害例:

ネットバンキングの送金実行ボタンを誤って押させる
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 の比較

仕様上、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

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）

<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 セキュリティヘッダ単発チェックで 30 秒で確認できます。

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

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