クロスドメインサービスコールの基本概念と解決方法

3944 ワード

概要
クロスステーションスクリプトの攻撃を防ぐために、ブラウザは、クライアントスクリプト(Javascriptなど)によるドメイン名別サービスのクロスドメイン呼び出しを禁止する.
ソースポリシー(Same Origin)のソースは厳密な定義があり、RFC 6454、第4章を参照してください.一般的には、Originは「protocol,host,port」の3つの部分から構成されています.
以下は同源検査のいくつかの例である.
意外かもしれませんが、一般的には異なるサブドメイン名は同じドメイン名として扱われるべきだと思います.安全な呼び出しですが、実際にブラウザのソースポリシーは異なるサブドメイン名とポートのサービス間の呼び出しを禁止しています.
解決方法
上記の制限が厳しい場合があります.二つの異なるOriginのウェブページ(サービス)の間で通信するために、次のような技術方法を採用することができます.
1、サービスエージェントモード
つまり、ウェブサーバにサードパーティサービスをパッケージ化して、自分の同ソースのウェブページに呼び出します.
2、スパンドメインの呼び出し
www.example.comからappi.example.comのhtml/xmlデータサービスを呼び出すと、iframeを使用して、documentとiframeの両方に同じdocument.domain属性を設定することができます.documentとiframeの対応するページは直接通信できます.安全衝突がないので、同じドメイン名を設定してください.(document.doman=「example.com」)サブドメインは設定しないでください.コードの例は以下の通りです.
t.


  
  
    document.domain = "example.com";
    function update_me(result) {
      document.getElementById('update-me').innerHTML = "Result: " + result;
    }
    function load() {
        var c = document.createElement('iframe');
        c.style.display = "none";
        c.src = "http://api.example.com/cross-subdomains-ajax/t-frame.html#" + document.domain;
        document.body.appendChild(c);
    }

t-frame.html


  
  
    function spoof(status, headers, result) {
      var old_domain = document.domain;
      document.domain = example.com;
      window.parent.update_me("Ok, got it from the frame !");
      try {
        document.domain = old_domain;
      } catch (e) { }
    }
    spoof();

3、ソースをまたぐ資源の共有
これは標準化された技術方法で、W 3仕様の文書Cross OriginasourceSharingを参照してください.http://www.w3.org/TR/cors/
サービス端末にAccess-Control-Allow-Origin応答ヘッドを設定することによって、
header(''Access-Coontrol-Alllow-Origin:'.'.hu SERVER');
このサービスは特定のソースからのアクセスを許可するか、またはすべての人にアクセスを許可するかをブラウザに伝えます.
この仕様はオリジンリストの形式を使用することをサポートしていますが、実際のブラウザは単一オリジン、*、nullのみをサポートしています.複数のアクセス源を設定するなら、コードの中で下記のように処理できます.

$allowed_origins   = array(
                            "http://www.example.com"   ,
                            "http://app.example.com"  ,
                            "http://cms.example.com"  ,
                          );
if (in_array($_SERVER['HTTP_ORIGIN'], $allowed_origins)){  
    @header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);
}

またはhttpdの設定またはhttaccessファイル(Apacheサーバを使用すれば)に次のような文を追加します.

SetEnvIf Origin "^(.*\.example\.com)$" ORIGIN_SUB_DOMAIN=$1
Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN

使用しているのがnginxである場合、構成は以下の通りである.

location / {
    # this will echo back the origin header
    if ($http_origin ~ "example.com$") {
        add_header "Access-Control-Allow-Origin" $http_origin;
    }
}

4、JSONPプロトコルを使用する
同じソースポリシーのため、HTMLは2つのページの間で通信を禁止していますが、要素は例外です.JSONPはこのオープン特性を利用してクロスドメイン呼出しを実現しています.
<p>クライアントがJSONPサポートを提供するURL Serviceを呼び出し、JSONPフォーマットデータを取得し、コールバック関数で返信されたjsonプロトコルデータを処理する.
<p>
<pregt;<code class="langgge"<script type="text/javascript"src="http://api.example.com/getdata?jsonp=callback">
jQueryを使用するajax呼び出し方式の場合、モデルコードは以下の通りです.

$.ajax({
dataType: 'jsonp',
data: 'id=10',
jsonp: 'jsonp_callback',
url: 'http://api.example.com/getdata',
success: function () {
// do stuff
},
});

5、ドキュメントをまたぐメッセージ(Cross-documentMessaging)
これはHTML 5が導入したクロスドメインページ間で通信する方法です.W 3仕様を参照してください.http://dev.w3.org/html5/postmsg/
postMessage APIのアプリケーション範囲は主に2つあります.1はドキュメントと埋め込みframeの間のメッセージ通信です.2はドキュメントと自身がスクリプトを通して開いたwindows間のメッセージ通信です.
by iefreer

Typeescript内蔵のモジュール導入互換方式