JavaScript_javascript スキルにおける 2 つのクロスドメイン技術の包括的な紹介

このポリシーは、JavaScript コードがアクセスできるページ コンテンツに重要な制限を設けます。つまり、JavaScript は、それを含むドキュメントと同じドメイン内のコンテンツにのみアクセスできます。

JavaScript セキュリティ戦略は、Ajax プログラミングだけでなく、マルチ iframe またはマルチウィンドウ プログラミングを実行する場合にも特に重要です。このポリシーによれば、baidu.com のページに含まれる JavaScript コードは、google.com ドメイン名のページ コンテンツにアクセスできません。また、異なるサブドメイン間のページであっても、JavaScript コードを介して相互にアクセスすることはできません。 Ajax への影響は、XMLHttpRequest によって実装された Ajax リクエストが別のドメインにリクエストを送信できないことです。たとえば、abc.example.com の下にあるページは、def.example.com などに Ajax リクエストを送信できません。

しかし、詳細なフロントエンドプログラミングを行う場合、クロスドメイン操作が必然的に必要になるため、この時点で「同一生成元ポリシー」は厳しすぎます。この記事では、この問題に関するクロスドメインに必要ないくつかのテクノロジーをまとめます。

以下では、クロスドメイン テクノロジーを 2 つの状況で説明します。最初に、異なるサブドメインのクロスドメイン テクノロジーについて説明し、次に完全に異なるドメインのクロスドメイン テクノロジーについて説明します。

(1) 異なるサブドメイン内のクロスドメイン テクノロジー。

2 つの問題について個別に説明します。1 つ目は、異なるサブドメイン間で JavaScript 呼び出しを行う方法であり、2 つ目は、異なるサブドメインに Ajax リクエストを送信する方法です。

まず最初の問題を解決しましょう。example.com ドメインの下に abc.example.com と def.example.com という 2 つの異なるサブドメインがあるとします。ここで、def.example.com の下に JavaScript 関数を定義するページがあるとします。

コードをコピーします コードは次のとおりです。

function funcInDef() {
.....
}

abc.example.com の下のページで上記の関数を呼び出したいとします。議論したい abc.example.com の下のページが iframe の形式で def.example.com の下のページに埋め込まれていると仮定します。この場合、iframe で次の呼び出しを試みることができます。 >

コードをコピー コードは次のとおりです:

window.top.funcInDef();

わかりました。この呼び出しは前述の「同一生成元ポリシー」によって禁止されており、JavaScript エンジンは直接例外をスローします。
上記の呼び出しを実装するには、2 つのページのドメイン属性を変更することで実行できます。たとえば、次の JavaScript コード スニペットを abc.example.com と def.example.com の上の 2 つのページの先頭に追加できます:

Copy Code コードは次のとおりです:

document.domain = "example.com";

このようにして、2 つのページは同じドメインになり、以前の呼び出しは正常に実行できるようになります。

ここで注意すべき点は、ページの document.domain 属性は上位レベルのドメイン名 (第 1 レベルのドメイン名を除く) にのみ設定でき、サブドメインには設定できないことです。現在のドメイン名よりも深い。たとえば、abc.example.com ページのドメインは example.com にのみ設定でき、sub.abc.example.com には設定できません。もちろん、第 1 レベルのドメイン名 com に設定することはできません。

上の例では、2 つのページが iframe のネストされた関係に属している場合について説明しています。2 つのページにオープンとオープンの関係がある場合、原理はまったく同じです。

2 番目の問題、Ajax リクエストを異なるサブドメインに送信する方法を解決しましょう。
通常、次のようなコードを使用して XMLHttpRequest オブジェクトを作成します。

コードをコピー コードは次のとおりです。 :

factories = [function() {

return new XMLHttpRequest();
},
function() {
return new ActiveXObject("Msxml2.XMLHTTP");
},
function() {
return new ActiveXObject("Microsoft.XMLHTTP");
}];
function newRequest() {
for (var i = 0; i & lt; 工場.length; i ) {
試してみてください。 > null を返します;
}

上記のコードは、IE6 シリーズ ブラウザとの互換性を保つために ActiveXObject を参照しています。 newRequest 関数を呼び出すたびに、新しく作成された Ajax オブジェクトを取得し、この Ajax オブジェクトを使用して HTTP リクエストを送信します。たとえば、次のコードは GET リクエストを abc.example.com に送信します。

コードをコピーします コードは次のとおりです。

var request = newRequest();
request.open("GET", "http://abc.example.com" );
request.send(null);

上記のコードが abc.example.com ドメイン名のページに含まれていると仮定すると、GET リクエストは問題なく正常に送信できます。ただし、def.example.com にリクエストを送信すると、クロスドメインの問題が発生し、JavaScript エンジンが例外をスローします。
解決策は、クロスドメイン ファイルを def.example.com ドメインの下に配置し、そのファイルがcrossdomain.html であると仮定して、前の newRequest 関数の定義をこのクロスドメイン ファイルに移動します。ドキュメントのドメイン値は前と同じです。crossdomain.html ファイルの先頭と、abc.example.com ドメインの下で Ajax を呼び出すページに、

コードをコピーします コードは次のとおりです:

document.domain = "example.com";

クロスを使用するには、ドメイン ファイルの場合、abc.example.com ドメインの下で Ajax を呼び出します。 ページにクロスドメイン ファイルを指す非表示の iframe を埋め込みます。たとえば、次のようにします。

コードをコピーします コードは次のとおりです:

用 iframe 内嵌其它ドメイン下の页面：

复制代码代码如下:

& gt;

注: postMessage 方式は現在、さまざまな新しい視聴者からのサポートを、予想外の速度で取得できるようになっており、慎重に検討してください。