Detaillierte Analyse von Homologie und Domänenübergreifendkeit, JSONP (Funktionskapselung), CORS-Prinzip

Same-Origin-Richtlinie

Ajax-Anforderungslimits:

Ajax kann Anfragen nur an den eigenen Server senden

Die Same-Origin-Policy ist eine Sicherheitsfunktion des Browsers. Client-Skripte unterschiedlicher Herkunft können ohne ausdrückliche Autorisierung nicht die Ressourcen des jeweils anderen lesen oder schreiben.

Beispielsweise gibt es eine Website A und eine Website B. Die HTML-Datei auf Website A kann nur Ajax-Anfragen an den Server von Website A senden.

Die HTML-Datei auf Website B sendet nur Ajax-Anfragen an Website B, aber Website A kann keine Ajax-Anfragen an Website B senden.

Ebenso kann Website B keine Ajax-Anfragen an Website A senden.

Homolog:

Wenn zwei Seiten dasselbe Protokoll, denselben Domänennamen und denselben Port haben, gehören die beiden Seiten zur selben Quelle. Wenn nur eine davon unterschiedlich ist, stammen sie aus unterschiedlichen Quellen.

http://www.example.com/dir/page.html

• http://www.example.com/dir2/other.html: Gleicher Ursprung
• http://example.com/dir/other.html: anderer Ursprung (anderer Domänenname)
• http://v2.www.example.com/dir/other.html: anderer Ursprung (anderer Domänenname)
• http://www.example.com:81/dir/other.html: andere Quelle (anderer Port)
• https://www.example.com/dir/page.html: Anderer Ursprung (anderes Protokoll)

Zweck der Same Origin Policy:

• Die Same-Origin-Policy soll die Sicherheit von Benutzerinformationen gewährleisten und verhindern, dass böswillige Websites Daten stehlen. Die ursprüngliche Same-Origin-Policy bedeutet, dass auf die von Website A auf dem Client gesetzten Cookies von Website B nicht zugegriffen werden kann.
• Mit der Entwicklung des Internets ist die Same-Origin-Policy immer strenger geworden. Bei unterschiedlichen Quellen besteht eine der Vorschriften darin, dass Ajax-Anfragen nicht an Adressen gesendet werden können, die nicht denselben Ursprung haben. Wenn eine Anfrage gestellt wird, meldet der Browser einen Fehler.

Nicht durch die Same-Origin-Policy eingeschränkt:

Links, Weiterleitungen und Formularübermittlungen auf Seiten unterliegen nicht der Same-Origin-Policy und die Einführung domänenübergreifender Ressourcen ist zulässig. Aber js kann den geladenen Inhalt nicht lesen und schreiben. Wie <script src="..."></script> , <img> , <link> , <iframe> , usw. in die Seite eingebettet

Domänenübergreifende Probleme

Domänenübergreifend: Solange es einen Unterschied im Protokoll, Domänennamen oder der Portnummer gibt, handelt es sich um domänenübergreifendes

Domänenübergreifende Gründe:

Das Cross-Domain-Problem rührt von der Same-Origin-Policy von JavaScript her. Dies bedeutet, dass gegenseitiger Zugriff nur erlaubt ist, wenn Protokoll + Hostname + Portnummer (sofern vorhanden) identisch sind.

Um zu verhindern, dass die Schnittstelle unter einem bestimmten Domänennamen unzulässig von Webseiten unter anderen Domänennamen aufgerufen wird, legt der Browser Sicherheitsbeschränkungen für JavaScript fest.

Das heißt, JavaScript kann nur auf Ressourcen in seiner eigenen Domäne zugreifen und diese betreiben, nicht aber auf Ressourcen in anderen Domänen.

Das Cross-Domain-Problem ist für JS und Ajax, HTML selbst hat keine domänenübergreifenden Probleme.

Beispielsweise ein Tag, ein Skript-Tag und sogar ein Formular-Tag (das Daten direkt über Domänen hinweg senden und empfangen kann) usw.

Lösen Sie domänenübergreifende Probleme:

JSONP : Mithilfe der domänenübergreifenden Funktion des Skript-Tags kann die Funktion des aktuellen Skripts direkt im domänenübergreifenden Skript zurückgerufen werden.

CORS : Der Server setzt den Wert Access-Control-Allow-Origin im HTTP-Antwortheader, um domänenübergreifende Einschränkungen zu entfernen. Hinweis: Beide dieser domänenübergreifenden Lösungen weisen einen schwerwiegenden Fehler auf und sind in hohem Maße auf Backend-Unterstützung angewiesen.

Reverse Proxy Proxy: Eine domänenübergreifende Lösung, die vom Frontend eigenständig gelöst werden kann:

Bezieht sich auf die Verwendung eines Proxyservers zum Akzeptieren von Verbindungsanforderungen im Internet.

Die Anfrage wird dann an einen Server im internen Netzwerk weitergeleitet.

Und geben Sie die vom Server erhaltenen Ergebnisse an den Client zurück, der die Verbindung im Internet anfordert.

An diesem Punkt erscheint der Proxyserver der Außenwelt als Reverse-Proxyserver.

