Detaillierte Erklärung der Homologie und der Domänenübergreifendkeit, die für Front-End-Interviews erforderlich sind

Vorwort

Wie wir alle wissen, treten bei Front-End-Interviews auch häufig Probleme mit der Homologiestrategie und der domänenübergreifenden Methode des Browsers auf. In diesem Artikel werden hauptsächlich die bei Front-End-Interviews auftretenden Homologie- und domänenübergreifenden Probleme erläutert. Werfen wir einen Blick auf die ausführliche Einführung.

Was ist die Same Origin Policy?

Mit der Same-Origin-Policy wird eingeschränkt, wie Dokumente oder Skripte, die von einem Ursprung geladen werden, mit Ressourcen eines anderen Ursprungs interagieren können. Es handelt sich dabei um einen wichtigen Sicherheitsmechanismus zum Isolieren potenziell schädlicher Dateien.

Was ist Homologie?

Wenn Protokoll, Domänenname und Port für zwei Seiten gleich sind, stammen die beiden Seiten vom selben Ursprung. Beispielsweise hat die Website http://www.hyuhan.com/index.html das Protokoll http, den Domänennamen www.hyuhan.com und die Portnummer 80 (Standardport). Ihre Homologie ist wie folgt:

• http://www.hyuhan.com/other.html: Gleiche Quelle
• http://hyuhan.com/other.html: Andere Quelle (anderer Domänenname)
• https://www.hyuhan.com/other.html: Andere Quelle (anderes Protokoll)
• http://www.hyuhan.com:81/other.html: Andere Quelle (anderer Port)

Die Same-Origin-Policy dient dem Schutz der Sicherheit von Benutzerinformationen. Die folgenden Verhaltensweisen werden durch die Same-Origin-Policy eingeschränkt:

1. Cookies, LocalStorage und IndexDB können nicht gelesen werden
2. DOM kann nicht manipuliert werden
3. AJAX-Anfrage kann nicht gesendet werden

So führen Sie domänenübergreifenden Zugriff durch

So stellen Sie AJAX-Anfragen über Domänen hinweg

Es gibt drei Hauptmöglichkeiten, die Einschränkungen der Same-Origin-Policy zu umgehen und domänenübergreifende AJAX-Anfragen zu stellen.

JSONP

JSONP ist eine gängige Methode für die domänenübergreifende Kommunikation zwischen Clients und Servern. Verwenden Sie das domänenübergreifende <script&bt;-Element, um JSON-Daten vom Server anzufordern. Nach Erhalt der Anforderung legt der Server die Daten in eine Rückruffunktion und gibt sie zurück. Die Implementierung ist wie folgt:

fenster.onload = funktion() {
    var Skript = Dokument.createElement('Skript');
    script.src = "http://example.com/callback=test";
    document.appendChild(Skript);
}
Funktionstest (res) {
    konsole.log(res);
}

Der Callback-Parameter von src wird verwendet, um den Namen der Callback-Funktion festzulegen, die das Backend aufrufen muss. Die vom Server zurückgegebenen Daten lauten wie folgt:

prüfen({
    "Name": "Xiaoming",
    "Alter": 24
    })

Auf diese Weise kann das Frontend die Backend-Daten domänenübergreifend lesen. Allerdings kann jsopn nur Get-Anfragen stellen und keine Post-Anfragen senden.

WebSocket

WebSocket ist ein neues Netzwerkprotokoll auf TCP-Basis. Es implementiert keine Same-Origin-Policy und kann domänenübergreifenden Zugriff durchführen, sofern der Server dies unterstützt. Darüber hinaus ist WebSocket nicht auf die Kommunikation im Ajax-Modus beschränkt, da die Ajax-Technologie erfordert, dass der Client eine Anforderung initiiert, während WebSocket-Server und -Clients Informationen untereinander austauschen können.

CORS

CORS ist die Abkürzung für Access-Control-Allow-Origin (Cross-Origin Resource Sharing), ein W3C-Standard. CORS erfordert die Unterstützung sowohl vom Browser als auch vom Server. Derzeit unterstützen fast alle Browser diese Funktion. Die serverseitige Unterstützung für CORS wird hauptsächlich durch die Festlegung von Access-Control-Allow-Origin erreicht. Erkennt der Browser entsprechende Einstellungen, kann er Ajax den domänenübergreifenden Zugriff erlauben.

document.domain

Cookies sind Informationen, die vom Server an den Browser gesendet werden. Aus Sicherheitsgründen können sie nur von Webseiten mit derselben Herkunft weitergegeben werden. Wenn jedoch die Top-Level-Domänennamen der beiden Webseiten identisch sind, die Domänennamen der Kopfhörer jedoch unterschiedlich sind, können Sie Cookies durch Festlegen von document.domain teilen.

Wenn beispielsweise der Domänenname einer Webseite http://w1.example.com/a.html und der Domänenname einer anderen Webseite http://w2.example.com/b.html ist, können diese beiden Webseiten Cookies gemeinsam nutzen, solange sie mit derselben Dokumentdomäne festgelegt sind.

postMessage API

Mit der Methode postMessage() können Skripts aus verschiedenen Quellen in begrenztem Umfang asynchron kommunizieren, wodurch eine dokumenten-, mehrfenster- und domänenübergreifende Nachrichtenübermittlung möglich ist. Verwenden Sie die Funktion postMessage(), um Nachrichten zu übergeben, und die Zielseite überwacht das Nachrichtenereignis des Fensters, um Nachrichten zu empfangen. Mit postMessage können wir LocalStorage-, IndexDB- und DOM-Daten domänenübergreifend lesen.

Fenstername

Das Browserfenster verfügt über eine window.name-Eigenschaft, die festlegt, dass die nächste Webseite diese Eigenschaft lesen kann, wenn sie von der vorherigen Webseite festgelegt wurde, unabhängig davon, ob sie denselben Ursprung haben oder nicht. Solange sie sich im selben Fenster befinden, kann die nächste Webseite diese Eigenschaft lesen. Das heißt, während des Lebenszyklus eines Fensters teilen sich alle in das Fenster geladenen Seiten einen Fensternamen, jede Seite hat Lese- und Schreibberechtigungen für Fenstername und Fenstername bleibt auf allen in ein Fenster geladenen Seiten bestehen. Dadurch kann offensichtlich ein domänenübergreifender Zugriff erreicht werden.

Zusammenfassen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels einen gewissen Lernwert für Ihr Studium oder Ihre Arbeit hat. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen. Vielen Dank für Ihre Unterstützung von 123WORDPRESS.COM.