JavaScriptは、Web開発でよく使用されるフロントエンドの動的スクリプトテクノロジーです。 JavaScriptでは、「同種ポリシー」と呼ばれる非常に重要なセキュリティ制限があります。この戦略は、JavaScriptコードがアクセスできるページコンテンツに重要な制限を課します。つまり、JavaScriptは、それを含むドキュメントと同じドメインの下でのみコンテンツにアクセスできます。
JavaScriptは、マルチイフラームまたはマルチウィンドウおよびAJAXをプログラミングするときに特に重要なセキュリティ戦略です。この戦略によれば、baidu.comのページに含まれるJavaScriptコードは、Google.comドメイン名の下のページコンテンツにアクセスできません。異なるサブドメイン間のページでさえ、JavaScriptコードを介して互いにアクセスすることはできません。 AJAXへの影響は、XMLHTTPREQUESTを介して実装されたAJAX要求が異なるドメインにリクエストを送信できないことです。たとえば、abc.example.comの下のページは、ajaxリクエストをdef.example.comなどに送信することはできません。
ただし、いくつかの詳細なフロントエンドプログラミングを実行する場合、ドメインクロスオペレーションが必然的に必要であり、「同じオリジン戦略」はあまりにも厳しいようです。この記事では、この問題に関するドメイン全体で必要なテクノロジーの一部をまとめたものです。
以下では、2つの状況でクロスドメインテクノロジーについて説明します。まず、異なるサブドメインのクロスドメインテクノロジーについて説明し、次に完全に異なるドメインでクロスドメインテクノロジーについて説明します。
（i）異なるサブドメインのクロスドメイン技術。
2つの質問で個別に説明します。最初の質問は、異なるサブドメインでJavaScriptコールを行う方法です。 2番目の質問は、さまざまなサブドメインにAJAXリクエストを送信する方法です。
最初に最初の問題を解決してみましょう。例のドメインの下に2つの異なるサブドメインがあると仮定してください：abc.example.comおよびdef.example.com。ここで、javaScript関数を定義するdef.example.comの下にあるページがあるとします。
コードコピーは次のとおりです。
関数funcindef（）{
.....
}
abc.example.comの下のページで上記の関数を呼び出します。議論しているabc.example.comの下のページが、iframeの形でdef.example.comのページに埋め込まれていると仮定します。そのため、iframeで次の呼び出しを行うことができます。
コードコピーは次のとおりです。
window.top.funcindef（）;
わかりました、この呼び出しは前述の「同じオリジンポリシー」によって禁止されていることに気付き、JavaScriptエンジンは例外を直接スローするでしょう。
上記の呼び出しを実装するために、2つのページのドメイン属性を変更することでそれを行うことができます。たとえば、abc.example.comとdef.example.comに基づく両方のページの上部に、次のJavaScriptコードスニペットを追加できます。
コードコピーは次のとおりです。
<script type = "text/javascript">
document.domain = "emple.com";
</script>
このようにして、2つのページが同じドメインになり、以前の呼び出しは正常に実行できます。
ここで注意すべきことの1つは、ページのドキュメントプロパティは、よりトップレベルのドメイン名（第1レベルのドメイン名を除く）にのみ設定できますが、現在のドメイン名よりも深いサブドメイン名に設定できないことです。たとえば、abc.example.comのページは、ドメインをExample.comにのみ設定でき、sub.abc.example.comに設定することはできません。もちろん、最初のレベルのドメイン名comに設定することはできません。
上記の例では、2つのページがネストされた関係に属している状況について説明しています。 2つのページが開かれ、関係が開かれている場合、原則はまったく同じです。
2番目の問題を解決しましょう。AJAXリクエストをさまざまなサブドメインに送信する方法。
通常、次のコードを使用して、xmlhttprequestオブジェクトを作成します。
コードコピーは次のとおりです。
工場= [
function（）{new xmlhttprequest（）; }、
function（）{return new ActiveXObject（ "msxml2.xmlhttp"）; }、
function（）{return new ActiveXObject（ "microsoft.xmlhttp"）; }
];
機能newRequest（）{
for（var i = 0; i <</span> factories.length; i ++）{
試す{
var Factory = Factories [i];
return Factory（）;
} catch（e）{}
}
nullを返します。
}
上記のコードは、IE6シリーズブラウザーとの互換性のためのActiveXObjectを指します。 NewRequest関数を呼び出すたびに、作成したばかりのAJAXオブジェクトを取得し、このAJAXオブジェクトを使用してHTTPリクエストを送信します。たとえば、次のコードはabc.example.comにgetリクエストを送信します。
コードコピーは次のとおりです。
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関数の定義をこのクロスドメインファイルに移動します。最後に、document.domain値を変更する以前の練習と同様に、ページの上部をCrossDomain.htmlファイルとabc.example.comドメインの下でAjaxを呼び出します。
コードコピーは次のとおりです。
<script type = "text/javascript">
document.domain = "emple.com";
</script>
クロスドメインファイルを使用するために、ABC.example.comドメインの下でajaxを呼び出すページ内のクロスドメインファイルを指す隠されたiframeを埋め込みました。
[コード]
<iframe name = "xd_iframe" style = "display：none" src = "http://def.example.com/crossdomain.html"> </iframe>
この時点で、ABC.example.comドメインとCrossDomain.htmlの下のページは両方とも同じドメイン（Example.com）にあります。 abc.example.comドメインの下のページのCrossDomain.htmlのnewRequest関数を呼び出すことができます。
コードコピーは次のとおりです。
var request = window.frames ["xd_iframe"]。newRequest（）;
この方法で取得した要求オブジェクトは、http：//def.example.comにHTTPリクエストを送信できます。
（ii）完全に異なるドメインを持つクロスドメイン技術。
たとえば、example1.comとExample2.comの間でJavaScriptを介してフロントエンドで通信したい場合など、トップレベルのドメイン名が異なる場合、必要な技術はより複雑です。
異なるドメインのクロスドメインテクノロジーを説明する前に、クロスドメインはクロスドメインの問題の特別なケースであるため、以下で説明したい技術が以前の状況にも適用できることを最初に明確にしましょう。もちろん、適切な状況下で適切な技術を使用すると、より良い効率とより高い安定性を確保できます。
要するに、さまざまなドメインのニーズに応じて、クロスドメインテクノロジーを次のカテゴリに分類できます。
1。JSONPクロスドメインゲットリクエスト
2。IFRAMEによるクロスドメインの実装
3。フラッシュクロスドメインHTTPリクエスト
4。Window.PostMessage
この記事は最初にここで終了します。上記の4つのクロスドメインテクノロジーを詳細に紹介します。後で提示します！