ウィジェットとAjax - 複数のサーバーに接続する

Opera Widgets and Ajax: connecting to multiple serversをローカライズしたものです。原文とは異なる表現を使ったりしています。
この記事のライセンスはCreative Commons 表示-非営利-継承 2.5 一般です。原著作者はOpera Softwareです。

なお、ウィジェットに関する説明は「Opera ウィジェット」を、その他のウィジェット関連の文書について知りたい方はCategory:ウィジェットを、それぞれご覧ください。

[編集] はじめに

ウェブページのスクリプトは、そのページが読み込まれたサーバー以外のサーバーに接続することは出来ません。これは、same-origin security policyと呼ばれ、ウェブを安全に保つための基礎となっています。

Operaウィジェット（以下「ウィジェット」）にはより自由な（liberal）セキュリティーモデルを持たせ、ウィジェットが複数のサーバーと通信できるようにし、たくさんのおもしろいことができる可能性への道を開いています。しかし、これによって新たなる攻撃への道も開いてしまいます。しかしながら、対策もあります。ウィジェットをロックしてしまって、無作為な（random）ウェブサイトに情報を送れないようにすることができます。この記事では、どのようにウィジェット内でcross-siteなAjaxのリクエストを送るかを例を用いて説明します。

[編集] Same-origin security policy

ウェブページで動くスクリプトは、ページの読み込まれたサーバーのみからデータをダウンロードすることができます。これはsame-origin security policyと呼ばれ、悪意のあるスクリプトがユーザーの知らないところで他のウェブサイトに機密性を要するかもしれないデータを送受信するとこを防いでいます。

なお、スクリプト自体はウェブページとは別のサイトからダウンロードされていてもかまいませんが、その場合もスクリプトはページ（メインのドキュメント）が読み込まれたサーバー以外に接続できません。

このポリシーは、XMLHttpRequestを使ってウェブサーバーからデータを読み書きするAjaxアプリケーションにも当てはまります。

ブラウザがどのようにしてこのセキュリティーポリシーを実施しているかは、例を使って簡単に試すことができます。下のJavaScriptコードはXMLHttpRequestを使ってwww.google.comからウェブページを読み込みます。

 var xhr = new XMLHttpRequest ();
 xhr.open( 'GET', 'http://www.google.com', false );
 xhr.send();

このスクリプト（ javascript:var xhr = new XMLHttpRequest (); xhr.open( 'GET', 'http://www.google.com', false ); xhr.send(); ）を試してみると、ブラウザのJavaScriptエラーコンソールに以下のようなメッセージが出るはずです。

 Javascript URL thread: "javascript:varxhr = new XMLHttpRequest ();xhr.open( 'GET', 'http://www.google.com', false );xhr.se..."
 Error:
 name: Error
 message: Security violation

この場合、ドキュメントがGoogleのサーバーから読み込まれていなかったので、このスクリプトにとってwww.google.comは許容外だったのです。

さらなる練習問題として、このページが読み込まれたサーバーのドメイン名をXMLHttpRequestの引数に使って上の例を試してみましょう。

same-origin security policyを回避するために、あなたは自分のウェブサーバーを立てて他のサーバーからのデータをproxyさせるということもできます。このようにすることで、ウェブページが間接的に複数のサーバーと通信することができます。これを実現するのは大変な仕事です。特に他人から意図せずproxyを使われることを防がなくてはいけません。ウィジェットはクライアント側のウェブ技術のみを使ってこの手間を回避する方法を提供します。

[編集] ウィジェットとセキュリティーモデル

ウィジェットのセキュリティーモデルを使って、どのようなプロトコルで、どのホストとポートにウィジェットが接続できるかを特定させることができます。もし制限が明示されていない場合は、全てのホストとポートに接続することができます。アクセス制限はウィジェットのconfig.xmlファイルのaccess要素を使って特定することができます。

つまり、ウィジェットはデフォルトでほとんどのサーバーと通信することができます。しかし、file://というURLとは通信することはできず、http以外のプロトコルは明示されなければなりません。

ウィジェットが複数のサーバーに接続できることから起こる問題を回避するために、各ウィジェットは別々のcookieとキャッシュを持ちます。詳しくはウィジェットのセキュリティーモデルをご覧ください。

注：Operaはウィジェットの仕様をW3Cに提出しています。おそらくセキュリティーモデルはその通りに変更されるでしょう。例えば、ネットワークへの無条件のアクセスは許可制になる可能性が高いです。

[編集] ウィジェットでクロスサイトXMLHttpRequest

ウィジェットでクロスサイト（cross-site）なXMLHttpRequestをするのに特別なことは必要ありません。単にXMLHttpRequestオブジェクトを作って接続したいホストへの接続を開始すればいいのです。

 var xhr = new XMLHttpRequest ();
 xhr.onreadystatechange = function () {
     if ( this.readyState == 4 )
     {
         switch ( this.status )
         {
             case 200:
                 handleData(xhr.responseText);
                 break;
             case 400:
               //...
             //... Handle other cases
         }
     }
 }
 xhr.open( 'GET', 'http://www.google.com/', false );
 xhr.send();

この例ではGoogleにリクエストを送信しています。ページ全体がxhrオブジェクトのresponseTextプロパティから利用出来ます。

外部のサーバーと通信することは多くのウィジェットにとっての要です。例えば、ウェブカメラの画像や、フォトギャラリーからの画像、地図のデータ、交通データ、天気のデータなどを取得したりです。代表的な使用法は、公開されているXMLベースのAPIでサーバーに通信したり、ウェブページの一部を切り取ったりすることです。

[編集] マッシュアップウィジェット

マッシュアップウェブアプリケーション（Mashup web application）とは、複数のウェブサイトやサーバーからの情報を結合して新たなウェブアプリケーションに仕立て上げたものです。

本来、マッシュアップウェブアプリケーションは複数のサーバーに接続するサーバー上に実装されていました。ウィジェットを使ってマッシュアップウェブアプリケーションは完全にクライアント側に実装することができます。

マッシュアップは大抵、Facebook、Flickr、Google Mapsなどの公開されているウェブサイトのXML APIを使って作られます。そのようなAPIの概説はProgrammable Webのサイトで見ることができます。

[編集] その他の技術と取り組み

W3Cはクロスドメイン（cross-domain）のアクセスを標準化しようと取り組んでいます。2008年5月現在の草案では、これはウェブサーバーが特別なヘッダーを送信することで、他のどのサーバーにブラウザを接続させることができるかを許可することで果たそうとしています。詳しくはAccess Control for Cross-site Requestsをご覧ください。

ほとんどのブラウザでは設定を変えることによってクロスサイトのセキュリティ制限を下げることができます。Internet Explorerのバージョン5まではユーザーが信頼するサイトやサイト群を決めることができ、これらのサイトへのAjaxの接続ができます。Mozilla Firefoxではユーザーがdocument.domainプロパティをある親ドメインに決めてmスクリプトが異なるサブドメインにアクセスするのを許可できます。

[編集] 参照

Opera Widgets security model
Wikipedia entry on Same origin policy.
Wikipedia entry on XMLHttpRequest.
Wikipedia entry on Cross-site scripting.
Wikipedia entry on Mashups(web_application_hybrid).
Mozilla documentation on the same origin policy.
Using the XML HTTP Request object Using the XML HTTP Request object, tutorial at jibbering.com.
Programmable Web
Access Control for Cross-site Requests, W3C Working Draft.