JSのクロスドメイン問題を詳しく解説_基礎知識

JavaScript は、Web 開発でよく使用されるフロントエンドの動的スクリプト技術です。 JavaScript には、「同一オリジン ポリシー」と呼ばれる非常に重要なセキュリティ制限があります。このポリシーは、JavaScript コードがアクセスできるページ コンテンツに重要な制限を設けます。つまり、JavaScript は、それを含むドキュメントと同じドメイン内のコンテンツにのみアクセスできます。

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

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

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

(1) 異なるサブドメインのクロスドメイン テクノロジー。
2 つの質問を個別に説明します。最初の質問は、異なるサブドメイン間で JavaScript 呼び出しを行う方法であり、2 番目の質問は、異なるサブドメインに Ajax リクエストを送信する方法です。

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

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

関数 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 つのページの先頭に追加できます:

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

<スクリプトタイプ="text/javascript">
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 オブジェクトを作成します。

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

工場 = [
Function() { 新しい XMLHttpRequest() を返す },
Function() { return new ActiveXObject("Msxml2.XMLHTTP") },
Function() { return new ActiveXObject("Microsoft.XMLHTTP") }
];
function newRequest() {
for(var i = 0; i factory.length; i ) {
試してみましょう{
var ファクトリー = 工場[i];
return Factory();
} catch(e) {}
}
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 エンジンが例外をスローします。

解決策は、crossdomain.html という名前のクロスドメイン ファイルを def.example.com ドメインの下に配置し、前の newRequest 関数の定義をこのクロスドメイン ファイルに移動することです。ドキュメントのドメイン値は同じです。crossdomain.html ファイルと、abc.example.com ドメインの下で Ajax を呼び出すページの先頭に、

を追加します。

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

<スクリプトタイプ="text/javascript">
Document.domain = "example.com";

クロスドメイン ファイルを使用するには、abc.example.com ドメインの下で Ajax を呼び出すページに、クロスドメイン ファイルを指す非表示の iframe を埋め込みます。例:

[コード]