Kawanet Blog II

アクセスカウンタ

zoom RSS [Dojo] JavaScriptのみでクロスドメインXMLHttpRequest

<<   作成日時 : 2006/08/06 02:59   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 14 / トラックバック 2 / コメント 0

XMLHttpRequest (XHR)は、ブラウザのセキュリティ制限のため、本来は表示中の
HTMLと同じドメイン上にあるXMLやテキストファイルにしかアクセスできません。
JavaScript だけでは、他のドメイン上にあるファイルや、はてな・ライブドア等が
提供するウェブサービスにアクセスできませんでした。
しかし、JavaScriptライブラリDojoの新機能を使うと、ドメインを越えた通信が
できるようになるそうです。

従来、クロスドメイン制限については以下のような回避策も考えられてきましたが、
どれも短所があって、イマイチ使いにくいところがありました。

・HTMLを設置しているドメインのサーバ上にプロキシCGI等を設置する
   →オープンプロキシ(誰でも利用できてしまう。掲示板の匿名投稿にも悪用可能)
・FLASHのクロスドメイン通信の機能を経由させる
   →JavaScriptからFLASHを呼び出す必要がある
・接続先ウェブサービス側の出力フォーマットに JavaScript を追加する
   →データでなくJavaScriptプログラムを返す。グローバル変数を書き換える。

Dojoの新しい手法はIFrameを複数使うことで、JavaScriptのみでクロスドメインの
通信に対応するものです。

<サーバA上の親ページから、サーバB上のウェブサービスにアクセスする手順>

1) 親ページ内に、1つ目のIFrame(クライアントIFrame)を作成する。
2) クライアントIFrameから2つめのIFrame(サーバIFrame)を作成する
3) 親ページからクライアントIFrameにXHRリクエスト用のデータを送信する
4) クライアントIFrameは、サーバIFrameに同データを転送する
5) サーバIFrameは、サーバB上のウェブサービスにXHRで接続する
6) サーバIFrameは、受け取ったXHRレスポンスをクライアントIFrameを経由して、
   親ページに返す

まとめると、↓のようなデータの流れになります。

親ページ ←→ クライアントIFrame ←→ サーバIFrame ←XHR→ ウェブサービス

クライアントIFrame用のHTMLファイルはサーバA上に、
サーバIFrame用のHTMLファイルはサーバB上に予め用意しておきます。
項番5でサーバBのウェブサービスにアクセスしているのは、サーバB上にある
HTMLファイルとなるので、XHRのクロスドメイン制限に抵触しないのです。
間にIFrameをカマすことで、親ページから見ればドメインを越えた通信ができます。

この仕組みのポイントは、IFrame間のデータの受け渡しに fragmentIdentifier を
利用している点です。fragmentIdentifier とは、ブラウザの管理しているURLのうち、
http://www.a.com/path/to/file.html#fragmentIdentifier
の「#」以降の部分です。<a name="">で定義する部分ですね。

XHRのリクエスト(URL&POSTのボディを含むXHRのすべてのオプション)や
レスポンスのデータ長はブラウザによる fragmentIdentifier の長さ制限を
越えてしまう場合があるため、長い場合は複数回に分けてデータの受け渡しを
行うそうです。fragmentIdentifier を通信路としたプロトコルと読べると思います。

<欠点>
1)複数のIFrameを利用するため、ネイティブの XHR よりもブラウザのメモリを消費する
2)fragmentIdentifierを監視するためにタイマを使うため、その分遅くなる
3)IEに限っては、fragmentIdentifier 通信の度に、マウスクリック音がしてしまう
4)アクセス先のウェブサービス側に、サーバIFrameのコードが必要となる

メモリを多く使っても、多少遅くなっても、ネイティブXHRで通信できるのは
メリットがありますから、大きな問題にはならないでしょう。
しかし、3のIEでクリック音がするのは、残念です。リンク移動した扱いになるようです。
これが回避できれば、現実的になってくるのですが。
4については、FLASHでもcrossdomain.xmlの設置が必要ですから、同等か。
逆にウェブサービス側のサーバ上に設置できることで、クライアントIFrame〜
サーバIFrame間の通信もデータだけ・特定目的だけに限定できて安心です。

とてもよく考えられたテクニックだと思います。
fragmentIdentifier 以外にも、他に IFrame間で双方向通信を行える手順があれば
クリック音を回避できるのですが。IEで使いにくいのでは、まだ実用化は難しいか。。。

テーマ

注目テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 14
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
面白い 面白い 面白い
ナイス ナイス
かわいい かわいい
驚いた
ガッツ(がんばれ!)

トラックバック(2件)

タイトル (本文) ブログ名/日時
JavaScriptのみでクロスドメイン
[Dojo] JavaScriptのみでクロスドメインXMLHttpReques... ...続きを見る
SITE159
2006/08/07 11:00
あまり知られていない,DNSを用いたクロスドメイン通信手法
現状のクロスドメイン通信について Ajaxにおけるクロスドメイン制限は,非常に煩... ...続きを見る
Xtyle::blog
2007/08/08 08:50

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
[Dojo] JavaScriptのみでクロスドメインXMLHttpRequest Kawanet Blog II/BIGLOBEウェブリブログ
文字サイズ:       閉じる