クロスドメインでiframe内のコンテンツとメッセージの授受「Porthole」
Portholeはiframe内のコンテンツと相互にメッセージを授受できるライブラリです。
最近はFacebookアプリやブログパーツのようにiframeを使って外部サイトのデータを表示するケースが増えています。そんな中、親ウィンドウと子フレームの中でデータを授受できるPortholeはきっと役に立つはずです。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 9.37.50.1359376184.png)
親ウィンドウと子フレームは別ドメインになっています。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 9.38.35.1359376188.png)
子フレームからのアクションで親ウィンドウにおけるiframeの高さが変わりました。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 9.38.43.1359376191.png)
親ウィンドウの色を子フレームから変更しました。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 9.39.17.1359376194.png)
別な色に変更。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 9.39.30.1359376197.png)
別ドメインなのが分かります。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 9.39.36.1359376201.png)
親ウィンドウから子フレームの色を変更しました。
Portholeでは親ウィンドウと子フレームとで相互にメッセージをやり取りできます。iframeは複数作成して、それぞれに別なメッセージを飛ばすことができます。子フレームでは受け取ったメッセージを処理分けして必要な処理を行う必要があります。
PortholeはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
JavaScriptはセキュリティ上の理由から様々な制限があります。例えば外部ドメインのJSONデータを受け取れないのはその一つです。しかしJSONPを使うことによって可能になっています。iframe内のデータに親ウィンドウからタッチできない問題もPortholeが解決します。
Facebookアプリの場合でも子フレームが自分のウィンドウサイズを親ウィンドウに伝えて、それによってサイズを自動変更しています。ブラウザの制約によってセキュリティが担保されて安心して使える一方、その制限を超えてデータを受け渡せるようにする技術も存在するのです。