Web 開発チュートリアル クロスドメイン ソリューションの詳細な説明

序文

この記事では、主にWeb開発のためのクロスドメインソリューションを紹介し、参考と学習のために共有します。詳細な紹介を見てみましょう。

クロスドメインとは何ですか?

概念は次のとおりです。プロトコル、ドメイン名、またはポートに違いがある限り、異なるドメインと見なされます。

以下は、クロスドメインの具体的な状況の詳細な説明です。

1. document.domain クロスドメイン

原則：同じメインドメインにあるがサブドメインが異なるページの場合、 document.domainを設定して同じドメインにすることができます。

制限: 同じドメインのドキュメントはページ間の相互運用性を提供し、iframe ページを読み込む必要があります。

次のドメイン名の下にあるページはすべて、document.domain を通じてドメイン間で相互運用できます: http://a.com/foo、http://bacom/bar、http://cacom/bar。 ただし、ページの相互運用性は、一般的な iframe メソッドなどのページをネストすることによってのみ実現できます。

// URL http://a.com/foo
var ifr = document.createElement('iframe');
ifr.src = 'http://bacom/bar'; 
ifr.onload = 関数(){
    var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
    ifrdoc.getElementsById("foo").innerHTML);
};
ifr.style.display = 'なし';
ドキュメント本体に子要素を追加します(ifr);

上記のコードの URL は http://a.com/foo です。http://bacom/bar への DOM アクセスには、後者で document.domain を 1 レベル上に設定する必要があります。

// URL http://bacom/bar
ドキュメント.ドメイン = 'a.com'

document.domain はサブドメインからメインドメインにのみ設定できます。下位または他のドメインに設定することはできません。Chrome で表示されるエラーは次のとおりです。

キャッチされない DOMException: 'Document' の 'domain' プロパティの設定に失敗しました: 'baidu.com' は 'bacom' のサフィックスではありません

2. src 付きのタグ

原則: src属性を持つすべてのHTMLタグは、<img>、<script>を含め、クロスドメインにすることができます。

制限: DOM オブジェクトを作成する必要があり、GET メソッドでのみ使用できます。

document.bodyに src 属性を持つ HTML タグを追加します。src 属性値が指す URL には、GET メソッドでアクセスします。このアクセスはクロスドメインです。

実は、スタイルシートの <link> タグもドメインをまたぐことができます。src または href HTML タグがあれば、ドメインをまたぐことができます。

異なる HTML タグは異なるタイミングで HTTP リクエストを送信します。たとえば、<img> は src 属性が変更されたときにリクエストを送信しますが、script、iframe、 link[rel=stylesheet] DOM ツリーに追加された後にのみ HTTP リクエストを送信します。

var img = 新しい画像();
img.src = 'http://some/picture'; // HTTP リクエストを送信します var ifr = $('<iframe>', {src: 'http://bacom/bar'});
$('body').append(ifr); // HTTPリクエストを送信する

JSONP

原則: <script> はクロスドメインにすることができ、現在のスクリプトの関数はクロスドメインスクリプト内で直接呼び出すことができます。

制限: DOM オブジェクトを作成して DOM ツリーに追加する必要があります。GET メソッドでのみ使用できます。

JSONPは<script>のクロスドメイン機能を使用します。クロスドメインURLによって返されるスクリプトには、データだけでなくコールバックも含まれています。

// URL: http://bacom/foo
varデータ = {
    foo: 'バー',
    バー: 'foo'
};
コールバック(データ);

次に、メインサイト http://a.com で、次のように http://bacom のデータをクロスドメインで取得できます。

