このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

X-Frame-Options ヘッダー

メモ: このヘッダーで提供されるオプションよりも包括的な設定については、Content-Security-Policy ヘッダーの frame-ancestors ディレクティブを参照してください。

HTTP の X-Frame-Optionsレスポンスヘッダー で、ブラウザーがページを <frame><iframe><embed><object> の中に表示することを許可するかどうかを示すために使用することができます。サイトはこれを使用して、コンテンツが他のサイトに埋め込まれないよう保証することで、クリックジャッキング攻撃を防ぐことができます。

セキュリティが強化されるのは、ユーザーが X-Frame-Options に対応したブラウザーを使用して文書にアクセスした場合のみです。

ヘッダー種別 レスポンスヘッダー
禁止リクエストヘッダー いいえ

構文

http
X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN

ディレクティブ

DENY

ページは、どのサイトから試みられてもフレーム内で表示できません。他のサイトから読み込まれた場合だけでなく、同じサイトから読み込まれた場合でも、ブラウザーがページをフレーム内で読み込もうとする試みは失敗します。

SAMEORIGIN

ページは、そのフレームの祖先がすべてページ自体と同じオリジンである場合にのみ表示できます。ページをフレームで含むサイトが、ページを提供するサイトと同じである限り、フレーム内でページを使用することが可能です。

ALLOW-FROM origin 非推奨;

これは古いディレクティブです。このディレクティブを持つレスポンスヘッダーに遭遇した現行のブラウザーは、そのヘッダーを完全に無視します。 HTTP の Content-Security-Policy ヘッダーには frame-ancestors ディレクティブがありますので、そちらを使用してください。

警告: X-Frame-Options を <meta> 要素に設定しても(例えば、<meta http-equiv="X-Frame-Options" content="deny">)効果はありません。 X-Frame-Options は以下の例で示すように、 HTTP ヘッダーを通じて設定された場合のみ動作します。

Apache の設定

Apache で X-Frame-Options ヘッダーをすべてのページで送信するように設定するには、サイトの設定に以下の記述を追加してください。

apacheconf
Header always set X-Frame-Options "SAMEORIGIN"

Apache で X-Frame-Options を DENY に設定するには、サイトの設定に以下の記述を追加してください

apacheconf
Header set X-Frame-Options "DENY"

nginx の設定

Nginx で X-Frame-Options ヘッダーを送信するように設定するには、以下の記述を http、server、 location のいずれかの設定に追加してください。

nginx
add_header X-Frame-Options SAMEORIGIN always;

X-Frame-Options ヘッダーで DENY を設定するには、次のようにします。

nginx
add_header X-Frame-Options DENY always;

IIS の設定

IIS で X-Frame-Options ヘッダーを送信するように設定するには、サイトの Web.config ファイルに以下の設定を追加してください。

xml
<system.webServer>
  …
  <httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="SAMEORIGIN" />
    </customHeaders>
  </httpProtocol>
  …
</system.webServer>

詳しくは、IIS マネージャーのユーザーインターフェイスを使用してこの構成を設定する方法についてのマイクロソフトのサポート記事を参照してください。

HAProxy の設定

HAProxy で X-Frame-Options ヘッダーを送信するように設定するには、以下の記述を front-end、listen、backend のいずれかの設定に追加してください。

rspadd X-Frame-Options:\ SAMEORIGIN

他にも、より新しいバージョンでは次のような設定ができます。

http-response set-header X-Frame-Options SAMEORIGIN

Express の設定

X-Frame-Options ヘッダーを helmet を使用して SAMEORIGIN に設定するには、サーバー設定に次のものを追加してください。

js
import helmet from "helmet";

const app = express();
app.use(
  helmet({
    xFrameOptions: { action: "sameorigin" },
  }),
);

仕様書

Specification
HTML
# the-x-frame-options-header

ブラウザーの互換性

関連情報