Heim > Artikel > Web-Frontend > Detaillierte Einführung in domänenübergreifendes Javascript-Wissen

Detaillierte Einführung in domänenübergreifendes Javascript-Wissen

高洛峰Original: 2016-12-08 13:58:351341Durchsuche

JS-übergreifende Wissenszusammenfassung:

Bevor das Wort „domänenübergreifend“ häufig auftauchte, hatten wir es tatsächlich häufig verwendet. Beispielsweise verweist src im Bild von Website A auf eine bestimmte Bildadresse von Website B. Es besteht kein Zweifel, dass diese unter normalen Umständen normal angezeigt werden kann (unabhängig von der Anti-Hotlink-Technologie). des Skript-Tags kann auf Skriptressourcen anderer Websites verwiesen werden (in einigen Fällen wird dies sogar empfohlen, um die Auslastung anderer Websites voll auszunutzen und die Parallelität Ihres eigenen Servers zu verringern). Wenn Sie jedoch js verwenden, um aktiv Daten von anderen Websites wie Ajax anzufordern, treten frustrierende domänenübergreifende Probleme auf, die wir normalerweise als domänenübergreifend bezeichnen. Aus Sicherheitsgründen ist der domänenübergreifende Zugriff in den gängigen Browsern standardmäßig verboten. Dies beinhaltet das Konzept der Same-Origin-Richtlinie: Die Same-Origin-Richtlinie verhindert, dass aus einer Domäne geladene Skripts Dokumentattribute in einer anderen Domäne abrufen oder manipulieren. Das heißt, die Domäne der angeforderten URL muss mit der Domäne der aktuellen Webseite übereinstimmen. Das bedeutet, dass der Browser Inhalte aus verschiedenen Quellen isoliert, um Vorgänge zwischen ihnen zu verhindern.

Der Blogger hat sich nicht näher mit den spezifischen Sicherheitsproblemen befasst, die durch domänenübergreifende Probleme entstehen, sodass sich jeder seine eigene Meinung bilden kann.

In vielen Fällen, insbesondere heute, da sich das Internet weiterentwickelt, müssen wir Frontend-Schnittstellen von verschiedenen Partnern oder Datenanbietern anfordern, bevor die domänenübergreifende Zugriffsmethode standardisiert wurde (clientseitiger Cross -domain Der Zugriffsbedarf scheint die Aufmerksamkeit von w3c auf sich gezogen zu haben. Den Informationen zufolge unterstützt der HTML5-WebSocket-Standard den domänenübergreifenden Datenaustausch und sollte in Zukunft eine optionale Lösung für den domänenübergreifenden Datenaustausch sein Wie kann man seine Beschränkungen umgehen? Es gibt viele Antworten (obwohl sie alle problematisch sind), und die am häufigsten verwendete ist die sogenannte domänenübergreifende JSONP-Methode.

JSONP-Prinzip

Das grundlegendste Prinzip von JSONP besteht darin, ein 3f1c4e4b6b16bbbd69b2ee476dc4f83a dynamisch hinzuzufügen, und das src-Attribut des script-Tags unterliegt keinen domänenübergreifenden Einschränkungen. Auf diese Weise hat diese domänenübergreifende Methode nichts mit dem Ajax-XmlHttpRequest-Protokoll zu tun.

JSONP ist JSON mit Padding. Aufgrund der Einschränkungen der Same-Origin-Richtlinie darf XmlHttpRequest nur Ressourcen von der aktuellen Quelle (Domänenname, Protokoll, Port) anfordern. Wenn wir eine domänenübergreifende Anfrage stellen möchten, können wir mithilfe des HTML-Skript-Tags eine domänenübergreifende Anfrage stellen und den auszuführenden Skriptcode in der Antwort zurückgeben. Diese domänenübergreifende Kommunikationsmethode heißt JSONP.

Nehmen wir ein einfaches Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>Test Jsonp</title>
  <script type="text/javascript">
      function jsonpCallback(result)
      {
      alert(result.msg);
      }
    </script>
  <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>
</head>
<body>
</body>
</html>

Beschreiben Sie kurz das Prinzip und den Ablauf: Registrieren Sie zuerst einen Rückruf am Client und dann Geben Sie den Rückruf ein. Der Name wird an den Server übergeben (hier vereinbaren Client und Server, den Schlüssel als Abfragezeichenfolgenwert von JSONP zu übergeben). Zu diesem Zeitpunkt generiert der Server zunächst JSON-Daten. Verwenden Sie dann die Javascript-Syntax, um eine Funktion zu generieren. Der Funktionsname ist der übergebene Parameter jsonp. Schließlich werden die JSON-Daten direkt als Parameter in die Funktion eingefügt, wodurch ein JS-Syntaxdokument generiert und an den Client zurückgegeben wird. Der Client-Browser analysiert das Skript-Tag und führt das zurückgegebene Javascript-Dokument aus, d. h. die vordefinierte Rückruffunktion wird ausgeführt.

Aus der obigen Kurzbeschreibung lässt sich ableiten: Zusätzlich zur Rückgabe von JS-Codefragmenten in Form von Funktionen kann der Server natürlich alle ausführbaren JS-Fragmente zurückgeben, die den Spezifikationen entsprechen.

Die Nachteile von JSONP sind: Es unterstützt nur GET-Anfragen und keine anderen Arten von HTTP-Anfragen wie POST; es unterstützt nur domänenübergreifende HTTP-Anfragen und kann das Problem, wie zwischen zwei Seiten auf unterschiedliche Weise vorgegangen werden soll, nicht lösen Domänen. JavaScript-Aufrufproblem. (Auch unten)

jQuery's Jsonp

Wie bereits erwähnt, ist jsonp keine Ajax-Anfrage, aber jQuery bietet dennoch eine Möglichkeit, domänenübergreifende Anfragen konsistent mit jQuery.ajax zu machen:

$.ajax({
  url: &#39;http://crossdomain.com/jsonServerResponse&#39;,
  type: &#39;GET&#39;,
  dataType: &#39;jsonp&#39;,
  jsonp: "callback",
  jsonpCallback: &#39;functionName&#39;,
  success: function (data, textStatus, jqXHR) { }
  //……
});

Wie oben gezeigt, wird dataType auf jsonp gesetzt, um anzuzeigen, dass es sich um eine domänenübergreifende Anfrage handelt, jsonp wird auf den Abfragezeichenfolgenschlüssel der Übertragungsfunktion gesetzt Der vom Server geplante Name und jsonpCallback ist der js-Funktionsname. Wenn jsonpCallback nicht festgelegt ist, generiert jQuery automatisch einen zufälligen Funktionsnamen (lädt eine globale Funktion in das Fensterobjekt, die Funktion wird ausgeführt, wenn der Code eingefügt wird). wird nach der Ausführung entfernt), Sie können daraus schließen, dass die automatisch generierte Funktion die Erfolgsfunktion im obigen Code zurückruft. (Wenn ich jsonpCallback manuell einen Wert zuweise, frage ich mich, ob die Erfolgsfunktion zurückruft oder ob jQuery nach einer vordefinierten Funktion sucht und einen Fehler meldet, wenn sie nicht gefunden wird? Der Blogger ist faul und wird es später noch einmal versuchen.) Natürlich stellt uns jQuery eine einfache Version, $.getJSON, zur Verfügung, die hier nicht beschrieben wird.