// URL: http://a.com/foo
var コールバック = 関数(データ){
    // クロスドメインリクエストから取得したデータを処理します};
var script = $('<script>', {src: 'http://bacom/bar'});
$('body').append(スクリプト);

実際、jQueryはすでにJSONPの使用をカプセル化しています。

$.getJSON( "http://bacom/bar?callback=callback", 関数(データ){
    // クロスドメインリクエストから取得したデータを処理します });

$.getJSON と $.get の違いは、前者は responseText を JSON に変換し、URL にコールバック パラメータがある場合、jQuery はそれを JSONP リクエストとして解釈し、リクエストを完了するための <script> タグを作成することです。

4. ナビゲーションオブジェクト

原則: iframeはナビゲータオブジェクトを共有し、それを使用して情報を渡す

要件: IE6/7

IE6/7 のバグに気づいた人もいます。window.navigator オブジェクトがwindow.navigator間で共有されます。 情報を伝達するためのメッセンジャーとして使用できます。たとえば、単純なデリゲートの場合:

// a.com
ナビゲーション.onData(){
    //データ到着処理関数}
navigation.getData のタイプ === 'function' 
    || ナビゲーション.getData()

// b.com
navigation.getData = 関数(){
    $.get('/path/under/b.com')
        .success(関数(データ){
            navigation.onData のタイプ === 'function'
                || ナビゲーション.onData(データ)
        });
}

document.navigatorと同様に、 window.nameも現在のウィンドウ内のすべてのページで共有されます。情報を伝達するためにも使用できます。 同じように面倒なもう 1 つの方法は、ハッシュ (アンカーと呼ぶ人もいます) を渡すことです。これは、ブラウザーが URL を開くたびに、URL の後の #xxx 部分が保持されるため、新しいページはここから前のページのデータを取得できるからです。

5. クロスオリジンリソース共有 (CORS)

原則: サーバーがAccess-Control-Allow-Origin HTTPレスポンスヘッダーを設定すると、ブラウザはクロスドメインリクエストを許可します。

制限事項: ブラウザはHTML5をサポートし、POSTやPUTなどのメソッドをサポートできる必要があります。

上で述べたクロスドメインの方法はすべて、ある意味ではハックです。HTML5 標準で提案されている Cross Origin Resource Share (CORS) が正しい方法です。 PUT、POST などの他の HTTP メソッドもサポートしており、本質的にクロスドメインの問題を解決できます。

たとえば、http://b.com で http://a.com のデータにアクセスする場合、Chrome は通常、クロスドメイン リクエストによるエラーを報告します。

XMLHttpRequest は http://b.com を読み込めません。要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません。したがって、オリジン 'http://a.com' はアクセスが許可されません。

エラーの原因は、要求されたリソースに Access-Control-Allow-Origin が設定されていないことです。そのため、b.com サーバーでこの応答ヘッダー フィールドを設定する必要があります。

Access-Control-Allow-Origin: * # すべてのドメイン名のアクセスを許可する、または Access-Control-Allow-Origin: http://a.com # すべてのドメイン名のアクセスのみを許可する

6. window.postメッセージ

原則: HTML5ではウィンドウ間でメッセージを送信できる

制限: ブラウザはHTML5をサポートし、相互に通信する前にウィンドウハンドルを取得する必要があります。

これは安全なクロスドメイン通信方法です。postMessage postMessage(message,targetOrigin)も HTML5 で導入された機能です。 同じ発信元であるかどうかに関係なく、任意のウィンドウにメッセージを送信できます。 2 番目のパラメータは * にすることができますが、URL を設定しても一致しない場合はイベントは送信されません。一般的な使用法を見てみましょう。

// URL: http://a.com/foo
var win = window.open('http://b.com/bar');
win.postMessage('こんにちは、バー！', 'http://b.com');

// URL: http://b.com/bar
window.addEventListener('メッセージ',function(イベント) {
    console.log(イベントデータ);
});

7. アクセス制御セキュリティに関する議論

HTML5 以前は、JSONP がクロスドメインの事実上の標準となり、jQuery でもサポートされていました。 これは単なるハッキングであり、追加のセキュリティ上の問題は発生しないことに注意してください。 JSONPは、クロスドメインリソースが配置されているサーバーの協力を必要とし、リソースが配置されているサーバーは適切な関数を自発的にコールバックする必要があるため、サーバーは依然としてリソースへのクロスドメインアクセスを制御する機能を持っています。

クロスドメインの正しい方法は、HTML5 が提供する CORS ヘッダー フィールドとwindow.postMessageを使用することです。これらは、POST や PUT などの HTTP メソッドをサポートし、メカニズムの観点からクロスドメインの問題を解決できます。 Access-Control-Allow-Origin ヘッダー フィールドは、リソースが配置されているサーバーによって設定されることに注意してください。アクセス制御の責任は、JSONP と同様に、リソースを提供するサーバーにあります。

要約する

上記はこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に少しでもお役に立てれば幸いです。ご質問があれば、メッセージを残してコミュニケーションしてください。123WORDPRESS.COM をご愛顧いただき、ありがとうございます。