X-Frame-Options
X-Frame-Options
は HTTP のレスポンスヘッダーで、ブラウザーがページを <frame>
, <iframe>
, <embed>
, <object>
の中に表示することを許可するかどうかを示すために使用されます。サイトはコンテンツが他のサイトに埋め込まれないよう保証することで、クリックジャッキング攻撃を防ぐために使用することができます。
強化されたセキュリティは、ユーザーが X-Frame-Options
に対応したブラウザーを使用して文書にアクセスした場合のみ提供されます。
Note: Content-Security-Policy
ヘッダーには frame-ancestors
ディレクティブがあり、対応しているブラウザーにおいてこのヘッダーを置き換えています。
ヘッダー種別 | レスポンスヘッダー |
---|---|
禁止ヘッダー名 | いいえ |
構文
X-Frame-Options
には二つの有効なディレクティブがあります。
X-Frame-Options: DENY X-Frame-Options: SAMEORIGIN
ディレクティブ
DENY
を指定した場合は、他のサイトからフレームにページを読み込もうとした時に失敗するだけでなく、同じサイトから読み込もうとした時にも失敗します。一方、 SAMEORIGIN
を指定した場合は、フレームの中のページを含むサイトが、ページを提供しているサイトと同じである限り、フレーム内でページを利用することができます。
DENY
- サイト側の意図に関わらず、ページをフレーム内に表示することはできません。
SAMEORIGIN
- ページは、ページ自体と同じオリジンのフレーム内でのみ表示されます。仕様書ではこのオプションを最上位、親、チェーン全体のどれに適用するかをブラウザーベンダーに任せていますが、すべての生成元が同じオリジンでない限り、利用価値がないと議論されています。 (バグ 725490 を参照)。対応の詳細はブラウザーの互換性もご覧ください。
ALLOW-FROM uri
(廃止)- これは廃止されたディレクティブであり、最近のブラウザーでは動作しません。使用しないでください。対応している古いブラウザーでは、ページは指定されたオリジン uri のフレーム内でのみ表示されます。なお、従来の Firefox では
SAMEORIGIN
と同じ問題がありました。 — フレームの生成元が同じオリジンであるかどうかをチェックしません。Content-Security-Policy
ヘッダーにはframe-ancestors
ディレクティブがあり、代わりにこれを使用することができます。
例
メモ: meta タグに設定しても意味がありません。例えば、 <meta http-equiv="X-Frame-Options" content="deny">
は効果がありません。使用しないでください。以下の例にあるように、 X-Frame-Options
は HTTP ヘッダーを通じて設定された場合のみ動作します。
Apache の設定
Apache で X-Frame-Options ヘッダをすべてのページで送信するように設定するには、サイトの設定に以下の記述を追加してください。
Header always set X-Frame-Options "SAMEORIGIN"
Apache で X-Frame-Options
を DENY に設定するには、サイトの設定に以下の記述を追加してください
Header set X-Frame-Options "DENY"
nginx の設定
nginx で X-Frame-Options
ヘッダーを送信するように設定するには、以下の記述を http、server、 location のいずれかの設定に追加してください。
add_header X-Frame-Options SAMEORIGIN always;
IIS の設定
IIS で X-Frame-Options
ヘッダーを送信するように設定するには、サイトの Web.config
ファイルに以下の設定を追加してください。
<system.webServer>
...
<httpProtocol>
<customHeaders>
<add name="X-Frame-Options" value="SAMEORIGIN" />
</customHeaders>
</httpProtocol>
...
</system.webServer>
HAProxy の設定
HAProxy で X-Frame-Options
ヘッダーを送信するように設定するには、以下の記述を front-end、listen、backend のいずれかの設定に追加してください。
rspadd X-Frame-Options:\ SAMEORIGIN
他にも、より新しいバージョンでは次のような設定ができます。
http-response set-header X-Frame-Options SAMEORIGIN
Express の設定
Express で X-Frame-Options
ヘッダーを送信するように設定するには、 helmet を使用して frameguard でヘッダーを設定します。以下の記述をサーバー設定に追加してください。
const helmet = require('helmet');
const app = express();
app.use(helmet.frameguard({ action: 'SAMEORIGIN' }));
他にも、直接 frameguard を使用することもできます。
const frameguard = require('frameguard')
app.use(frameguard({ action: 'SAMEORIGIN' }))
仕様書
仕様書 | 題名 |
---|---|
RFC 7034 | HTTP Header Field X-Frame-Options |
ブラウザーの互換性
BCD tables only load in the browser