Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der domänenübergreifenden JS-Probleme_Grundkenntnisse

Detaillierte Erläuterung der domänenübergreifenden JS-Probleme_Grundkenntnisse

WBOY
WBOYOriginal
2016-05-16 16:30:281288Durchsuche

JavaScript ist eine dynamische Front-End-Scripting-Technologie, die häufig in der Webentwicklung verwendet wird. In JavaScript gibt es eine sehr wichtige Sicherheitsbeschränkung namens „Same-Origin Policy“. Diese Richtlinie legt wichtige Einschränkungen für den Seiteninhalt fest, auf den JavaScript-Code zugreifen kann, d. h. JavaScript kann nur auf Inhalte in derselben Domäne zugreifen wie das Dokument, das ihn enthält.

Die JavaScript-Sicherheitsstrategie ist besonders wichtig, wenn Sie Multi-Iframe- oder Multi-Window-Programmierung sowie Ajax-Programmierung durchführen. Gemäß dieser Richtlinie kann JavaScript-Code, der in Seiten unter baidu.com enthalten ist, nicht auf Seiteninhalte unter dem Domainnamen google.com zugreifen. Auch Seiten zwischen verschiedenen Subdomains können nicht über JavaScript-Code aufeinander zugreifen. Die Auswirkung auf Ajax besteht darin, dass über XMLHttpRequest implementierte Ajax-Anfragen keine Anfragen an verschiedene Domänen senden können. Beispielsweise können Seiten unter abc.example.com keine Ajax-Anfragen an def.example.com usw. senden.

Bei einer detaillierten Front-End-Programmierung sind jedoch zwangsläufig domänenübergreifende Vorgänge erforderlich. Derzeit scheint die „Same-Origin-Politik“ zu streng zu sein. In diesem Artikel werden einige für die domänenübergreifende Nutzung erforderliche Technologien zu diesem Thema zusammengefasst.

Als nächstes werden wir die domänenübergreifende Technologie in zwei Situationen diskutieren: Zuerst werden wir die domänenübergreifende Technologie in verschiedenen Unterdomänen diskutieren, und dann werden wir die domänenübergreifende Technologie in völlig unterschiedlichen Domänen diskutieren.

(1) Domänenübergreifende Technologien in verschiedenen Subdomänen.
Wir werden zwei Fragen separat diskutieren: Die erste Frage ist, wie man JavaScript-Aufrufe über verschiedene Subdomains hinweg durchführt; die zweite Frage ist, wie man Ajax-Anfragen an verschiedene Subdomains sendet.

Lösen wir zunächst das erste Problem. Angenommen, es gibt zwei verschiedene Subdomains unter der Domain example.com: abc.example.com und def.example.com. Nehmen wir nun an, dass es unter def.example.com eine Seite gibt, die eine JavaScript-Funktion definiert:

Code kopieren Der Code lautet wie folgt:

Funktion funcInDef() {
.....
}

Wir möchten die obige Funktion auf einer Seite unter abc.example.com aufrufen. Angenommen, die Seite unter abc.example.com, die wir besprechen werden, ist in Form eines Iframes in die Seite unter def.example.com eingebettet. In diesem Fall können wir versuchen, den folgenden Aufruf im Iframe durchzuführen:

Code kopieren Der Code lautet wie folgt:

window.top.funcInDef();

Okay, wir haben festgestellt, dass dieser Aufruf durch die zuvor erwähnte „Same-Origin-Richtlinie“ verboten ist und die JavaScript-Engine direkt eine Ausnahme auslöst.

Um den obigen Aufruf zu implementieren, können wir dies tun, indem wir die Domänenattribute der beiden Seiten ändern. Beispielsweise können wir oben auf den beiden Seiten abc.example.com und def.example.com die folgenden JavaScript-Codeausschnitte hinzufügen:

Code kopieren Der Code lautet wie folgt:


Auf diese Weise werden die beiden Seiten zur gleichen Domäne und der vorherige Aufruf kann normal ausgeführt werden.

Hierbei ist zu beachten, dass das document.domain-Attribut einer Seite nur auf einen Domänennamen einer höheren Ebene (mit Ausnahme des Domänennamens der ersten Ebene) festgelegt werden kann, nicht jedoch auf eine Subdomäne, die tiefer als die liegt aktueller Domainname. Beispielsweise kann die Domäne der Seite abc.example.com nur auf example.com und nicht auf sub.abc.example.com festgelegt werden, und natürlich kann sie nicht auf den Domänennamen der ersten Ebene „com“ festgelegt werden.

Das obige Beispiel beschreibt den Fall, in dem zwei Seiten zu einer verschachtelten Iframe-Beziehung gehören. Wenn die beiden Seiten eine offene und eine geöffnete Beziehung haben, ist das Prinzip genau das gleiche.

Jetzt lösen wir das zweite Problem: Wie sendet man Ajax-Anfragen an verschiedene Subdomains?

Normalerweise verwenden wir Code ähnlich dem folgenden, um ein XMLHttpRequest-Objekt zu erstellen:

Code kopieren Der Code lautet wie folgt:

Fabriken = [
Function() { return new XMLHttpRequest(); },
Function() { return new ActiveXObject("Msxml2.XMLHTTP"); },
Function() { return new ActiveXObject("Microsoft.XMLHTTP"); }
];
Funktion newRequest() {
for(var i = 0; i <factorys.length; i ) {
         Versuchen Sie es{
          var Factory = Fabriken[i];
              Return Factory();
           } Catch(e) {}
}
Rückgabe null;
}

Der obige Code verweist aus Gründen der Kompatibilität mit Browsern der IE6-Serie auf ActiveXObject. Jedes Mal, wenn wir die Funktion newRequest aufrufen, erhalten wir ein neu erstelltes Ajax-Objekt und verwenden dieses Ajax-Objekt dann zum Senden einer HTTP-Anfrage. Der folgende Code sendet beispielsweise eine GET-Anfrage an abc.example.com:

Code kopieren Der Code lautet wie folgt:

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

Unter der Annahme, dass der obige Code in einer Seite unter dem Domainnamen abc.example.com enthalten ist, kann die GET-Anfrage ohne Probleme erfolgreich gesendet werden. Wenn wir nun jedoch eine Anfrage an def.example.com senden, tritt ein domänenübergreifendes Problem auf und die JavaScript-Engine löst eine Ausnahme aus.

Die Lösung besteht darin, eine domänenübergreifende Datei unter der Domäne def.example.com zu platzieren, vorausgesetzt, sie heißt crossdomain.html. Anschließend wird die Definition der vorherigen newRequest-Funktion in diese domänenübergreifende Datei verschoben Fügen Sie oben in der Datei „crossdomain.html“ und auf der Seite, die Ajax unter der Domäne „abc.example.com“ aufruft, Folgendes hinzu:

Code kopieren Der Code lautet wie folgt:

Um domänenübergreifende Dateien zu verwenden, betten wir einen versteckten Iframe ein, der auf domänenübergreifende Dateien in der Seite verweist, die Ajax unter der Domäne abc.example.com aufruft, zum Beispiel:
[Code]