X-Frame-Options と CSP frame-ancestors の違いは?

CSP frame-ancestors がモダンな後継です。複数のオリジンをサポートします(frame-ancestors 'self' https://trusted.com)。X-Frame-Options は DENY または SAMEORIGIN しかサポートしません。両方がある場合、CSP が優先されます。新しいアプリケーションには CSP frame-ancestors を使い、古いブラウザー対応のために X-Frame-Options も含めてください。

フレーム化を許可すべき場合はいつですか?

サイトを意図的に埋め込む場合です。ソーシャルメディアウィジェット、決済ゲートウェイ(Stripe)、OAuth のポップアップフロー、独自のサブドメインなど。同一オリジンでのフレーム化には SAMEORIGIN または frame-ancestors 'self' を使ってください。特定の信頼されたオリジンには、許可するオリジンを指定した CSP frame-ancestors を使います。すべてのオリジンからのフレーム化は決して許可しないでください。

クリックジャッキング攻撃を防ぐ

クリックジャッキングは、サイトを不可視の iframe に埋め込んでユーザーに誤ったクリックを誘います。X-Frame-Options と CSP の frame-ancestors を学びましょう。

1

クリックジャッキング(UI リドレス)は、おとりのページの上に、ターゲットサイトを透明な iframe で重ねて表示します。ユーザーはおとりをクリックしているつもりが、実際にはターゲット(例:「アカウント削除」ボタン)をクリックしています。対策:(1) X-Frame-Options: DENY(または SAMEORIGIN)— 従来方式で、すべてのブラウザーが対応。(2) Content-Security-Policy: frame-ancestors 'none'(または 'self')— モダンで柔軟。(3) フレームバスティング JavaScript(信頼性が低いため、ヘッダーを使ってください)。
2

HTML ミニファイア →
HTML レスポンスをミニファイして、X-Frame-Options または CSP frame-ancestors ヘッダーの存在を確認します。これらのヘッダーは HTML ではなくサーバーで設定しなければなりません。すべてのレスポンスに設定されていることを、サーバー設定(nginx、Apache)やフレームワークのミドルウェアで確認してください。
3

ハッシュ計算ツール →
フレームバスティングスクリプト(従来のフォールバック)には、ハッシュでスクリプトの整合性を検証します。モダンな防御はヘッダー(X-Frame-Options、CSP frame-ancestors)に依存します。フレームバスティングスクリプトは回避可能なため、非常に古いブラウザー向けのフォールバックとしてのみ使うべきです。主防御は HTTP ヘッダーでなければなりません。

よくある質問

X-Frame-Options と CSP frame-ancestors の違いは?: CSP frame-ancestors がモダンな後継です。複数のオリジンをサポートします(frame-ancestors 'self' https://trusted.com)。X-Frame-Options は DENY または SAMEORIGIN しかサポートしません。両方がある場合、CSP が優先されます。新しいアプリケーションには CSP frame-ancestors を使い、古いブラウザー対応のために X-Frame-Options も含めてください。
フレーム化を許可すべき場合はいつですか?: サイトを意図的に埋め込む場合です。ソーシャルメディアウィジェット、決済ゲートウェイ(Stripe)、OAuth のポップアップフロー、独自のサブドメインなど。同一オリジンでのフレーム化には SAMEORIGIN または frame-ancestors 'self' を使ってください。特定の信頼されたオリジンには、許可するオリジンを指定した CSP frame-ancestors を使います。すべてのオリジンからのフレーム化は決して許可しないでください。