Zusammenfassung und Lösungen für domänenübergreifendes JavaScript

Was ist domänenübergreifend?
Aus Sicherheitsgründen erlaubt JavaScript keine domänenübergreifenden Aufrufe von Objekten auf anderen Seiten. Zusätzlich zu den Sicherheitseinschränkungen bringt es jedoch auch große Probleme mit sich, Iframe- oder Ajax-Anwendungen einzuschleusen. Hier ist eine kurze Zusammenfassung einiger domänenübergreifender Probleme:

Was ist domänenübergreifend? Ein einfaches Verständnis besteht darin, dass js aufgrund der Einschränkungen der JavaScript-Same-Origin-Richtlinie unter dem Der Domänenname a.com kann keine Objekte von b.com oder unter dem Domänennamen c.a.com betreiben. Ausführlichere Anweisungen finden Sie in der folgenden Tabelle:

URL-Beschreibung Ob Kommunikation erlaubt ist
http://www.a.com/a.js
http://www.a. com/b .js ist unter demselben Domainnamen zulässig
http://www.a.com/lab/a.js
http://www.a.com/script/b.js verschiedene Ordner unter derselbe Domainname erlaubt
http://www.a.com:8000/a.js
http://www.a.com/b.js Gleicher Domainname, unterschiedliche Ports sind nicht erlaubt
http://www.a .com/a.js
https://www.a.com/b.js Gleicher Domainname, unterschiedliche Protokolle sind nicht erlaubt
http://www.a. com/a.js
http: //70.32.92.74/b.js Domänenname und dem Domänennamen entsprechende IP sind nicht zulässig
http://www.a.com/a.js
http: //script.a.com/b.js Hauptdomäne Der gleiche Domänenname, aber unterschiedliche Subdomänen sind nicht zulässig
http://www.a.com/a.js
http://a.com/ b.js Der gleiche Domänenname, aber unterschiedliche Domänennamen der zweiten Ebene (wie oben) sind nicht zulässig (in diesem Fall ist der Zugriff auf Cookies nicht zulässig)
http://www.cnblogs.com/a.js
http://www.a.com/b.js Unterschiedliche Domänennamen sind nicht zulässig
Besonderes Beachten Sie zwei Punkte:
Erstens, wenn das domänenübergreifende Problem durch Protokolle und Ports verursacht wird, Die „Rezeption“ ist machtlos.
Zweitens: Bei domänenübergreifenden Problemen wird die Domäne nur über den „URL-Header“ identifiziert, anstatt zu ermitteln, ob die gleiche IP-Adresse zwei Domänen entspricht oder ob die beiden Domänen identisch sind auf der gleichen IP.
„URL-Header“ bezieht sich auf window.location.protocol +window.location.host, was auch als „Domänen, Protokolle und Ports müssen übereinstimmen“ verstanden werden kann.
Das Folgende ist eine kurze Zusammenfassung der allgemeinen Methode zur domänenübergreifenden Handhabung im „Front-End“. Die Back-End-Proxy-Lösung umfasst die Back-End-Konfiguration, die hier nicht erläutert wird. Sie können diesen Artikel von Yahoo lesen: „JavaScript“: Verwenden Sie einen Web-Proxy für domänenübergreifende XMLHttpRequest-Aufrufe》

Einstellung von document.domain+iframe
Für Beispiele, bei denen die Hauptdomäne dieselbe ist aber die Subdomains sind unterschiedlich, Sie können document.domain lösen. Die spezifische Methode besteht darin, document.domain = 'a.com' zu den beiden Dateien http://www.a.com/a.html bzw. http://script.a.com/b.html hinzuzufügen Ein Iframe in der Datei a.html zur Steuerung des Inhaltsdokuments des Iframes, sodass die beiden JS-Dateien „interagieren“ können. Natürlich kann diese Methode nur die Situation lösen, in der die primäre Domäne dieselbe ist, der sekundäre Domänenname jedoch unterschiedlich ist. Wenn Sie aus heiterem Himmel den Domänennamen von script.a.com auf alibaba.com setzen, tritt offensichtlich ein Fehler auf gemeldet! Der Code lautet wie folgt:

a.html auf www.a.com

document.domain = 'a.com';
var ifr = document.createElement('iframe' );
ifr.src = 'http://script.a.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentWindow.document;
// Manipulieren Sie b.html hier
warning(doc.getElementsByTagName("h1" ) [0].childNodes[0].nodeValue);
};
b.html auf script.a.com

document.domain = 'a.com';
this Diese Methode eignet sich für jede Seite in {www.kuqin.com, kuqin.com, script.kuqin.com, css.kuqin.com}, um miteinander zu kommunizieren.

Hinweis: Die Domäne einer bestimmten Seite ist standardmäßig gleich window.location.hostname. Der Hauptdomänenname ist ein Domänenname ohne www, z. B. a.com. Der Hauptdomänenname mit einem Präfix davor ist normalerweise ein Domänenname der zweiten Ebene oder ein Domänenname mit mehreren Ebenen, z. B. www.a .com ist eigentlich ein Domainname der zweiten Ebene. Die Domäne kann nur als primärer Domänenname festgelegt werden und die Domäne kann in b.a.com nicht auf c.a.com festgelegt werden.

