X-Frame-Optionsとは
X-Frame-Optionsは、ページを iframe などの枠の中に表示してよいかを、サーバーがブラウザに伝えるHTTPヘッダーです。他サイトに自分のページを埋め込まれ、操作を乗っ取られるクリックジャッキングを防ぐために使います。
X-Frame-Optionsが必要な理由
設定がないと、攻撃者は自分のページの上に、あなたのサイトのページを透明にして重ねられます。利用者は「当選を受け取る」のようなボタンを押したつもりで、実際にはログイン済みのあなたのサイトの「退会」や「設定変更」のボタンを押してしまいます。
サーバーから見ると、操作は本人のログイン状態で行われるため、不正な操作と区別できません。
X-Frame-Optionsの仕組み
| 値 | 動き |
|---|---|
DENY | どのサイトの枠の中でも表示しない |
SAMEORIGIN | 同じオリジン(スキーム、ホスト、ポートが同じ)のページの枠の中だけで表示する |
ALLOW-FROM | 廃止されており、現在のブラウザは無視する |
仕様はRFC 7034です。現在は、CSPの frame-ancestors が後継として位置づけられ、特定のサイトだけに埋め込みを許可する指定もできます。両方が指定された場合、対応するブラウザでは frame-ancestors が優先されます。
X-Frame-Optionsの確認方法
開発者ツールの「ネットワーク」タブで、HTML文書のレスポンスヘッダーを見ます。コマンドでは次のとおりです。
curl -s -D - -o /dev/null https://example.com/ | grep -i '^x-frame-options'実際に埋め込めないことを確かめるには、自分のパソコンに次のHTMLファイルを作り、ブラウザで開きます。ページが表示されず、コンソールにエラーが出れば、効いています。
<iframe src="https://example.com/" width="600" height="400"></iframe>X-Frame-Optionsの設定例
自サイトのページ同士で枠を使う場合に備え、通常は SAMEORIGIN にします。他サイトに埋め込む用途がなければ DENY でも構いません。
Apache(.htaccess)の例です。
Header always set X-Frame-Options "SAMEORIGIN"nginxの例です。
add_header X-Frame-Options "SAMEORIGIN" always;WordPress(子テーマのfunctions.php)の例です。管理画面とログインページには、WordPress本体が同じ値を付けています。公開ページには自分で付けます。
add_action('template_redirect', 'send_frame_options_header');よくある間違いと注意点
<meta http-equiv="X-Frame-Options">のように、HTMLのmetaタグで指定しても効きません。HTTPヘッダーで返します。- アプリケーションとWebサーバーの両方で付けると、同じヘッダーが2本になり、ブラウザが無効または拒否として扱うことがあります。1か所に絞ります。
- 予約フォームなどを他サイトのiframeに埋め込ませている場合、
DENYやSAMEORIGINで表示できなくなります。frame-ancestorsで許可するサイトを指定します。 - JSONを返すAPIのように、画面として表示されない応答には、効果がありません。
Webサイト セキュリティチェッカーで確認する
Webサイト セキュリティチェッカーは、X-Frame-Optionsと、CSPの frame-ancestors のどちらも無い状態を診断します。どちらか一方があれば、埋め込みへの備えがあるものとして扱います。
関連用語
関連する用語
サイトの設定を無料で確認する
サイトのURLを入力するだけで、X-Frame-Options などの設定状況を診断できます。Webサイト セキュリティチェッカー「Security Checker X」は、登録なしで使えます。
