読者です 読者をやめる 読者になる 読者になる

サーバーサイド技術を使わないクロスドメイン通信補足

javascript

クロスドメイン通信方法のまとめ - nopnopの日記の補足です。

ブックマークコメントでちょろっと書いたけど、nopnopさんが書いている以外の方法としてwindowのname属性を使う方法とHTML5のpostMessageがあります。

window.name

これは単純な方法(その分、クロスブラウザであり割と古いブラウザでも動作する(追記:)と、思ったけどIEの動作は微妙かもしれない)で、例えばwindow.open('http://example.com/','hogehoge');といったJavaScriptでウィンドウ(タブ)を開くと、hogehogeというウィンドウが開かれます。インラインフレームなどにも同様にwindowにnameをつけることができます。この名前はwindowを作る側が設定することが出来て、作られる側はドメインなどに関係なく設定されたnameを読み取ることができます。

  • サンプル
javascript:(function(m){window.open('http://ss-o.net/xjs/windowname.html',m);})(decodeURIComponent('HelloWorld'));

参考:window.name - Enjoy*Study

postMessage

こちらはHTML5の仕様で標準的な方法です。が、その分最新のブラウザでないと対応していません。(IE8が対応するらしいので、将来性はあります。)
(ただ、Operaはドラフト時点の仕様を元に、document.postMessageとして実装していて、それ以外のSafari3.1、Firefox3、IE8はwindow.postMessageとして実装しています。Operaには何とかしていただきたいところです。。)Opera 9.50ではwindowに実装されるそうです。beta版のbuild9937において、documentではなくwindowに実装されているのを確認しました。

  • サンプル(Opera9以上、Safari3.1WebKit nightly、Firefox3で動作)
javascript:(function(i){i.style.position='fixed';i.style.top='0%';i.onload=function(p){p=encodeURIComponent(prompt('postMessage','Hello,World!'));i.contentWindow.postMessage(p,'http://ss-o.net');};i.src='http://ss-o.net/xjs/postMessage.html';document.body.appendChild(i);})(document.createElement('iframe'));

参考:


なお、またOperaでニコニコ動画見てる - 0xFFや、OperaでLDR Full Feed - 0xFFなどは、このpostMessageとwindow.nameを使ってクロスサイトなUserJSを実現しています。

[追記] JavaScript微修正。Safari3.1はpostMessageは対応してなかった(WebKit Nightlyは2007年の年末ごろのbuildから対応してます)。

[追記2]

Google Gears(xssinterface)

そういえば、
xssinterface -


JavaScript library for secure cross browser javascript messaging - Google Project Hosting
を思い出しました。これは、postMessageがある場合はpostMessageを、そうでなければGoogleGearsを、そうでなければiframe+Cookieを使ってクロスドメイン通信を実現するというライブラリです。
Cookieの場合は大きなデータを扱えないみたいなので注意が必要ですが、このライブラリは割と実用的な感じです。
参考: xssinterface: cross domain access using postMessage and more - Ajaxian