クロスドメインで同じlocalStorageを使うテクニック

Nicholas C. Zakas氏がNCZOnlineのLearning from XAuth: Cross-domain localStorageの記事で、XAuthで採用されている機能を紹介している。XAuthは複数のドメイン間でデータを共有するための機能を提供してくれる。氏はXAuthで採用された方法は複数の違うドメインの間で永続的にデータを共有するテクニックとして素晴らしい方法だとしており、簡単なサンプルコードも含めて説明している。

データを永続的に保存する方法としてはlocalStrageを使う方法がこれからのスタンダードになっていくとみられている。localStorageは便利な機能だが、シングルドメインに限定されている。違うドメインのデータを保持することはできない。違うドメインの間でデータを送受信する方法がないわけではなく、クロスドメインメッセージングの機能を使えばメッセージの送受信は可能になる。XAuthで採用されているのは、この2つの技術を組み合わせてデータを単一のlocalStrageに保存することを可能にするというもの。アイディアを簡単にまとめると次のとおり。

• a) localStorageにデータを保存するためだけの目的をもったページをひとつ用意する。ほかのドメインのデータであっても、データはこのlocalStorageに保持するようにする。
• b) データを保持したいページでは、iframeを使ってlocalStorageへの保持のみを目的としたページを開いておく。
• c) クロスドメインメッセージングの機能を使って対象のドキュメントとiframeに開いたlocalStrage用のページの間でメッセージをやりとりする。このメッセージがiframe経由で用意したlocalStorageに保存される。

XAuthではhttp://xauth.org/server.htmlがa)に対応している。http://xauth.org/server.htmlのソースコードを見ると最小限のJavaScriptになっており、localStorageとJSONデータをやりとりする処理に特化していることを確認できる。このJavaScriptはローカルに動作するものだが、いわば「ブラウザ内で動作するlocalStrageサーバ」としての機能を果たすことになる。

これを利用する側のJavaScriptライブラリでは、最初の利用時にhttp://xauth.org/server.htmlにアクセスするiframeを生成する仕組みになっている。つまりこの段階でサーバにアクセスするパスを用意したということになる。以降はクロスドメインメッセージングの機能を使ってデータを送受信すればいい。このアイディアを可能にする技術を簡単にまとめると次のとおり。

• iframe機能
• localStorage機能
• クロスドメインメッセージング機能
• ネイティブJSONシリアライゼーション/パース機能

すべてのブラウザがこの機能をサポートしているわけではなく、動作するブラウザは次のバージョンに限定されるという。

• IE8以降
• Firefox 3.5以降
• Chrome 4以降
• Safari 4以降
• Opera 10.5以降

しかし、こうした機能を利用すると割り切ったことでコードはすっきりとまとまっていると説明がある。