X-Frame-Options ヘッダ

とは何か

自身が他サイトから、<frame>, <iframe>, <embed>, <object>などからの参照（コンテンツの埋め込み）に制限（見られる/見られない）を加えることが出来るHTTPレスポンスヘッダ。
（制限を加える挙動はWebブラウザ側のため、ユーザが対応ブラウザを使用している必要があるが、現在使われている殆どのブラウザで対応済。「IE7が許されるのは平成までだよねー」（※2016年12月 Microsoftによるサポート終了））

Webブラウザ
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┠────────────────────────────────┨
┃                                ┃
┃  他サイト（悪意のあるサイト etc.）      ┃
┃                                ┃
┃ ┌────────────────────────────┐ ┃
┃ │ <iframe> etc.              │ ┃
┃ │                            │ ┃
┃ │  自サイト                    │ ┃
┃ │    with X-Frame-Options    │ ┃
┃ │                            │ ┃
┃ │  ※ここの挙動に制限を           │ ┃
┃ │   課すことが出来る！！           │ ┃
┃ │                            │ ┃
┃ └────────────────────────────┘ ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

基本的な考え方としては、たとえば「埋め込みwidget（ex: Twitterタイムライン）みたいなものを実装する」みたいな要件（「DENYされるまさにその挙動をどうしても実装する必要があります」案件）でもない限り、基本的にはX-Frame-Options: DENYにしておくのがベター（安全）。
またその必要がある場合であっても、許可する範囲は最低限にするのが望ましい。（1エンドポイント許可すればいい要件なのに「個別指定めんどいし全体を許可しちゃえw」とかはマジでアカン！）

設定方法

サーバサイドからHTTPレスポンスヘッダで指定する。

X-Frame-Options: DENY | SAMEORIGIN

指定可能な値は以下（制限が厳しい（i.e. 安全な）順）

• DENY: 一切の<iframe>等によるコンテンツの埋め込みを拒否する（表示できなくなる）
• SAMEORIGIN: 同一オリジン（http/https、サブドメイン、ポートまで揃える必要がある）でのみコンテンツの埋め込みが許可される
• (※廃止) ALLOW-FROM uri: 現在のほとんどブラウザでは動作しない。Content-Security-Policyヘッダにframe-ancestorsを指定することで同等の制限を加えることが出来る

参照

• X-Frame-Options - HTTP | MDN