X-Frame-Optionsとは？クリックジャッキング対策を解説

セキュリティ

X-Frame-Optionsとは、Webページを他のサイトから<iframe>などで埋め込めるかどうかを制御するHTTPレスポンスヘッダーです。

主な目的は、利用者をだまして意図しないボタンやリンクを押させる「クリックジャッキング」を防ぐことです。現在は、より柔軟に制御できるContent Security Policy（CSP）のframe-ancestorsも使われます。

30秒でわかる結論

  • X-Frame-Optionsは、他サイトからのiframe等による埋め込みを制御するHTTPレスポンスヘッダー
  • 主な目的はクリックジャッキング対策
  • DENYはすべてのフレーム埋め込みを拒否する
  • SAMEORIGINは同一オリジンからの埋め込みだけ許可する
  • ALLOW-FROMは廃止扱いで、現代ブラウザでは頼れない
  • より柔軟な制御にはCSPのframe-ancestorsを使う
  • X-Frame-Optionsはmetaタグでは効かず、HTTPレスポンスヘッダーとして送る必要がある
  • WordPress初心者は、まずサーバー・WAF・セキュリティプラグイン側の既存設定を確認する
  • 外部サービスへページを埋め込む必要があるサイトは、DENYを一律設定する前に要件を確認する

X-Frame-Optionsとは？

X-Frame-Optionsは、ブラウザに対して「このページを他のページ内のフレームとして表示してよいか」を伝えるHTTPレスポンスヘッダーです。

対象になる代表的な埋め込み

  • <frame>
  • <iframe>
  • <embed>
  • <object>

MDNでは、X-Frame-Optionsを使うことで、ページが他サイトへ勝手に埋め込まれるのを防ぎ、クリックジャッキング対策や一部のクロスサイト情報漏えい対策に役立つと説明しています。

初心者向けに一言でいうと

「このページを他サイトの中に勝手に表示させないための設定」です。

クリックジャッキングとは？

クリックジャッキングとは、利用者に見えている画面と、実際にクリックしている要素をずらすことで、意図しない操作をさせる攻撃です。

攻撃のイメージ

1．攻撃者が自分のページへ正規サイトを透明なiframeで重ねる

2．利用者には「再生」や「次へ」など別のボタンに見せる

3．実際には正規サイト上の重要ボタンをクリックさせる

このように、利用者が意図していない操作を正規サイト上で実行させるのがクリックジャッキングです。

単純なリンク詐欺とは違う

クリックジャッキングでは、正規サイト自体をフレーム内に重ねて利用者の操作を誘導します。そのため、ページが他サイトへ埋め込まれるかどうかを制御することが重要です。

X-Frame-Optionsで使う値

現在、実用上覚えておきたい値はDENYとSAMEORIGINです。

値 意味
DENY すべてのフレーム埋め込みを拒否
SAMEORIGIN 同一オリジンからの埋め込みのみ許可
ALLOW-FROM 廃止扱い。現代ブラウザでは利用しない

DENYとは？

DENYは、ページをどのオリジンからもフレーム内に読み込ませない設定です。

設定例

X-Frame-Options: DENY

MDNでは、DENYを設定すると同一オリジン・他オリジンを問わずフレーム内表示を拒否すると説明しています。

管理画面

DENYとの相性：高い

外部から埋め込む必要がなければ強く制限できます。

一般会社サイト

DENYとの相性：高め

他サイトで埋め込む用途がなければ候補になります。

外部埋め込み前提ページ

DENYとの相性：低い

埋め込み要件がある場合は使えません。

SAMEORIGINとは？

SAMEORIGINは、同じオリジンからのフレーム埋め込みだけを許可する設定です。

設定例

X-Frame-Options: SAMEORIGIN

たとえばexample.comのページを、同じexample.com内の別ページからiframeで使う必要がある場合に候補になります。

「同じドメイン」だけで考えない

オリジンは、スキーム・ホスト・ポートの組み合わせで判断されます。単純にドメイン名が似ているだけでは同一オリジンとは限りません。

ALLOW-FROMは使わない

古い情報では、特定の外部サイトだけ埋め込みを許可するためにALLOW-FROMが紹介されている場合があります。

古い形式の例

X-Frame-Options: ALLOW-FROM https://example.com

しかしMDNでは、ALLOW-FROMは廃止されたディレクティブで、現代ブラウザでは無視されると説明しています。

特定サイトだけ許可したいならCSP

外部の特定サイトだけ埋め込みを許可したい場合は、X-Frame-OptionsではなくCSPのframe-ancestorsを使います。

CSPのframe-ancestorsとは？

Content Security Policy（CSP）のframe-ancestorsは、どの親ページから自分のページを埋め込めるかを指定するディレクティブです。

すべて拒否

Content-Security-Policy: frame-ancestors 'none';

同一オリジンだけ許可

Content-Security-Policy: frame-ancestors 'self';

特定サイトも許可

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

