Webentwicklungs-Tutorial: domänenübergreifende Lösung – detaillierte Erläuterung

Vorwort

Dieser Artikel stellt hauptsächlich die domänenübergreifende Lösung für die Webentwicklung vor und stellt sie Ihnen zu Referenz- und Lernzwecken zur Verfügung. Werfen wir einen Blick auf die ausführliche Einführung.

Was ist Cross-Domain?

Das Konzept ist folgendes: Solange es einen Unterschied beim Protokoll, Domänennamen oder Port gibt, wird es als eine andere Domäne betrachtet.

Nachfolgend finden Sie eine detaillierte Erläuterung der spezifischen domänenübergreifenden Situation

1. document.domain domänenübergreifend

Prinzip: Für Seiten unter derselben Hauptdomäne, aber unterschiedlichen Subdomänen können Sie document.domain so einstellen, dass sie in derselben Domäne liegen

Einschränkung: Dokumente in derselben Domäne bieten Interoperabilität zwischen Seiten und müssen Iframe-Seiten laden

Seiten unter den folgenden Domänennamen können alle über document.domain domänenübergreifend interagieren: http://a.com/foo, http://bacom/bar, http://cacom/bar. Die Interoperabilität der Seiten kann allerdings nur durch die Verschachtelung von Seiten, wie zum Beispiel mit der gängigen Iframe-Methode, erreicht werden.

// URL http://a.com/foo
var ifr = document.createElement('iframe');
ifr.src = "http://bacom/bar"; 
ifr.onload = Funktion(){
    var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
    ifrdoc.getElementsById("foo").innerHTML);
};
ifr.style.display = "keine";
Dokument.Body.AnhängenUntergeordnetesElement(ifr);

Die URL des obigen Codes lautet http://a.com/foo. Sein DOM-Zugriff auf http://bacom/bar erfordert, dass letzterer document.domain eine Ebene höher einrichtet.

// URL http://bacom/bar
Dokument.Domäne = "a.com"

document.domain kann nur von einer Subdomain auf die Hauptdomain gesetzt werden. Abwärts oder auf andere Domains zu setzen ist nicht erlaubt. Der in Chrome ausgegebene Fehler lautet wie folgt

Nicht abgefangene DOMException: Die Eigenschaft „Domäne“ für „Dokument“ konnte nicht festgelegt werden: „baidu.com“ ist kein Suffix von „bacom“.

2. Tags mit src

Prinzip: Alle HTML-Tags mit src-Attributen können domänenübergreifend sein, einschließlich <img>, <script>

Einschränkung: Es muss ein DOM-Objekt erstellt werden, kann nur für die GET-Methode verwendet werden

Fügen Sie in document.body einen HTML-Tag mit einem src-Attribut an. Auf die URL, auf die der src-Attributwert verweist, wird mit der GET-Methode zugegriffen. Dieser Zugriff erfolgt domänenübergreifend.

Tatsächlich kann das <link>-Tag des Stylesheets auch domänenübergreifend sein. Solange ein src- oder href-HTML-Tag vorhanden ist, kann es domänenübergreifend sein.

Verschiedene HTML-Tags senden HTTP-Anfragen zu unterschiedlichen Zeiten. Beispielsweise sendet <img> eine Anfrage, wenn das src-Attribut geändert wird, während script, iframe, link[rel=stylesheet] HTTP-Anfragen erst senden, nachdem sie zum DOM-Baum hinzugefügt wurden:

var img = neues Bild();
img.src = 'http://some/picture'; // HTTP-Anfrage senden var ifr = $('<iframe>', {src: 'http://bacom/bar'});
$('body').append(ifr); // HTTP-Anfrage senden

JSONP

Prinzip: <script> kann domänenübergreifend sein, und die Funktion des aktuellen Skripts kann im domänenübergreifenden Skript direkt zurückgerufen werden

Einschränkung: Es muss ein DOM-Objekt erstellt und zum DOM-Baum hinzugefügt werden, kann nur für die GET-Methode verwendet werden

JSONP verwendet die Cross-Domain-Funktion von <script>. Das von der Cross-Domain-URL zurückgegebene Skript enthält nicht nur Daten, sondern auch einen Rückruf

// URL: http://bacom/foo
var Daten = {
    foo: "Leiste",
    Balken: 'foo'
};
Rückruf (Daten);

Dann können wir auf unserer Hauptseite http://a.com die Daten von http://bacom domänenübergreifend wie folgt abrufen:

