Beispiel für eine domänenübergreifende HTML5-PostMessage-Front-End- und Front-End-Abhörmethode

Manchmal stößt man auf alberne Anforderungen, wie z. B. die einmalige Anmeldung am Front-End! Wenn Sie auf ein Bedürfnis stoßen, müssen Sie sich eine Lösung überlegen.

Hier stelle ich Ihnen eine einfache Front-End-Single-Sign-In-Lösung vor.

Was verwendet wird, ist die domänenübergreifende Informationsübertragung von PostMessage und die On-Storage-Überwachung.

Die in diesem Artikel verwendeten Wissenspunkte sind Koa-Einrichtung statischer Ressourcendienste, domänenübergreifend, PostMessage-Nutzung und Onstorage-Überwachungsspeicher

Wir verwenden hier koa2, um zwei Dienste für verschiedene Ports zu erstellen und die domänenübergreifende Situation zu simulieren, die in der realen Arbeit auftreten muss.

Es ist sehr einfach und verwendet hauptsächlich die Koa-Static-Middleware.

Es ist auch sehr einfach zu erstellen. Wenn Sie knotenbezogenes Wissen erlernen möchten, können Sie mich auf WeChat shouzi_1994 hinzufügen oder Ihre Kontaktinformationen unten im Blog hinterlassen Video und es wird detaillierte Bauschritte geben.

 // localhost:4000const Koa = require('koa'); const path = require('path')const static = require('koa-static')const app = new Koa();//Legen Sie den Pfad der statischen Ressourcen fest const staticPath = './static'app.use(static( path.join( __dirname, staticPath) )) console.log (Dienst startet auf Port 4000) app.listen(4000);// localhost:3000const Koa = require('koa'); const path = require('path') const static = require('koa-static' )const app = new Koa();//Legen Sie den Pfad der statischen Ressourcen fest const staticPath = './static'app.use(static( path.join( __dirname, staticPath) )) console.log (Dienst startet auf Port 4000) app.listen(4000);

Werfen wir zunächst einen Blick auf die postMessage-API

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow

Ein Verweis auf ein anderes Fenster, beispielsweise die contentWindow-Eigenschaft eines Iframes, das durch die Ausführung von window.open zurückgegebene Fensterobjekt oder benannte oder numerisch indizierte window.frames.

Nachricht

Daten, die an andere Fenster gesendet werden sollen. Es wird durch den strukturierten Klonalgorithmus serialisiert. Dies bedeutet, dass Sie Datenobjekte ohne Einschränkungen sicher in das Zielfenster übertragen können, ohne sie selbst zu serialisieren. [1]

targetOrigin

Geben Sie über das Ursprungsattribut des Fensters an, welche Fenster Nachrichtenereignisse empfangen können. Sein Wert kann eine Zeichenfolge (die unbegrenzt angibt) oder ein URI sein. Wenn beim Senden einer Nachricht eines der Protokolle, Hostadressen oder Ports des Zielfensters nicht mit dem von targetOrigin bereitgestellten Wert übereinstimmt, wird die Nachricht nicht gesendet, nur wenn die drei vollständig übereinstimmen, wird die Nachricht gesendet. Dieser Mechanismus wird verwendet, um zu steuern, an welche Windows-Nachrichten gesendet werden können. Wenn beispielsweise postMessage zum Übertragen eines Kennworts verwendet wird, ist dieser Parameter besonders wichtig und es muss sichergestellt werden, dass sein Wert genau mit dem Ursprungsattribut des beabsichtigten Empfängers übereinstimmt der Nachricht, die das Passwort enthält, um zu verhindern, dass Passwörter von böswilligen Dritten abgefangen werden. Wenn Sie genau wissen, an welches Fenster die Nachricht gesendet werden soll, geben Sie stattdessen immer einen targetOrigin mit einem genauen Wert an. Wenn das genaue Ziel nicht angegeben wird, führt dies dazu, dass Daten an böswillige Websites weitergegeben werden, die an den Daten interessiert sind.