OWASPは、frame-ancestorsを使うことで複数の許可元を柔軟に指定できると説明しています。

X-Frame-Optionsとframe-ancestorsの違い

項目 X-Frame-Options CSP frame-ancestors
主目的 フレーム埋め込み制御 フレーム埋め込み制御
すべて拒否 DENY ‘none’
同一オリジン SAMEORIGIN ‘self’
複数許可元 不可 可能
柔軟性 低い 高い

現在の考え方

新しく細かく制御するならCSPのframe-ancestorsを中心に考え、古いブラウザとの互換性や多層防御も考える場合にX-Frame-Optionsを併用します。

X-Frame-Optionsはmetaタグでは効かない

X-Frame-OptionsはHTTPレスポンスヘッダーとしてブラウザへ送る必要があります。

誤った設定例

<meta http-equiv="X-Frame-Options" content="DENY">

→ 効果はありません。

MDNとOWASPの両方で、metaタグによるX-Frame-Options指定は機能しないと明記されています。

どこで設定する？

X-Frame-Optionsは、Webサーバー、リバースプロキシ、CDN、WAF、アプリケーションなどでHTTPレスポンスヘッダーとして追加します。

主な設定場所

  • Apache
  • Nginx
  • CDN
  • WAF
  • アプリケーション
  • セキュリティプラグイン

共用レンタルサーバーでは、利用者が直接Webサーバー設定を変更できない場合があります。その場合は事業者の管理画面・公式マニュアルを確認します。

WordPressではどう設定する？

WordPress自体の管理画面には、すべての公開ページへX-Frame-Optionsを一括設定する標準UIはありません。

実際には、サーバー設定、セキュリティプラグイン、CDN・WAFなどで追加することがあります。

プラグインを重ねすぎない

サーバー側・CDN・プラグインの複数箇所で同じセキュリティヘッダーを追加すると、意図しない重複や矛盾が起きることがあります。どこで管理するか1か所に整理してください。

設定後の確認方法

設定したら、実際のHTTPレスポンスヘッダーに値が含まれているか確認します。

確認方法

  • ブラウザ開発者ツールのNetwork
  • curlなどでレスポンスヘッダー確認
  • セキュリティヘッダー確認サービス

確認したい表示

X-Frame-Options: DENY

または

X-Frame-Options: SAMEORIGIN

設定ファイルへ書いたことではなく、ブラウザへ実際に返っているHTTPレスポンスを確認することが重要です。

DENYとSAMEORIGINはどちらを選ぶ？

他ページから埋め込む必要があるかで判断します。

状況 候補
どこからも埋め込まない DENY
自サイト内だけで埋め込む SAMEORIGIN
特定の外部サイトでも埋め込む CSP frame-ancestors

厳しくすればよいとは限らない

必要な埋め込みまでブロックすると機能が壊れます。セキュリティ設定は「最も厳しい値」ではなく、必要な機能を保ちながら不要な埋め込みを止める値を選びます。

外部サービスのiframeが壊れることはある？

あります。

自分のページを外部サイトへ埋め込む必要がある場合、DENYやSAMEORIGINを設定すると表示できなくなる可能性があります。

影響しやすい例

  • 外部ポータルへ自社ページをiframe埋め込み
  • 社内システムで別ドメインから画面を埋め込み
  • パートナーサイト内で自社フォームを表示

こうした要件がある場合は、CSP frame-ancestorsで許可元を限定する方が適しています。

YouTubeやGoogleマップの埋め込みに影響する？

通常、X-Frame-Optionsは自分のページが他サイトに埋め込まれることを制御します。

自分のページ内にYouTubeやGoogleマップなど外部コンテンツをiframeで表示することとは、向きが逆です。

混同しやすいポイント

X-Frame-Optionsは「自分のページを誰が埋め込めるか」の制御です。「自分のページからどのiframeを読み込めるか」を制御するものではありません。

frame-srcとの違い

CSPにはframe-srcというディレクティブもありますが、frame-ancestorsとは役割が逆です。

項目 役割
frame-ancestors 誰が自分のページを埋め込めるか
frame-src 自分のページがどこからiframeを読み込めるか

覚え方

ancestors：自分を囲む親側を制御

src：自分が読み込む子側を制御

SameSite Cookieとの関係

OWASPは、クリックジャッキング対策としてSameSite Cookieも防御層の1つに挙げています。

SameSite=LaxやStrictを使うと、クロスサイトiframe内で認証Cookieが送られないケースがあり、ログイン済み状態を悪用するクリックジャッキングを防ぎやすくなります。

SameSiteだけに頼らない

SameSiteはフレーム表示そのものを禁止する仕組みではありません。X-Frame-OptionsやCSP frame-ancestorsと組み合わせる多層防御として考えます。

JavaScriptのframe-busterは必要？

古いクリックジャッキング対策では、JavaScriptで「フレーム内ならトップページへ移動する」といったframe-busterが使われることがありました。

