X-Frame-Options
使い方
クリックジャッキング攻撃は、正規のページの上に重ねた隠し要素をユーザーにクリックさせます。攻撃者は対象サイトを透明な iframe に埋め込み、その上に欺瞞的な UI を配置して、フレーム内のコンテンツに向けられたクリックを奪い取ります。X-Frame-Options は、そのレスポンスをフレーム内に表示してよいかどうかをブラウザに伝えることで、これを防ぎます。
注意
X-Frame-Options は非推奨であり、CSP の frame-ancestors が推奨されます。現代のブラウザはすべて frame-ancestors をサポートしており、複数のオリジンやスキームの照合を含むより細かな制御が可能です。X-Frame-Options は、古いブラウザとの後方互換性のために今も広く導入されています。
このヘッダーは現役の値を 2 つ受け付けます。DENY と SAMEORIGIN です。3 つ目の値である ALLOW-FROM は初期の実装で定義されていましたが、現在は廃止されており、現代のブラウザでは無視されます。
DENY
DENY の値は、要求元のサイトに関わらず、そのページがいかなるフレーム内にも表示されるのを防ぎます。いかなる状況でもフレーム埋め込みは許可されません。
SAMEORIGIN
SAMEORIGIN の値は、同一オリジンを共有するページからのみフレーム埋め込みを許可します。https://example.re のページは https://example.re の別のページをフレームに埋め込めますが、異なるオリジンのページはブロックされます。
ALLOW-FROM (obsolete)
ALLOW-FROM uri の値は、かつて指定した URI からのフレーム埋め込みのみを許可するようブラウザに指示していました。現代のブラウザはこのディレクティブをサポートしていません。同等の機能は CSP の frame-ancestors ディレクティブで利用できます。
Content-Security-Policy: frame-ancestors https://trusted.example.re例
ページのフレーム埋め込みをすべてブロックする、クリックジャッキングに対する最も厳格な保護です。
X-Frame-Options: DENY同一オリジンのフレーム埋め込みを許可しつつ、外部サイトによるページの埋め込みをブロックします。
X-Frame-Options: SAMEORIGIN幅広いブラウザに対応するため、X-Frame-Options と CSP の frame-ancestors ディレクティブを組み合わせた多層防御の構成です。
X-Frame-Options: SAMEORIGIN
Content-Security-Policy: frame-ancestors 'self'トラブルシューティング
フレーム埋め込みの問題は、ページが別のドキュメント内で描画されるのを拒否したときに、空の iframe やコンソールエラーとして現れます。
「Refused to display in a frame」のコンソールエラー。ブラウザはフレーム内のページをブロックし、Refused to display ‘https://example.re/’ in a frame because it set ‘X-Frame-Options’ to ‘DENY’（または ‘SAMEORIGIN’）というログを出します。DevTools の Network タブで、フレームに読み込む URL のレスポンスヘッダーを確認してください。そのページを埋め込む必要がある場合は、ヘッダーの値を DENY から SAMEORIGIN に変えるか、ヘッダーを完全に削除してより細かな制御のために CSP の frame-ancestors を使います。
ALLOW-FROM が現代のブラウザで機能しない。ALLOW-FROM ディレクティブは廃止されています。Chrome、Firefox、Safari はこのディレクティブを完全に無視し、有効な値が設定されていないものとしてヘッダーを扱います。ALLOW-FROM は、複数のオリジンをサポートする CSP の frame-ancestors ディレクティブに置き換えてください。Content-Security-Policy: frame-ancestors https://trusted.example.re https://other.example.re のようにします。
X-Frame-Options と CSP の frame-ancestors が矛盾する。両方のヘッダーが存在する場合、CSP Level 2 以降をサポートするブラウザは X-Frame-Options を無視し、frame-ancestors のみに従います。CSP をサポートしない古いブラウザは X-Frame-Options にフォールバックします。意図したポリシーが両方のヘッダーで一貫していることを確認してください。X-Frame-Options: DENY を frame-ancestors ‘self’ と併せて送ると、現代のブラウザは同一オリジンのフレーム埋め込みを許可する一方、古いブラウザはすべてのフレーム埋め込みをブロックするという食い違いが生じます。
正当な埋め込みがブロックされる（決済フォーム、ウィジェット、埋め込みアプリ）。iframe での埋め込みを必要とするサードパーティのサービスは、ホストページが X-Frame-Options: DENY を送ると機能しません。埋め込みのアクセスを必要とする特定のオリジンを許可リストに入れるには CSP の frame-ancestors を使ってください。Content-Security-Policy: frame-ancestors ‘self’ https://payments.provider.example.re のようにします。
X-Frame-Options から CSP の frame-ancestors への移行。移行期間中は両方のヘッダーを配信してください。意図するフレーム埋め込みポリシーに合わせて frame-ancestors を設定します。CSP をサポートしないブラウザのために X-Frame-Options を残しておきます。レガシーブラウザのトラフィックが許容できる水準を下回ったら、X-Frame-Options を削除して frame-ancestors だけに頼ります。移行のテストは、許可したオリジンから iframe にページを埋め込み、複数のブラウザでフレームが読み込まれることを確認して行います。