JSONP-Instanzanalyse in AngularJS

Konzept

Erstens sind Json und JSONP unterschiedlich. Json ist eines von vielen Datenspeicherformaten und eine der Datenschreibmethoden. Es ist wie einer der vielen Poesiestile in Großchina (z. B. Sieben-Zeichen-Poesie). Dieser Gedichtstil schreibt Folgendes vor: Dieser Gedichtstil muss den Titel, die Anzahl der Wörter pro Gedichtzeile (7 Wörter) usw. enthalten. Das Textformat. Das von Json angegebene Textformat ist wie folgt:

(Json-Formatdiagramm)

Bei JSONP handelt es sich um eine spezielle Kommunikationsmethode um die Sicherheitsbeschränkungen des Browsers für denselben Ursprung einfach zu umgehen und den Effekt zu erzielen, dass Ressourcen (Skripte, Bilder usw.) aus verschiedenen Quellen geladen werden. Zum Beispiel sind Sie der Prinz eines Königreichs und verlieben sich unerwartet in ein schönes junges Mädchen in einer nahegelegenen Kleinstadt (Ressourcen). Sie möchten sie kennenlernen und sich weiterentwickeln (Ressourcen erhalten). Ihr Vater, Mr. King (Browser), ist jedoch anderer Meinung. Der König glaubt, dass dieses Mädchen kein königliches Mädchen ist (keine Originalquelle) und des Prinzen nicht würdig ist, während er den Prinzen gefangen hält Es wurde auch außerhalb des Schlosses veröffentlicht. Es wird von vielen Soldaten überwacht und Außenstehenden ist der Zutritt verboten (die gleiche Sicherheitsbeschränkung des Browsers). Aber der Prinz blieb in seiner Liebe sehr hartnäckig. Er versuchte auf viele Arten Kontakt mit dem Mädchen aufzunehmen, indem er beispielsweise den Eunuchen Oba bat, dem schönen Mädchen einen Brief zu bringen (PUT, GET, POST usw.), aber wann immer er in der Stadt ankam Gate, , stellte der Soldat fest, dass die Adresse des Briefes für das kleine Mädchen bestimmt war, und verbot dem Eunuchen wiederholt, das Haus zu verlassen (PUT, GET und POST funktionierten bei der Beschaffung externer Ressourcen nicht). Deshalb hat sich der Prinz eine spezielle Kommunikationsmethode ausgedacht: JSONP. Die kleine Taube kann über die Burg fliegen und so die Aufsicht von Soldaten umgehen (umgeht die Sicherheitsbeschränkungen des Browsers), um mit dem Mädchen zu kommunizieren Die domänenübergreifende gemeinsame Nutzung von CORS ist implementiert! Nachdem er alle Schwierigkeiten überstanden hatte, verliebte sich der Prinz schließlich in den Eunuchen (∑(っ°Д °;)っDas Leben ist voller Überraschungen...)

Spezifische Implementierungsmethode

Um diesen Kommunikationseffekt zu erzielen, müssen sowohl der Prinz (die Methode zum Senden der Anfrage) als auch das Mädchen (der Server) vorbereitet sein.

Wenn der Prinz eine JSONP-Anfrage sendet, benötigt er zuerst eine Taube (mit Jsonp). Als nächstes benötigt er einen mit der Taube verknüpften Buchstaben (Rückrufparameter in der Adressleiste)

$http .jsonp("https://api.github.com?callback=CALLBACK").success(function(data){//...})

Als das Mädchen die kleine Taube nach dem Brief erhielt , Sie sollten auch den Inhalt des Briefes auf die kleine Taube schreiben und zurückschreiben (verwenden Sie den Callback-Parameter, um den Antwortinhalt in einen JavaScript-Parameter zu packen und ihn über die der Anfrage entsprechende Callback-Funktion aufzurufen)

Methode der Verpackungsdaten

res.send([callback function] + '('+ JSON.stringify(result) + ')');

Weitere Details

Bei Verwendung JSONP, AngularJS generiert ein <script>-Tag und fügt es in das DOM ein, um eine Anfrage zu stellen. Nach erfolgreicher Antwort wird der Knoten gelöscht (die spezifische Angular-Version zum Löschen des Knotens kann unterschiedlich sein)</script>

　Unter anderem wird CALLBACK durch eine benutzerdefinierte Funktion ersetzt, die speziell für diese Anfrage generiert wurde, nämlich

$http.jsonp("https://api.github.com?callback=CALLBACK") . ..) wird zu

Deshalb wenn wir Wenn wir den Back-End-Service von JSONP selbst entwickeln, müssen wir sicherstellen, dass die Antwortdaten in der in der Anfrage angegebenen Rückruffunktion enthalten sind.

Hinweise

Die Verwendung von JSOPN birgt potenzielle Sicherheitsrisiken, da JSONP dies zulässt Der Dienst ruft das JavaScript der Anwendung auf, was die Website angreifbar macht und möglicherweise auch die Privatsphäre der Benutzer gefährdet