JSONP

Gelöst mit JSONP

jsonp ist eine Abkürzung für JSON mit Padding. Es gehört nicht zu Ajax-Anfragen, kann aber Ajax-Anfragen simulieren.

JSONP besteht aus zwei Teilen: Rückruffunktion und Daten

• Die Rückruffunktion ist die Funktion, die auf der Seite aufgerufen werden soll, wenn die Antwort eintrifft. Der Name der Callback-Funktion wird üblicherweise in der Anfrage angegeben.
• Daten sind die JSON-Daten, die an die Rückruffunktion übergeben werden.

Lösung:

Einfaches Verständnis: Auf der Serverseite werden die JSON-Daten als Funktionsparameter verwendet, in die Funktion eingefügt und die Funktion wird auf dem Client aufgerufen, um die Daten zu verarbeiten

Das Prinzip von JSONP zur Implementierung domänenübergreifender Anforderungen besteht einfach darin, dynamisch ein <script> -Tag zu erstellen und dann die Quelle von <script> zu verwenden, um Daten domänenübergreifend abzurufen, ohne durch die Same-Origin-Policy eingeschränkt zu sein.

Vor- und Nachteile von JSONP:

Vorteil:

Im Gegensatz zu Ajax-Anfragen, die durch das XMLHttpRequest-Objekt implementiert werden und durch die Same-Origin-Policy eingeschränkt sind, weist es eine bessere Kompatibilität auf und kann in älteren Browsern ausgeführt werden.

Es erfordert keine XMLHttpRequest- oder ActiveX-Unterstützung und kann das Ergebnis durch Aufrufen eines Rückrufs zurückgeben, nachdem die Anforderung abgeschlossen ist.

Mangel:

Es werden nur GET-Anfragen unterstützt, andere Arten von HTTP-Anfragen wie POST werden jedoch nicht unterstützt. Es werden nur domänenübergreifende HTTP-Anfragen unterstützt.

Es löst nicht das Problem, wie JavaScript-Aufrufe zwischen zwei Seiten auf verschiedenen Domänen durchgeführt werden können.

JSONP-Codeoptimierung:

Der Client muss den Funktionsnamen an den Server weitergeben

Wandeln Sie Skriptanforderungen in dynamische Anforderungen um

Kapseln Sie die JSONP-Funktion, um das Senden von Anfragen zu erleichtern

Serverseitige Codeoptimierung – res.jsonp-Methode

JSONP-Funktionskapselung:

Funktion jsonp (Optionen) {
    // Skript-Tag dynamisch erstellen var script = document.createElement('script');
    // Variable zum Verketten von Zeichenketten var params = '';
    für (var attr in options.data) {
        Parameter += '&' + attr + '=' + Optionen.Daten[attr];
    }
    //myJsonp0124741
    var fnName = 'myJsonp' + Math.random().toString().replace('.', '');
    // Machen Sie es zu einer globalen Funktion window[fnName] = options.success;
    // src-Attribut zum Skript-Tag hinzufügen script.src = options.url + '?callback=' + fnName + params;
    // Füge das Skript-Tag an die Seite an. document.body.appendChild(script);
    // Onload-Ereignis zum Skript-Tag hinzufügen script.onload = function () {
        document.body.removeChild(Skript);
    }
}

verwenden:

// Schaltfläche abrufen var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
// Füge der Schaltfläche ein Klickereignis hinzu btn1.onclick = function () {
    jsonp({
        // URL der Anforderungsadresse: 'http://localhost:3001/better',
        Daten: {
            Name: 'lisi',
            Alter: 30
        },
        Erfolg: Funktion (Daten) {
            konsole.log(123)
            console.log(Daten)
        }
    })
}
btn2.onclick = Funktion () {
    jsonp({
        // URL der Anforderungsadresse: 'http://localhost:3001/better',
        Erfolg: Funktion (Daten) {
            Konsole.log(456789)
            console.log(Daten)
        }
    })
}

CORS

Lösen mit CORS

CORS: Der vollständige Name lautet „Cross-Origin Resource Sharing“, wodurch Browser Ajax-Anfragen an domänenübergreifende Server senden können. Dadurch wird die Einschränkung umgangen, dass Ajax nur mit demselben Ursprung verwendet werden kann.

//Legen Sie die Antwortheaderinformationen des Servers fest, um domänenübergreifende Funktionalität zu erreichen res.setHeader("Access-Control-Allow-Origin", "*"); /* Das Sternchen zeigt an, dass alle Domänen akzeptabel sind, */

Domänenübergreifende Implementierung im Express-Framework:

Installieren Sie das Cross-Domain-Modul: Syntax: npm install cors

Importieren Sie das cors-Modul in die Datei app.js: var cors = require('cors')

Verwenden Sie das Cross-Domain-Modul (in der Datei app.js): app.use(cors())

Oben finden Sie eine detaillierte Analyse der Prinzipien Same-Origin und Cross-Domain, JSONP (Funktionskapselung) und CORS. Weitere Informationen zu Same-Origin und Cross-Domain, JSONP (Funktionskapselung) und CORS finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!