// URL: http://a.com/foo
var Rückruf = Funktion (Daten) {
    // Verarbeiten Sie die aus der domänenübergreifenden Anfrage erhaltenen Daten};
var script = $('<script>', {src: 'http://bacom/bar'});
$('body').anhängen(Skript);

Tatsächlich hat jQuery die Verwendung von JSONP bereits gekapselt. Wir können dies tun

$.getJSON( "http://bacom/bar?callback=callback", Funktion( Daten ){
    // Verarbeiten Sie die aus der domänenübergreifenden Anforderung erhaltenen Daten });

Der Unterschied zwischen $.getJSON und $.get besteht darin, dass ersteres den Antworttext in JSON konvertiert. Wenn die URL einen Rückrufparameter hat, interpretiert jQuery ihn als JSONP-Anfrage und erstellt ein <script>-Tag, um die Anfrage abzuschließen.

4. Navigationsobjekt

Prinzip: iframes teilen sich das Navigator-Objekt und verwenden es zur Informationsweitergabe

Anforderungen: IE6/7

Einigen Leuten ist ein Fehler in IE6/7 aufgefallen: Das window.navigator -Objekt wird zwischen Iframes gemeinsam genutzt. Wir können es als Messenger zur Informationsweitergabe nutzen. Beispielsweise ein einfacher Delegierter:

// a.com
navigation.onData(){
    //Funktion zur Verarbeitung des Dateneingangs}
Typ der Navigation.getData === 'Funktion' 
    || navigation.getData()

// b.com
navigation.getData = function(){
    $.get('/Pfad/unter/b.com')
        .Erfolg(Funktion(Daten){
            Typ der Navigation.onData === 'Funktion'
                || navigation.onData(Daten)
        });
}

Ähnlich wie document.navigator wird auch window.name von allen Seiten im aktuellen Fenster gemeinsam genutzt. Es kann auch zur Übermittlung von Informationen verwendet werden. Eine andere, ebenso schmerzhafte Methode ist die Übergabe eines Hashs (manche Leute nennen es einen Anker). Dies liegt daran, dass jedes Mal, wenn ein Browser eine URL öffnet, der Teil #xxx nach der URL beibehalten wird, sodass die neue Seite von hier aus die Daten der vorherigen Seite abrufen kann.

5. Cross-Origin-Ressourcenfreigabe (CORS)

Prinzip: Nachdem der Server den Access-Control-Allow-Origin-HTTP-Antwortheader festgelegt hat, lässt der Browser domänenübergreifende Anforderungen zu

Einschränkungen: Der Browser muss HTML5 unterstützen und Methoden wie POST und PUT unterstützen

Die oben genannten Cross-Domain-Methoden sind in gewisser Weise alle Hacks. Der im HTML5-Standard vorgeschlagene Cross Origin Resource Share (CORS) ist der richtige Weg. Es unterstützt andere HTTP-Methoden wie PUT, POST usw., die das domänenübergreifende Problem im Wesentlichen lösen können.

Möchten Sie beispielsweise auf http://b.com auf Daten von http://a.com zugreifen, meldet Chrome aufgrund domänenübergreifender Anfragen in der Regel einen Fehler.

XMLHttpRequest kann http://b.com nicht laden. Auf der angeforderten Ressource ist kein Header „Access-Control-Allow-Origin“ vorhanden. Dem Ursprung „http://a.com“ ist daher der Zugriff nicht gestattet.

Der Grund für den Fehler liegt darin, dass für die angeforderte Ressource Access-Control-Allow-Origin nicht festgelegt ist. Daher müssen wir nur dieses Antwortheaderfeld im b.com-Server festlegen.

Access-Control-Allow-Origin: * # Erlaube allen Domänennamen den Zugriff, oder Access-Control-Allow-Origin: http://a.com # Erlaube nur allen Domänennamen den Zugriff

6. Fenster.PostMessage

Prinzip: HTML5 ermöglicht das Versenden von Nachrichten zwischen Fenstern

Einschränkung: Der Browser muss HTML5 unterstützen und den Fenster-Handle abrufen, bevor er miteinander kommunizieren kann.

Dies ist eine sichere Methode der domänenübergreifenden Kommunikation. postMessage(message,targetOrigin) ist ebenfalls eine von HTML5 eingeführte Funktion. Sie können Nachrichten an jedes beliebige Fenster senden, unabhängig davon, ob sie denselben Ursprung haben oder nicht. Der zweite Parameter kann * sein, wenn Sie jedoch eine URL festlegen und diese nicht übereinstimmt, wird das Ereignis nicht ausgelöst. Sehen wir uns eine gängige Verwendung an.

// URL: http://a.com/foo
var win = window.open('http://b.com/bar');
win.postMessage('Hallo, Bar!', 'http://b.com');

// URL: http://b.com/bar
window.addEventListener('Nachricht',Funktion(Ereignis) {
    konsole.log(ereignis.daten);
});

7. Diskussion zur Zugriffskontrollsicherheit

Vor HTML5 war JSONP der De-facto-Standard für domänenübergreifende Zusammenarbeit und wurde sogar von jQuery unterstützt. Es ist anzumerken, dass es sich lediglich um einen Hack handelt und keine zusätzlichen Sicherheitsprobleme verursacht. Da JSONP zum erfolgreichen Abrufen von Daten die Zusammenarbeit mit dem Server benötigt, auf dem sich die domänenübergreifende Ressource befindet, muss der Server, auf dem sich die Ressource befindet, beispielsweise freiwillig eine geeignete Funktion zurückrufen, damit der Server weiterhin den domänenübergreifenden Zugriff auf Ressourcen steuern kann.

Die richtige Vorgehensweise zum domänenübergreifenden Arbeiten besteht in der Verwendung des CORS-Headerfelds und der von HTML5 bereitgestellten window.postMessage , die HTTP-Methoden wie POST und PUT unterstützen können, um das domänenübergreifende Problem aus Sicht des Mechanismus zu lösen. Es ist zu beachten, dass das Header-Feld Access-Control-Allow-Origin vom Server festgelegt wird, auf dem sich die Ressource befindet. Die Verantwortung für die Zugriffskontrolle liegt weiterhin beim Server, der die Ressource bereitstellt, was dasselbe ist wie bei JSONP.

Zusammenfassen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels Ihnen bei Ihrem Studium oder Ihrer Arbeit helfen kann. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen. Vielen Dank für Ihre Unterstützung von 123WORDPRESS.COM.