ウェブ制作において、画像やサイトの一部を別モーダルウィンドウでプレビューのように表示する、通称「ライトボックス」と呼ばれる機能があります。 具体的にはこんな感じのものです:
マンホールマップ ←クリックするとライトボックス内でマンホールマップを表示します
↑CSS が適当なので少し見にくいかも。あとスマホだとうまく表示されないかもしれません・・・
元のページに戻ってくることを前提に、違うページの情報を一瞬表示させる、という目的で便利に使える機能です。Facebook などでも写真を表示する時に使われてますね。こういった機能を実現するための JavaScript ライブラリも多く公開されています(ちなみに上記機能は Colorbox というライブラリを使って実現しています)。
Colorbox で iframe を使った簡単な実装例を紹介します。上記ページから js と css をダウンロードし、jQuery と合わせて <head> 内に以下のような記述をしておきます:
この例では box というクラスが付与されたリンクに対してライトボックスを実行するような記述になっています。
その上で以下のような <a> リンクを用意、これだけです:
ところが、このライトボックスが使えないページ(ライトボックスの中身として表示できないページ)、というのがたまに存在しています。例えばグーグルのトップページ(http://www.google.co.jp/)です:
Google ←クリックするとダイアログは表れますが、中に何も表示されません
実は同じようなページは他にもあります。僕が知る限りではアマゾンや価格コムのページもライトボックスでは表示されません。
この違いは何でしょうか? 実はページを HTTP リクエストで取得する際のレスポンスヘッダ X-Frame-Optionsによって、そのコンテンツが iframe の内部に表示することを許可するかどうかを制御できます。上記の挙動の違いはこのレスポンスヘッダ X-Frame-Options の値によるものでした。
デフォルト値は「なし」です。その場合(つまり特に何もしない場合)、そのページは iframe 内に表示可能です。一方この値が DENY に設定されていると、そのページを iframe 内に表示することはできません。また SAMEORIGIN(生成元と同じフレーム内に限り表示可)や、ALLOW-FROM xxx(生成元が xxx の場合に限り表示可)といった設定も可能です。詳しくはこちらを参照してください。
こういう制限をかける側としてはそれなりの意図があって制限しているんでしょうけど、やはり表示できるものなら表示したい、という作成側の意図もあるわけです。また AJAX のクロスドメイン制限にも言えることですが、制限自体は JavaScript での挙動や iframe 内での挙動に制限をかけているだけであって、情報の取得そのものを制限しているわけではないので、回避することもできます。 で、今日はその(X-Frame-Options 制限の)回避に挑戦してみます。
考え方としては iframe での表示に制限をかけられているサイトに対して、Java や PHP などのサーバーサイドプログラミングによって情報を取得(これらには制限がないので可能)し、その結果を iframe 内に入れてしまおう、というものです。まあクロスドメイン対策と同じ考え方です。
ということで、上記の紫色の部分を別途作成する(加えて、それをどこかのサーバーに設置しておく)必要があるわけです。この部分は例えば Java のサーブレットであれば、おおまかにはこんな感じになるでしょうかね:
このサーブレットが http://xxxx/spoofxframeoptions という名前でアクセスできるようになっていたとすると、
のように指定することで、目的のページのコンテンツを取得できることになります。 なので、この上記の URL を iframe 内で指定すればいい、ということになります。
で、これを実際にやってみたのがこちらのリンクです:
Google ←ライトボックス内でGoogleトップページが表示できるようになりました
厳密には上記のサーブレットのサンプルはまだ不完全で、実際には文字コードを考慮したり、HTML 内の <base href="..."> 要素を追加する必要があったり、ページによっては Referer を指定しないと取得できなかったり、、、といった細かな修正が必要になるのですが、とりあえず X-Frame-Options の制約を回避する手段としては使えそうですね。
マンホールマップ ←クリックするとライトボックス内でマンホールマップを表示します
↑CSS が適当なので少し見にくいかも。あとスマホだとうまく表示されないかもしれません・・・
元のページに戻ってくることを前提に、違うページの情報を一瞬表示させる、という目的で便利に使える機能です。Facebook などでも写真を表示する時に使われてますね。こういった機能を実現するための JavaScript ライブラリも多く公開されています(ちなみに上記機能は Colorbox というライブラリを使って実現しています)。
Colorbox で iframe を使った簡単な実装例を紹介します。上記ページから js と css をダウンロードし、jQuery と合わせて <head> 内に以下のような記述をしておきます:
<link href="css/colorbox.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.colorbox-min.js"></script> <script type="text/javascript"> $(function(){ $('.box').colorbox( { iframe:true, width:"90%", height:"90%" } ); }); </script>
この例では box というクラスが付与されたリンクに対してライトボックスを実行するような記述になっています。
その上で以下のような <a> リンクを用意、これだけです:
<a class="box" href="xxx">XXXX</a>
ところが、このライトボックスが使えないページ(ライトボックスの中身として表示できないページ)、というのがたまに存在しています。例えばグーグルのトップページ(http://www.google.co.jp/)です:
Google ←クリックするとダイアログは表れますが、中に何も表示されません
実は同じようなページは他にもあります。僕が知る限りではアマゾンや価格コムのページもライトボックスでは表示されません。
この違いは何でしょうか? 実はページを HTTP リクエストで取得する際のレスポンスヘッダ X-Frame-Optionsによって、そのコンテンツが iframe の内部に表示することを許可するかどうかを制御できます。上記の挙動の違いはこのレスポンスヘッダ X-Frame-Options の値によるものでした。
デフォルト値は「なし」です。その場合(つまり特に何もしない場合)、そのページは iframe 内に表示可能です。一方この値が DENY に設定されていると、そのページを iframe 内に表示することはできません。また SAMEORIGIN(生成元と同じフレーム内に限り表示可)や、ALLOW-FROM xxx(生成元が xxx の場合に限り表示可)といった設定も可能です。詳しくはこちらを参照してください。
こういう制限をかける側としてはそれなりの意図があって制限しているんでしょうけど、やはり表示できるものなら表示したい、という作成側の意図もあるわけです。また AJAX のクロスドメイン制限にも言えることですが、制限自体は JavaScript での挙動や iframe 内での挙動に制限をかけているだけであって、情報の取得そのものを制限しているわけではないので、回避することもできます。 で、今日はその(X-Frame-Options 制限の)回避に挑戦してみます。
考え方としては iframe での表示に制限をかけられているサイトに対して、Java や PHP などのサーバーサイドプログラミングによって情報を取得(これらには制限がないので可能)し、その結果を iframe 内に入れてしまおう、というものです。まあクロスドメイン対策と同じ考え方です。
ということで、上記の紫色の部分を別途作成する(加えて、それをどこかのサーバーに設置しておく)必要があるわけです。この部分は例えば Java のサーブレットであれば、おおまかにはこんな感じになるでしょうかね:
public class SpoofXFrameOptionsServlet extends HttpServlet { public void doGet( HttpServletRequest req, HttpServletResponse res ) throws IOException{ req.setCharacterEncoding( "UTF-8" ); String html = ""; String url = "", _url = req.getParameter( "url" ); if( _url != null && _url.length() > 0 ) url = _url; if( url != null && url.length() > 0 ){ try{ GetMethod method = new GetMethod( url ); HttpClient client = new HttpClient(); int sc = client.executeMethod( method ); html = method.getResponseBodyAsString(); }catch( Exception e ){ e.printStackTrace(); } } res.setContentType( "text/html; charset=UTF-8" ); res.setCharacterEncoding( "UTF-8" ); res.getWriter().println( html ); }
このサーブレットが http://xxxx/spoofxframeoptions という名前でアクセスできるようになっていたとすると、
http://xxxx/spoofxframeoptions?url=(iframe 内に入れたいページのURL)
のように指定することで、目的のページのコンテンツを取得できることになります。 なので、この上記の URL を iframe 内で指定すればいい、ということになります。
<iframe class="box" href="http://xxxx/spoofxframeoptions?url=(iframe 内に入れたいページのURL)"></iframe>
で、これを実際にやってみたのがこちらのリンクです:
Google ←ライトボックス内でGoogleトップページが表示できるようになりました
厳密には上記のサーブレットのサンプルはまだ不完全で、実際には文字コードを考慮したり、HTML 内の <base href="..."> 要素を追加する必要があったり、ページによっては Referer を指定しないと取得できなかったり、、、といった細かな修正が必要になるのですが、とりあえず X-Frame-Options の制約を回避する手段としては使えそうですね。
コメント
コメント一覧 (2)
x-frame-options回避方法が知りたくてこちらに辿り着きました。
しかし、サイト作成の知識が乏しく、理解ができませんでした。
サーバーが2つあって、Aを中継するサイト、Bを公開するサイトとしたとき
Aには何を書きけばよいでしょうか?
Bは<iframe class="box" href="http://xxxx/spoofxframeoptions?url=(iframe 内に入れたいページのURL)"></iframe>だとは理解できました。
お手数ですがよろしくお願いいたします。
逆に言うと A ではなんらかのプログラムを動かす必要があるため、そのプログラムを動かすことができるような環境(プログラミング言語)が A にインストールされている必要があります。