Probleme:
1. Sicherheit Wenn eine Site (b.a.com) angegriffen wird, verursacht eine andere Site (c.a.com) Sicherheitslücken.
2. Werden mehrere Iframes in eine Seite eingefügt, muss die gleiche Domain eingestellt werden, um alle Iframes betreiben zu können.
2. Skripte dynamisch erstellen
Obwohl der Browser standardmäßig den domänenübergreifenden Zugriff verbietet, verbietet er nicht das Verweisen auf JS-Dateien von anderen Domänen auf der Seite, und Sie können Funktionen in den eingeführten JS-Dateien (einschließlich Betriebsfunktionen) frei ausführen Cookies, Dom usw.). Auf dieser Grundlage kann durch die Erstellung von Skriptknoten problemlos eine vollständige domänenübergreifende Kommunikation erreicht werden. Spezifische Methoden finden Sie im Get Utility von YUI

Es ist sehr interessant zu beurteilen, ob der Skriptknoten geladen ist: Der IE kann nur das Attribut „readystatechange“ des Skripts verwenden, während andere Browser das Ladeereignis des Skripts verwenden. Im Folgenden finden Sie einige Methoden, um festzustellen, ob das Skript geladen ist.

js.onload = js.onreadystatechange = function() {
if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
                // Rückruf wird hier ausgeführt
        js.onload = js.onreadystatechange = null; Es kann das Problem der Schrittersetzung in vollständig domänenübergreifenden Situationen lösen. Das Prinzip besteht darin, location.hash zum Übertragen von Werten zu verwenden. In der URL: http://a.com#helloword ist „#helloworld“ location.hash. Das Ändern des Hashs führt nicht zu einer Aktualisierung der Seite, sodass der Hash-Wert natürlich zum Übertragen von Daten verwendet werden kann Die Kapazität ist begrenzt. Angenommen, die Datei cs1.html unter dem Domänennamen a.com möchte Informationen an cs2.html unter dem Domänennamen cnblogs.com übertragen. Zuerst wird cs1.html erstellt, um automatisch einen versteckten Iframe zu erstellen Zu cs2.html unter dem Domainnamen cnblogs.com kann der Hash-Wert zu diesem Zeitpunkt für die Parameterübergabe verwendet werden. Nachdem cs2.html auf die Anfrage geantwortet hat, werden die Daten übergeben, indem der Hash-Wert von cs1.html geändert wird (da sich die beiden Seiten nicht in derselben Domäne befinden, erlauben IE und Chrome keine Änderung des Werts von parent.location). Hash, also müssen wir einen.com-Proxy-Iframe unter dem Domänennamen verwenden; Firefox kann ihn ändern). Fügen Sie gleichzeitig einen Timer zu cs1.html hinzu, um festzustellen, ob sich der Wert von location.hash nach einer gewissen Zeit geändert hat. Wenn sich etwas ändert, ermitteln Sie den Hash-Wert. Der Code lautet wie folgt:

Zuerst die Datei cs1.html unter a.com:

function startRequest(){

var ifr = document.createElement('iframe') ;

ifr.style.display = 'none';

ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo';

document.body. appendChild(ifr) ;
}

function checkHash() {
try {
var data = location.hash ? location.hash.substring(1) : '';

if (console. log) {

              console.log('Now the data is. '+data);
                                                                                                                                                                                ; 🎜>cs2.html unter dem Domainnamen cnblogs.com:

//Simulate eine einfache Parameterverarbeitungsoperation
switch(location.hash){
case '#paramdo':
callBack ();
break;
case '#paramset':
// etwas tun...

break;

}

function callBack(){
try {
parent.location.hash = 'somedata';
} catch (e ) {
// Die Sicherheitsmechanismen von IE und Chrome können parent.location.hash nicht ändern,
// Daher müssen wir einen Zwischen-Proxy-Iframe in der cnblogs-Domäne .com/test/cscript/cs3.html verwenden #somedata'; // Beachten Sie, dass sich die Datei unter der Domäne „a.com“ befindet .com

//Da parent.parent und er selbst zur selben Domäne gehören, kann der Wert seines location.hash geändert werden

parent.parent.location.hash = self.hash.substring (1);
Natürlich hat dies viele Nachteile, wie z. B. die direkte Offenlegung der Daten in der URL, die begrenzte Datenkapazität und -art usw.

4 .name-Implementierung Der Artikel zur domänenübergreifenden Datenübertragung
ist zu lang, um hier gelesen zu werden. Weitere Informationen finden Sie im von window.name implementierten domänenübergreifenden Datenübertragung.

5. Verwenden Sie HTML5 postMessage
Eine der coolsten neuen Funktionen in HTML5 ist Cross Document Messaging. Die nächste Browsergeneration wird diese Funktion unterstützen: Chrome 2.0+, Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+ und Safari 4.0+. Facebook nutzt diese Funktion bereits, um webbasiertes Echtzeit-Messaging mit postMessage zu unterstützen.

otherWindow.postMessage(message, targetOrigin);
otherWindow: Ein Verweis auf das Fenster, das die Nachrichtenseite empfängt. Es kann das contentWindow-Attribut des iframes auf der Seite sein; der Rückgabewert von window.frames über den Namen oder den Index.
Nachricht: Die zu sendenden Daten, Zeichenfolgentyp.
targetOrigin: wird verwendet, um otherWindow einzuschränken, „*“ bedeutet keine Einschränkung

Code in a.com/index.html:

Code in b.com/index.html:


Referenzartikel: „Mastering HTML5 Programming " Kapitel 5 – Dokumentübergreifender Nachrichtenmechanismus, https://developer.mozilla.org/en/dom/window.postmessage

6. Flash verwenden
Dies ist die Methode, die in der IO-Komponente von zu sehen ist YUI3. Weitere Informationen finden Sie unter http://developer.yahoo.
Weitere domänenübergreifende Proxy-Dateispezifikationen finden Sie in Adobe Developer Connection: Ross-Domain-Richtliniendateispezifikationen, HTTP-Header-Blacklist