Detaillierte Einführung in Front-End-Interviews mit gleicher Herkunft und domänenübergreifenden Themen

Domänenübergreifend wird durch die Same-Origin-Richtlinie des Browsers verursacht. Sie bezieht sich auf die von der Seite angeforderte URL-Adresse und muss sich in derselben Domäne wie die URL-Adresse im Browser befinden (d. h. der Domänenname). Der folgende Artikel erklärt Ihnen die relevanten Informationen zum gleichen Ursprung und zur gleichen Domäne, die für Front-End-Interviews erforderlich sind. Der Artikel stellt sie im Detail anhand von Beispielcode vor brauche es kann sich darauf beziehen.

Vorwort

Wie wir alle wissen, sind die Same-Origin-Richtlinie und die domänenübergreifenden Methoden des Browsers auch im Frontend sehr häufige Probleme In diesem Artikel habe ich mich hauptsächlich mit den gleichen Ursprungs- und domänenübergreifenden Problemen befasst, die bei Front-End-Interviews auftreten werden. Ich werde im Folgenden nicht näher darauf eingehen.

Was ist die Same-Origin-Richtlinie?

Die Same-Origin-Richtlinie wird verwendet, um einzuschränken, wie aus einer Quelle geladene Dokumente oder Skripte mit Dokumenten interagieren können oder von einer anderen Quelle geladene Skripte. Dies ist ein wichtiger Sicherheitsmechanismus zum Isolieren potenziell schädlicher Dateien.

Was ist der gleiche Ursprung?

Wenn das Protokoll, der Domänenname und der Port für zwei Seiten gleich sind, dann haben die beiden Seiten den gleichen Ursprung. Beispiel: http://www.hyuhan.com/index.html Das Protokoll dieser Website ist http, der Domänenname ist www.hyuhan.com, der Port ist 80 (Standardport) und sein Ursprung ist wie folgt:

• http://www.hyuhan.com/other.html: gleicher Ursprung

• http://hyuhan.com/other.html : unterschiedliche Herkunft (unterschiedliche Domainnamen)

• https://www.hyuhan.com/other.html: Unterschiedliche Quellen (unterschiedliche Protokolle)

• http://www.hyuhan.com:81/other.html: Verschiedene Quellen (verschiedene Ports)

Die Same-Origin-Richtlinie dient dem Schutz der Sicherheit von Benutzerinformationen. Die Haupteinschränkungen, die durch die Same-Origin-Richtlinie eingeschränkt werden, sind die folgenden Verhaltensweisen:

1. Cookie, LocalStorage und IndexDB können nicht gelesen werden

2. DOM kann nicht gelesen werden betrieben

3. AJAX-Anfrage kann nicht gesendet werden

So erstellen Sie domänenübergreifenden Zugriff

So stellen Sie domänenübergreifende AJAX-Anfragen

Es gibt drei Hauptmethoden, um die Einschränkungen der Same-Origin-Richtlinie 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 Client und Server. Verwenden Sie das domänenübergreifende Element

window.onload = function() {
    var script = document.createElement('script');
    script.src = "http://example.com/callback=test";
    document.appendChild(script);
}
function test(res) {
    console.log(res);
}

Der Callback-Parameter von src wird verwendet, um den Namen der Callback-Funktion festzulegen, die vom Backend aufgerufen werden muss Der vom Server zurückgegebene Code lautet wie folgt:

test({
    "name": "小明",
    "age": 24
    })

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

WebSocket

WebSocket ist ein neues Netzwerkprotokoll, das auf TCP basiert. Es implementiert nicht die Same-Origin-Richtlinie und ermöglicht den domänenübergreifenden Zugriff, solange der Server dies unterstützt Es. Und WebSocket ist nicht auf die Ajax-Kommunikation beschränkt, da die Ajax-Technologie erfordert, dass der Client eine Anfrage initiiert, und der WebSocket-Server und der Client können Informationen aneinander weiterleiten.

CORS

CORS ist die Abkürzung für Access-Control-Allow-Origin (Cross-Domain Resource Sharing), einem W3C-Standard. CORS muss sowohl vom Browser als auch vom Server unterstützt werden. Derzeit unterstützen grundsätzlich alle Browser diese Funktion. Die serverseitige Unterstützung für CORS erfolgt hauptsächlich durch die Festlegung von Access-Control-Allow-Origin. Wenn der Browser die entsprechenden Einstellungen erkennt, kann er den domänenübergreifenden Ajax-Zugriff ermöglichen.

document.domain

Cookie sind Informationen, die vom Server an den Browser geschrieben werden. Aus Sicherheitsgründen können nur Webseiten mit demselben Ursprung geteilt werden. Wenn jedoch die Domänennamen der ersten Ebene der beiden Webseiten identisch sind, die Domänennamen der Kopfhörer jedoch unterschiedlich sind, können Sie Cookies teilen, indem Sie document.domain festlegen.

Zum Beispiel lautet der Domänenname einer Webseite http://w1.example.com/a.html und der Domänenname einer anderen Webseite ist http://w2.example.com/b .html. Solange sie auf dieselbe document.domain eingestellt sind, können die beiden Webseiten Cookies gemeinsam nutzen.

postMessage API

Die postMessage()-Methode ermöglicht es Skripten aus verschiedenen Quellen, asynchrone Kommunikation für begrenzte Kommunikation zu verwenden und kann dokumentenübergreifend, fensterübergreifend usw. erreichen Cross-Domain-Messaging. Verwenden Sie die Funktion postMessage(), um die Nachricht zu übermitteln, und die Zielseite lauscht auf das Nachrichtenereignis des Fensters, um die Nachricht zu empfangen. Mit postMessage können wir LocalStorage-, IndexDB- und DOM-Daten domänenübergreifend lesen.

window.name

Das Browserfenster hat das Attribut window.name. Dieses Attribut legt fest, dass es unabhängig davon, ob es dieselbe Quelle hat oder nicht Befindet sich ein Fenster, wird die vorherige Webseite festgelegt. Dieses Attribut kann von der nächsten Webseite gelesen werden. Das heißt, innerhalb des Lebenszyklus eines Fensters (Fensters) teilen sich alle vom Fenster geladenen Seiten einen window.name. Jede Seite verfügt über Lese- und Schreibberechtigungen für window.name, und window.name bleibt in einem Fenster aller Seiten bestehen geladen. Offensichtlich kann dadurch ein domänenübergreifender Zugriff erreicht werden.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in Front-End-Interviews mit gleicher Herkunft und domänenübergreifenden Themen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!