mozilla
Your Search Results

    Cross-Site XMLHttpRequest

    Firefox 3 における注記

    この機能は Firefox 3 で利用可能ですが、拡張及びその他の特権コードに限られます。Web コンテンツでは現在利用できません。

    Firefox 3 では W3C Access Control の作業草案が実装され、外部の Web サイトに対して XMLHttpRequest を実行することが可能になります。

    概要

    W3C Access Control の機構により、クライアントサイドの文書は XMLHttpRequest などのブラウザベースのリクエストを受け入れるかどうかを厳密にコントロール出来るようになります。

    さらに、このアクセス制御方式により、Web アプリケーションはクロスサイトリクエストを実行できるようになります。これにより、例えば XMLHttpRequest によって yoursite.com のページから google.com のドキュメントをリクエストすることも理論上は (アクセス制御ポイントが設置されれば) 可能になります。コンテンツ作成者がこの制御レベルを与えることで、ユーザーはそのコンテンツの情報を使ってより柔軟にマッシュアップやアプリケーションを作成することが可能になります。

    使用方法

    Firefox 3 の W3C Access Control を利用するには 2 通りの方法があります。1 つは新しい Access-Control ヘッダを追加する方法です。この方法はあなたが Web サーバに対してより高い権限を持っている場合に、すべてのリソース形式に対して使用できます。もう 1 つは access-control 処理命令を追加する方法で、XML 文書にのみ使用できます。

    Access-Control ヘッダ

    この方法は最も柔軟に XMLHttpRequest を許可できます。具体的には、リクエストへのレスポンスに Access-Control というヘッダを以下のように追加すると、mozilla.org にあるあらゆる Web アプリケーションのアクセスを許可するようになります。

    Access-Control: allow <mozilla.org>
    

    Access-Control ヘッダを使用することで、リクエストの発生元やリクエストメソッドに基づいてアクセスを許可したり拒否することが可能になります。

    妥当な Access-Control ヘッダの例を以下に示します。

    // このリソースには誰でもアクセスできる (制限なし)
    Access-Control: allow <*>
    
    // このリソースへのアクセスはすべて拒否される (例外なし)
    Access-Control: deny <*>
    
    // 'mozilla.org' にホストされたサイトのみがこのリソースにアクセスできる
    // (サブドメインも含む)
    Access-Control: allow <mozilla.org>
    
    // mozilla.org の、developer.mozilla.org を除くすべてのサブドメインがこのリソースにアクセスできる
    Access-Control: allow <mozilla.org> exclude <developer.mozilla.org>
    
    // このドメインの、このポートの、このリクエストメソッドのみがこのリソースにアクセスできる
    Access-Control: allow <developer.mozilla.org:80> method GET, POST
    

    W3C Access Control の作業草案にパターンの例がいくつか掲載されています。

    これは外部の Web サイトから HTML ファイルをリクエストする簡単な例です。その HTML ファイルは PHP スクリプトによって生成されており、PHP スクリプトは Access-Control ヘッダを追加で出力しています。header.html をあなたのサーバにコピーしてもリクエストは機能するのがわかるでしょう (リクエストの送信はすべてのサイトで可能なので)。

    header.html

    <html>
    <head>
    <script>
    window.onload = function(){
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "http://dev.jquery.com/~john/xdomain/test.php", true);
      xhr.onreadystatechange = function(){
        if ( xhr.readyState == 4 ) {
          if ( xhr.status == 200 ) {
            document.body.innerHTML = "My Name is: " + xhr.responseText;
          } else {
            document.body.innerHTML = "ERROR";
          }
        }
      };
      xhr.send(null);
    };
    </script>
    </head>
    <body>
    Loading...
    </body>
    </html>
    

    test.php

    <!-- あなたのサイトからアクセス可能にするには allow <yourdomain.com> に、誰でもアクセス可能にするには allow <*> に変更してください -->
    <?php header('Access-Control: allow <ejohn.org>'); ?>
    <b>John Resig</b>
    

    XML 処理命令

    XML には、XML プロセッサに特別な扱いをさせるための追加のコマンドを含めることができます。Access Control 草案では、XML 文書をクロスサイト方式でリモートからアクセス可能にするためのコマンドを追加する方法を定めています。

    例えば、以下のような access-control 処理命令を含めることで、mozilla.org にあるすべてのサイトがその処理命令が含まれる XML 文書にアクセスできるようになります。

    <?access-control allow="mozilla.org"?>
    

    access-control 処理命令を使って XML 文書へのアクセス権限を与える簡単な例をいくつか示します。

    // このリソースには誰でもアクセスできる (制限なし)
    <?access-control allow="*"?>
    
    // このリソースへのアクセスはすべて拒否される (例外なし)
    <?access-control deny="*"?>
    
    // 'mozilla.org' にホストされたサイトのみがこのリソースにアクセスできる
    // (サブドメインも含む)
    <?access-control deny="mozilla.org"?>
    
    // mozilla.org の、developer.mozilla.org を除くすべてのサブドメインがこのリソースにアクセスできる
    <?access-control allow="mozilla.org" exclude="developer.mozilla.org"?>
    
    // このドメインの、このポートの、このリクエストメソッドのみがこのリソースにアクセスできる
    <?access-control allow="developer.mozilla.org" method="GET POST"?>
    

    W3C Access Control の作業草案にパターンの例がいくつか掲載されています。

    これは外部の Web サイトから XML ファイルをリクエストする簡単な例です。その XML ファイルには access-control 処理命令が含まれており、XML ファイルをリクエストするあらゆる Web サイトに対してアクセスを許可しています。ac.html をあなたのサーバにコピーしてもリクエストは機能するのがわかるでしょう (リクエストの送信はすべてのサイトで可能なので)。

    ac.html

    <html>
    <head>
    <script>
    window.onload = function(){
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "http://dev.jquery.com/~john/xdomain/test.xml", true);
      xhr.onreadystatechange = function(){
        if ( xhr.readyState == 4 ) {
          if ( xhr.status == 200 ) {
            document.body.innerHTML = "My Name is: " +
              xhr.responseXML.getElementsByTagName("name")[0].firstChild.nodeValue;
          } else {
            document.body.innerHTML = "ERROR";
          }
        }
      };
      xhr.send(null);
    };
    </script>
    </head>
    <body>
    Loading...
    </body>
    </html>
    

    test.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <!-- あなたのサイトからアクセス可能にするには allow="yourdomain.com" に、誰でもアクセス可能にするには allow="*" に変更してください -->
    <?access-control allow="ejohn.org"?>
    <simple><name>John Resig</name></simple>
    

    参考資料

    参照

     

     

     

    ドキュメントのタグと貢献者

    Contributors to this page: Shoot, Potappo, teoli
    最終更新者: teoli,