X-Frame-Options
===============

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

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

**メモ:** `Content-Security-Policy` ヘッダーに `frame-ancestors` ディレクティブがあり、対応しているブラウザーにおいてこのヘッダーを置き換えています。

|  |  |
| --- | --- |
| ヘッダー種別 | レスポンスヘッダー |
| 禁止ヘッダー名 | いいえ |

構文
--

`X-Frame-Options` には 2 つの有効なディレクティブがあります。
```

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
```

### ディレクティブ

`DENY` を指定した場合は、フレームにページを他のサイトから読み込もうとした時だけでなく、同じサイトから読み込もうとした時にも失敗します。一方、 `SAMEORIGIN` を指定した場合は、フレームの中のページを含むサイトが、ページを提供しているサイトと同じである限り、フレーム内でページを利用することができます。

`DENY`

ページをフレーム内に表示することは、それを試みているサイトが何であろうとできません。

`SAMEORIGIN`

ページは、ページ自体と同じオリジンのフレーム内でのみ表示されます。仕様書ではこのオプションを最上位、親、チェーン全体のどれに適用するかをブラウザーベンダーに任せていますが、すべての祖先が同じオリジンでない限り、利用価値がないと議論されています。 (Firefox バグ 725490 を参照)。対応の詳細はブラウザーの互換性もご覧ください。

`ALLOW-FROM uri` 
非推奨

これは廃止されたディレクティブであり、最近のブラウザーでは動作しません。使用しないでください。対応している古いブラウザーでは、ページは指定されたオリジン *uri* のフレーム内でのみ表示されます。なお、以前の Firefox では `SAMEORIGIN` と同じ問題がありました。 — フレームの祖先が同じオリジンであるかどうかをチェックしません。 `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 ヘッダをすべてのページで送信するように設定するには、サイトの設定に以下の記述を追加してください。
```

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` ファイルに以下の設定を追加してください。


```html
<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 の設定

Express で `X-Frame-Options` ヘッダーを送信するように設定するには、helmet を使用して frameguard でヘッダーを設定してください。以下の記述をサーバー設定に追加してください。


```js
const helmet = require("helmet");
const app = express();
app.use(helmet.frameguard({ action: "SAMEORIGIN" }));
```


他にも、直接 frameguard を使用することもできます。


```js
const frameguard = require("frameguard");
app.use(frameguard({ action: "SAMEORIGIN" }));
```

仕様書
---

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

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Content-Security-Policy` の `frame-ancestors` ディレクティブ
* HTTP Header Field X-Frame-Options - RFC 7034
* ClickJacking Defenses - IEBlog
* Combating ClickJacking with X-Frame-Options - IEInternals