現在は、ブラウザがHTTPヘッダーとして処理するX-Frame-OptionsやCSP frame-ancestorsを優先します。

ヘッダーを優先

JavaScriptは無効化・回避・実行順序などの影響を受けます。フレーム制御はブラウザが強制できるHTTPレスポンスヘッダーで行うのが基本です。

X-Frame-Optionsだけでクリックジャッキングを完全に防げる？

すべてのUI攻撃を完全に防げるわけではありません。

OWASPは、X-Frame-OptionsやCSP frame-ancestorsがフレームベースのクリックジャッキング対策になる一方、別ウィンドウを悪用するDoubleClickjackingなど、別の手法には追加対策が必要と説明しています。

重要操作は追加確認も考える

決済、アカウント削除、セキュリティ設定変更など重要操作では、サーバー側の再認証・確認処理などを組み合わせる方が安全です。

共用レンタルサーバー利用者は設定すべき？

一般的な会社サイトやブログで、外部から自分のページをiframe埋め込みする必要がなければ、X-Frame-OptionsまたはCSP frame-ancestorsによる制御を検討できます。

ただし、共用レンタルサーバーでは事業者やWAFが既にセキュリティヘッダーを付与している場合があります。

初心者の確認順

  1. ブラウザで現在のレスポンスヘッダーを確認
  2. レンタルサーバーの公式マニュアルを確認
  3. CDN・WAFの設定を確認
  4. WordPressプラグイン側の設定を確認
  5. 必要ならX-Frame-OptionsまたはCSPを追加

VPSではどこで設定する？

VPSでは、Nginx・ApacheなどのWebサーバー、リバースプロキシ、アプリケーションなどで設定できます。

ただし、設定ファイルを変更する場合は構文エラーに注意します。

本番でいきなり変更しない

設定前にバックアップを取り、構文チェック・ステージング環境・レスポンスヘッダー確認を行ってから本番へ反映してください。

設定時によくあるミス

注意

  • metaタグへ書いて設定したつもりになる
  • ALLOW-FROMを現在も使えると思う
  • DENYを設定して必要なiframe埋め込みまで壊す
  • X-Frame-OptionsとCSPで矛盾する設定を入れる
  • サーバー・CDN・プラグインで重複設定する
  • 設定ファイルだけ見て実際のレスポンスを確認しない
  • frame-srcとframe-ancestorsを混同する

教科書判定

教科書判定

外部埋め込みが不要ならDENY、同一サイト内で必要ならSAMEORIGIN。細かい許可はCSP frame-ancestors

一般的な会社サイトやWordPressブログで、外部からページをiframe埋め込みする必要がなければ、X-Frame-Options: DENYは分かりやすい選択肢です。

同一オリジン内の埋め込みが必要ならSAMEORIGIN、特定の外部ドメインも許可する必要があるならCSPのframe-ancestorsを使います。

初心者は、まず現在のレスポンスヘッダーを確認し、レンタルサーバー・CDN・WAF・プラグインのどこで設定されているかを整理してから変更してください。

FAQ

Q. X-Frame-Optionsは何のための設定ですか？

A. 自分のWebページが他サイトのiframe等へ埋め込まれるのを制限し、クリックジャッキングを防ぐためのHTTPレスポンスヘッダーです。

Q. DENYとSAMEORIGINはどちらがよいですか？

A. どこからも埋め込む必要がなければDENY、自サイト内からの埋め込みが必要ならSAMEORIGINを検討します。

Q. ALLOW-FROMは使えますか？

A. 現在は廃止扱いで、現代ブラウザでは頼れません。特定の外部サイトだけ許可したい場合はCSPのframe-ancestorsを使います。

Q. metaタグでX-Frame-Optionsを設定できますか？

A. できません。HTTPレスポンスヘッダーとして送る必要があります。

Q. X-Frame-OptionsとCSPは両方必要ですか？

A. 必須とは限りません。現在はCSP frame-ancestorsの方が柔軟ですが、互換性や多層防御のためX-Frame-Optionsを併用する構成もあります。設定が矛盾しないようにしてください。

まとめ

X-Frame-Optionsはフレーム埋め込みを制限するクリックジャッキング対策

  • HTTPレスポンスヘッダーとして設定する
  • DENYはすべての埋め込みを拒否する
  • SAMEORIGINは同一オリジンだけ許可する
  • ALLOW-FROMは廃止扱い
  • 細かな許可元指定にはCSP frame-ancestorsを使う
  • metaタグでは効果がない
  • frame-srcとは役割が違う
  • SameSite Cookieは補助的な防御になる
  • 必要なiframe機能を壊さないよう確認する
  • 設定後は実際のレスポンスヘッダーを確認する

次に読む

次に読む

「セキュリティヘッダーとは？Webサイトで設定する意味」「CSPとは？Content Security Policyの仕組みを解説」「CSRFとは？仕組みと対策を初心者向けに解説」「Basic認証とは？仕組み・設定用途・注意点」もあわせて確認してください。