背景

ユーザー A が視覚エフェクトプロジェクトを DataV で作成し [データソースタイプ]ドロップダウンリストから API を選択している (以下の図の表示を参照) 場合は、API のホストの場所によっては以下のような状況が発生する場合があります。
  • API がリモート サーバー上にありパブリック ネットワークへのアクセスがある場合は、[サーバーからリクエストを開始 (HTTP プロキシ)] チェック ボックスをオンにします。DataV バックエンド サーバーは同時に API へのリクエストを開始します。 リクエストのタイムアウトは 10 秒で変更できません。
  • API がローカル サーバー上にある場合は、[サーバーからリクエストを開始 (HTTP プロキシ)] チェック ボックスをオフにします。 インターフェイスはクロスオリジンで設定する必要があります。API へのアクセスはローカル ブラウザから行われ、タイムアウト時間もローカル ブラウザによって決まります。

クロスオリジンデータ設定関連の問題

ユーザー A のウェブサイトには、自身のウェブサイトのデータとユーザー B のウェブサイトのデータを含める必要があるとします。 ユーザー A のウェブサイトのデータはウェブサイト インターフェイス <http://userA.com/page1> でアクセスできます。 ユーザー B のウェブサイト インターフェイスは <http://userB.com/page2> です。 ユーザー A がユーザー B のウェブサイトへのアクセスを得るために Javascript AJAX リクエストを使用している場合、ユーザー A は userB.com からデータを取り込むことができません。

先行リクエスト時に Chrome ブラウザが開いている場合は以下のように表示されます。
XMLHttpRequest cannot load http://userB.com/page2. Access-Control-Allow-Origin ヘッダーがリクエストのリソース上に存在しないため、オリジン”http://userA.com/” はアクセスが許可されません。

これは、クロスドメインの問題が発生したことを意味します。

理由

各ウェブサイトにはユーザー インターフェイス、order interface、article interface などさまざまなインターフェイスがあるため、各ユーザーはそれらのインターフェイスから戻されたデータを自身のウェブサイトに載せることができます。 これはブラウザが 同一のオリジンポリシーで運用されていることを意味しており、あるオリジンのスクリプトが別のオリジンからリソースを入手することを制限しています。
同一のオリジン: 2 つのページのプロトコル (HTTP)、ポート (80)、ホスト (userA.com) が同じである場合、これらの 2 つのページは同一オリジンであるとみなされます。

解決策

  • オリジン A.x.com とオリジン B.x.com との間の問題

    http://xyz.userA.com/ と http://123.userA.com/ のように、2 つのサイトのサブドメインが 異なる場合でもやはりクロスオリジンの問題は発生します。

    この問題を解決するには、当該のページをより上位のオリジンとして宣言する必要があります。
    <script>
      document.domain = "x.com";
    </script>
  • JSONP

    JSONP は一般的に適用される解決方法ですが、クロスサイト スクリプティング (XSS) 攻撃に対して脆弱性があります。 このため、DataV ではこの方法をサポートしていません。

  • クロスオリジンリソース共有 (CORS)
    クロスオリジンリソース共有 (CORS) はリソース共有の制限に関連する問題を解決するために導入された方法です。 ほとんどの場合新型ブラウザは CORS に対応しています。

    概念

    カスタムの HTTP ヘッダー情報をユーザー B のウェブサイト (ローカル API) に追加して他のウェブサイトから当該リソースにアクセスできるようにします。

    事例
    • データ サーバーから返ってくるヘッダー情報は、以下のような基本的な内容です。
      Access-Control-Allow-Origin: http://www.example.com
    • ユーザー B の API が多くの特定のウェブサイトで使用されている場合、ヘッダー情報は動的に生成される必要があります。以下の例では PHP を使用しています。 次の例では PHP を使用しています。
      <? php 
      if (is_my_bastard($_SERVER['HTTP_ORIGIN'])) {
      header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
      }
      ? >
    • ユーザー B の API がさまざまなウェブサイトで使用される可能性がある場合は、“*” を使用します。
      Access-Control-Allow-Origin: *

    Cookie

    CORS にはデフォルトでは cookie 情報が含まれていません。 cookie を追加する場合は、以下の手順に従います。
    1. withCredentials パラメーター(jquery の場合)を追加します。
      $.ajax({
       url: "http://userB.com/isdad",
       xhrFields: {
         withCredentials: true
       }
      });
    2. 認証情報付きのヘッダーは許可し以下のようなワイルドカード文字 “*” は許可しないようにサーバーを設定します。
      <? php 
      if (is_my_bastard($_SERVER['HTTP_ORIGIN'])) {
      header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}"); // Disallow “*”
      header("Access-Control-Allow-Credentials:true");
      }
      ? >

      詳細については、「HTTP アクセス制御 (CORS)」をご参照ください。