Zu beachten ist der jqXHR-Parameter in der Erfolgsfunktion. Bei einer Ajax-Anfrage handelt es sich um ein authentisches jqXHR-Objekt, das auch als XMLHTTPRequest-Objekt betrachtet werden kann. Dies ist jedoch nicht der Fall Dies ist bei JSONP-Anfragen nahezu unmöglich. Es bringt uns die nützlichsten Informationen in XMLHTTPRequest: Es fehlen die Anforderungsstatusinformationen von XMLHTTPRequest, sodass die meisten Rückruffunktionen wie Fehler, Abschluss usw. nicht ausgelöst werden können. (jQuery1.9.0) , kann aber durch die Erfolgsfunktion des Rückrufs abgeleitet werden. Es sollte durch das Ladeereignis des Skript-Tags ausgelöst werden, was sich völlig vom Mechanismus von Ajax unterscheidet, der auf dem Status von XMLHTTPRequest basiert. Nach dem Testen wurde festgestellt, dass Zepto (v1.1.3), das aus jQuery hervorgegangen ist, einen Fehler in der JSONP-Anfrage aufweist. Wenn der Header beispielsweise beim Laden eines JS-Dokuments einen Fehler 401 zurückgibt, lautet die Fehlerfunktion ausgeführt, aber der jqXHR-Parameter dieser Funktion ist auch kein authentischer jqXHR-Typ, wir können nicht einmal die Antwort-Header-Informationen abrufen. In diesem Fall wird uns nur mitgeteilt, dass in einem bestimmten Link etwas schief gelaufen ist Ich kenne die spezifischen Fehlerinformationen nicht. Ähnlich wie in dem Szenario, in dem der Antwortheader nützliche Informationen enthält, empfehlen Blogger die Verwendung von JSONP nicht. Man kann sagen, dass eine Voraussetzung für die Verwendung von JSONP Folgendes ist: Zusätzlich zu nicht geschäftlichen Ausnahmen wie Netzwerkanomalien sind alle geschäftlichen Ausnahmen (zusammenfassend) (sind vom Server empfangene Anfragen) Alle Ausnahmen, die während des Antwortzeitraums ausgelöst werden) müssen in Form von Anfrageergebnissen direkt an den Client zurückgegeben werden, um die Analyse des Client-Rückrufs zu erleichtern.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Nativer JS-Code erzielt einen BildvergrößerungseffektNächster Artikel：Nativer JS-Code erzielt einen Bildvergrößerungseffekt

In Verbindung stehende Artikel

Mehr sehen