X-Frame-Options

X-Frame-OptionsHTTP のレスポンスヘッダーで、ブラウザーがページを <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

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
X-Frame-OptionsChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.6.9IE 完全対応 8Opera 完全対応 10.5Safari 完全対応 4WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
ALLOW-FROMChrome 未対応 なしEdge 未対応 12 — 79Firefox 未対応 18 — 70IE 完全対応 8Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 18Opera Android ? Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
SAMEORIGINChrome 完全対応 あり
補足
完全対応 あり
補足
補足 Starting in Chrome 61, this applies to all of a frame's ancestors.
Edge 完全対応 12Firefox 完全対応 あり
補足
完全対応 あり
補足
補足 Starting in Firefox 59, this applies to all of a frame's ancestors.
IE 完全対応 8Opera 完全対応 あり
補足
完全対応 あり
補足
補足 Starting in Opera 48, this applies to all of a frame's ancestors.
Safari 完全対応 ありWebView Android 完全対応 あり
補足
完全対応 あり
補足
補足 Starting in Chrome 61, this applies to all of a frame's ancestors.
Chrome Android 完全対応 あり
補足
完全対応 あり
補足
補足 Starting in Chrome 61, this applies to all of a frame's ancestors.
Firefox Android 完全対応 あり
補足
完全対応 あり
補足
補足 Starting in Firefox 59, this applies to all of a frame's ancestors.
Opera Android 完全対応 あり
補足
完全対応 あり
補足
補足 Starting in Opera 48, this applies to all of a frame's ancestors.
Safari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報