iframe内からWebページが読み込まれるのを防止する X-Frame-Options HTTP レスポンスヘッダ

昨日とあるところに投稿された質問で"フレーム内に表示する許可がありませんというエラーが出る"と書かれていました。
そういった設定がWebページに対して可能なのかどうか調べてみたところ、X-Frame-Options HTTP レスポンスヘッダというものを使えばコントロールできるようです。

LINK： The X-Frame-Options response header

クリックジャッキング攻撃を防止するなどの目的で用意されたもののようですね。最近新しく出来たものではなく随分前からあるようです。今後使う機会もあるかもしれないので使い方を確認しておきました。


X-Frame-Optionsヘッダに設定可能な値はDENYとSAMEORIGINの2つがあります。

DENY フレーム内に表示するのを全面禁止
SAMEORIGIN 同じサイト内のページでフレームに読み込まれた場合だけ許可

これを読み出される側のページが含まれるサイトで設定します。例えば http://www.example.com/ でDENYを設定しておくと、このサイトに含まれるページは自分のサイトを含めどのサイトに含まれるページからもiframeで読み込むことが出来なくなります。

設定方法を行なうには例えば .htaccess ファイルに次の設定を追加すればいいようです。

Header always append X-Frame-Options SAMEORIGIN


では実際に試してみます。

今回、サイトAに他のページを読み込む index.html と読み込まれるページ frame1.html を用意します。また別のサイトBに読み込まれるページ frame2.html を用意します。

index.htmlでは次のように他のページをiframeで読み込んでいます。

<body>
<iframe src="http://サイトA/frame1.html" width="400" height="100">
frame test1
</iframe>

<iframe src="http://サイトB/frame2.html" width="400" height="100">
frame test2
</iframe>
</body>

読み込まれる方の frame1.html と frame2.html は適当なコンテンツを記述してあります。


1. X-Frame-Optionsを何も設定しなかった場合


最初にX-Frame-Optionsを何も設定しなかった場合です。index.htmlをブラウザで開くと次のように表示されます。




※ Chrome 13.0.782.220、Firefox 6.0.2、IE 8で試しています。

何も設定していないので、普通にページがiframe内に読み込まれて表示されます。

2. X-Frame-OptionsにSAMEORIGINを設定した場合


サイトA及びサイトBのどちらにも次の設定を.htaccessに追加しました。(サイトAにも追加したのは読みこまれる frame1.html があるためで、読み込むページの index.html があるからではありません)。

Header always append X-Frame-Options SAMEORIGIN

index.htmlをブラウザで開くと次のように表示されます。




SAMEORIGINを設定してありますので、読み込まれるページとは別のサイトから読み込まれた場合、そのページは表示されません。ChromeとFirefoxの場合は単に空白を表示するようですがIEの場合はエラー表示となりました。エラーの部分だけ拡大すると次のように表示されています。

このコンテンツはフレーム内で表示できません
この Web サイトに入力する情報のセキュリティを保護するため、このコンテンツの発行者はフレーム内での表示を許可していません。


3. X-Frame-OptionsにDENYを設定した場合


サイトA及びサイトBのどちらにも次の設定を.htaccessに追加しました。

Header always append X-Frame-Options DENY

index.htmlをブラウザで開くと次のように表示されます。





DENYを設定してありますので、どこから読み込まれるかに関係無くiframe内では表示されません。

まとめ

このようにX-Frame-Optionsを設定することで、ページがフレーム内で読み込まれたときに表示させるかどうかを適切にコントロールできるようです。また主要な3つのブラウザでそれぞれ対応されていることも確認できました。

なお、今回は .htaccess ファイルに設定を書き込みましたが、ページ単位でmetaタグを使って記述が出来ると書かれている情報もありました。

<meta http-equiv="X-FRAME-OPTIONS" content="SAMEORIGIN" />

実際に試してみたところ、Chromeでは設定が反映されましたがFirefoxとIEでは設定が反映されませんでした。metaタグでは現在使えないのか、それとも設定方法が間違っているのかは分かりません。

このブログの人気の投稿

別の設定データを持つChromeを起動する方法

イメージ
一時期Firefoxに戻っていましたが今はまたChromeをメインのブラウザとして使っています。Chromeで作業を行なっている時に一時的にまったく別の設定に変更したい場合があるのですが、例えば「新しいウィンドウ」を起動しても元になっているデータは同じためどこかのウィンドウで設定を変更すれば残りのウィンドウの設定も変わってしまいます。 そこでGoogleアカウントのヘルプに記載されていた別の設定データを参照する新しいChromeを起動する方法を試してみます。 デスクトップ上にあるChromeのショートカットをコピーして下さい。 コピーしたものをデスクトップ上にペーストして下さい。 適当な名前に変更します。 新しいChromeのデータを格納するディレクトリを適当に作ります。今回は「C:\mychrome\」としました。 先程作成したショートカット(今回の場合は"作業用Chrome")を右クリックし、表示されたメニューから「プロパティ」をクリックします。 リンク先のところに表示されている最後に「 --user-data-dir=c:\mychrome」を追加します。別のディレクトリを用意した場合はそれに合わせて変更して下さい。 ※ 「chrome.exe」 と「--user」の間には空白を1つ入れて下さい。 「OK」ボタンを押せば準備完了です。では新しいショットカットをダブルクリックしてChromeを起動して下さい。 このChromeは普段使っているChromeと設定データが異なるため追加されている拡張機能やオプションの設定も別に管理されてます。ブックマークなども別なので起動した直後は空です。 今までもシークレットウィンドウを使えば別のGoogleアカウントにログインすることができましたが、今回新しく起動したChromeでも別のGoogleアカウントにログインできます。 なお事前に用意したディレクトリを見て頂くと、Chromeを起動した後から色々なデータが書き込まれていることが分かります。 別のディレクトリをさらに用意しショートカットを作成すればさらに別のデータを元にしたChromeを起動することもできます。環境が違う複数のChromeを同時に使えればいいなと思われていた方は是非一
続きを読む

自分の住んでいる場所の海抜を調べてみた

イメージ
今日のニュースを見ていたら、自分が住んでいる名古屋市の半分は海抜0mというニュースが流れていました。ニュースの映像では自分の住んでいる場所がどれくらいなのか分からなかったので何か調べることが出来るサイトはないか調べてみたところ、下記のサイトで調べれることが分かりました。 Link: http://flood.firetree.net/ Google Mapsを使っていて、海抜の数値を設定すると、その海抜以下の地域が青く表示されます。 さっそく名古屋市で海抜0mのところを調べてみます。 名古屋の三重県側の方に青い点々があることが分かります。では海抜1mで見てみます。 海抜1mにしただけで名古屋市の左半分が青くなってしまいました。。結構低い土地みたいです。次に海抜5mで見てみます。 名古屋の中央を通る名古屋高速の左側だけが低いですね。幸いにして私の自宅は右半分にあるので比較的高い位置にあるようで少し安心しました。(あまり海抜の高低は意味がないかもしれないですけど)。 ついでに東京についても調べてみました。まずは海抜0mです。 荒川というのでしょうか。この周辺に少し青い点が見えます。では海抜1mです。 浦安から上に向かって低い地域があるようです。あとは海抜5mと9mのものも追加しておきます。 こうして見てみると東京都は比較的高い位置にあるようですね。
続きを読む