iframeの埋め込み先のページ表示をブロックする

iframeの埋め込み先のページ表示をブロックする方法を紹介します。

概要

他のサイトのiframeの中のコンテンツとして自サイトのコンテンツを表示される動作をブロックしたい場合があります。
HTTPレスポンスヘッダに X-Frame-Options を返却すると、他のドメインのiframeからの表示をブロックできます。

書式

HTTPレスポンスヘッダに次の値を出力します。

X-Frame-Options : DENY

または

X-Frame-Options : SAMEORIGIN

X-Frame-Optionsで設定できる値は以下があります。

設定
値	意味
DENY	すべてのウェブページでフレーム内の表示を禁止する
SAMEORIGIN	同一オリジン(呼び出し元が同じドメインかつ、同じプロトコル)のWebサイトのみフレーム内の表示を許可する
ALLOW-FROM	指定したURIのフレーム内の表示を許可する (この値は現在は廃止されています。)

同一オリジンの判定

同一オリジンは呼び出し元が同じドメインかつ、同じプロトコルのURLになります。
呼び出し元が http://www.ipentec.com/contents/index.html の場合

URL	同一オリジンか	説明
http://www.ipentec.com/publish/content.html	〇	同一オリジン
http://www.ipentec.com/publish/test/document.html	〇	同一オリジン
https://www.ipentec.com/publish/content.html	×	プロトコルが違うので同一オリジンでない
http://www.ipentec.com:8080/doc/content.html	×	ポートが違う場合も同一オリジンでない
https://ipentec.jp/publish/content.html	×	ドメイン(ホスト)が違うので、同一オリジンでない

実装

コード

下記のHTMLファイルを用意します。

content.html (フレーム内に表示される側)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body style="background-color:#a2ceee;">
  <div style="background-color:#FFFFFF; margin-top:3em;border:1px solid #1a297d;">ABCDE</div>
  <div style="background-color: #FFFFFF; margin-top: 3em;border: 1px solid #1a297d;">FGHIJ</div>
</body>
</html>

frame.html (フレーム側)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <iframe style="width:740px;height:240px;" src="https://ipentec.jp/test-document-folder/content.html"></iframe>
</body>
</html>

解説

frame.html のiframeタグで content.html を読み込んで表示しています。
content.htmlはframe.htmlを配置したドメインとは異なる https://ipentec.jp/test-document-folder/content.html に配置しています。