Transfer optional

Es handelt sich um eine Reihe übertragbarer Objekte, die gleichzeitig mit der Nachricht zugestellt werden. Das Eigentum an diesen Objekten wird auf den Empfänger der Nachricht übertragen und der Absender behält nicht länger das Eigentum.

Ist es leicht zu verstehen, wie es funktioniert? Lassen Sie es mich auf Chinesisch erklären.

Das (übergeordnete) untergeordnete Fenster, das übertragen werden soll (übertragener Inhalt, an welche Adresse übertragen werden soll, [ob Berechtigungen übertragen werden (im Allgemeinen nicht verwendet)]);

Lassen Sie mich Ihnen im Voraus sagen, dass es sich bei der domänenübergreifenden Übertragung um eine Eltern-Kind-Seite handeln muss, dh eine Seite über js Open oder eine in iframe verschachtelte Seite.

Okay, fangen wir an, Code zu schreiben

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Document</title></head><body> <!-- postMessage und iframe lösen häufige domänenübergreifende Probleme--> Ich bin der Inhalt der Port 3000-Website <button onclick=send()>Sende eine Nachricht an meinen Sohn</button> <iframe style=display:none src=http://localhost:4000 frameborder=0></iframe ><script> function send() { window.frames[0].postMessage({a:1},http://localhost:4000); // Das Nachrichtenereignis von domänenübergreifenden Unterseiten auslösen} window.addEventListener('message', function(event) { console.info('Mein Sohn hat einen Brief geschrieben', event); }, false);</script></body></html> 

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Kompatibler Inhalt=ie=edge> <title>Dokument</title></head><body> <!-- postMessage und iframe lösen häufige domänenübergreifende Probleme--> Ich bin der Inhalt der Port 4000-Website <button onclick=send()>Sende eine Nachricht an Papa</button> <iframe style=display:none src=http://localhost:4000 frameborder=0></iframe> <script> window.addEventListener(message,function(event){ console.log(Dad schrieb:, event) },false) function send() { parent.postMessage({a:1}, 'http://localhost:3000'); // </script></body></html>

Zu diesem Zeitpunkt haben wir eine domänenübergreifende Kommunikation zwischen übergeordneten und untergeordneten Seiten implementiert, diese Kommunikation erfolgt jedoch nur innerhalb eines Fensters und erzielt nicht den gewünschten Effekt. Was soll ich tun?

An dieser Stelle muss jeder darüber nachdenken, was alle Websites mit demselben Domainnamen im Browser sehen können.

Richtig, Speicher, wir müssen das nur überwachen.

Hier entscheiden wir uns für das Anhören von localStorage und nehmen nun Verbesserungen an den Unterseiten vor

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Document</title></head><body> <!-- postMessage und iframe lösen häufige domänenübergreifende Probleme--> Ich bin der Inhalt der Port 4000-Website <button onclick=send()>Sende eine Nachricht an Papa</button> <iframe style=display:none src=http://localhost:4000 frameborder=0></iframe> <script> window.addEventListener(message,function(event){ console.log(Dad schrieb:, event) var data = JSON.stringify(event.data) window.localStorage.setItem(data,data) },false) window.onstorage(function(st){ console.log(st.key,st.value) }) function send() { parent.postMessage({a:1 }, 'http://localhost:3000'); // </script></body></html>

Sehen Sie, sind wir jetzt in der Lage, auf domänenübergreifend übertragene Inhalte zu reagieren?

Nachdem wir nun die domänenübergreifende Kommunikation zwischen zwei Seiten erreicht haben, wie führt man drei oder mehr domänenübergreifende Kommunikation durch? Tatsächlich gibt es eine Wahrheit. Nachdem ich Ihnen nun die Wahrheit gesagt habe, probieren Sie die Schreibmethode selbst aus.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.