Exemple de méthode d'écoute inter-domaines et front-end front-end html5 postMessage

Parfois, vous rencontrez des exigences stupides, telles que l’authentification unique frontale ! Lorsque vous rencontrez un besoin, vous devez penser à une solution.

Ici, je vais vous donner une solution simple de connexion unique frontale.

Ce qui est utilisé, c'est la transmission d'informations inter-domaines post-message et la surveillance du stockage.

Les points de connaissances utilisés dans cet article sont Koa, configuration des services de ressources statiques, inter-domaines, utilisation post-message, surveillance du stockage.

Nous utilisons ici koa2 pour créer deux services sur des ports différents afin de simuler la situation inter-domaines qui doit se produire dans un travail réel.

C'est très simple et utilise principalement le middleware koa-static.

Il est également très facile à construire. Si vous souhaitez acquérir des connaissances liées aux nœuds, vous pouvez m'ajouter sur WeChat shouzi_1994 ou laisser vos coordonnées sous le blog. Je n'entrerai pas dans des bêtises ici. vidéo et il y aura des étapes de construction détaillées.

 // localhost:4000const Koa = require('koa'); const path = require('path')const static = require('koa-static')const app = new Koa();//Définir le chemin des ressources statiques const staticPath = './static'app.use(static( path.join( __dirname, staticPath) )) console.log (le service démarre sur le port 4000) app.listen(4000);// localhost:3000const Koa = require('koa'); const path = require('path')const static = require('koa-static' )const app = new Koa();//Définir le chemin des ressources statiques const staticPath = './static'app.use(static( path.join( __dirname, staticPath) )) console.log (le service démarre sur le port 4000) app.listen(4000);

Jetons d'abord un coup d'œil à l'API postMessage

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

autreFenêtre

Une référence à une autre fenêtre, telle que la propriété contentWindow d'une iframe, l'objet window renvoyé par l'exécution de window.open, ou window.frames nommé ou indexé numériquement.

message

Données à envoyer vers d'autres fenêtres. Il sera sérialisé par l'algorithme de clonage structuré. Cela signifie que vous pouvez transférer en toute sécurité des objets de données vers la fenêtre cible sans aucune restriction, sans les sérialiser vous-même. [1]

cibleOrigine

Spécifiez quelles fenêtres peuvent recevoir des événements de message via l'attribut origin de la fenêtre. Sa valeur peut être une chaîne (indiquant illimité) ou un URI. Lors de l'envoi d'un message, si l'un des protocoles, adresses d'hôte ou ports de la fenêtre cible ne correspond pas à la valeur fournie par targetOrigin, le message ne sera pas envoyé uniquement si les trois correspondent complètement, le message sera envoyé ; Ce mécanisme est utilisé pour contrôler à quels messages Windows peuvent être envoyés ; par exemple, lors de l'utilisation de postMessage pour transmettre un mot de passe, ce paramètre est particulièrement important et sa valeur doit être assurée qu'elle est exactement la même que l'attribut origin du destinataire prévu. du message contenant le mot de passe pour éviter que les mots de passe ne soient interceptés par des tiers malveillants. Si vous savez exactement à quelle fenêtre le message doit être envoyé, fournissez toujours une valeur exacte pour targetOrigin. Le fait de ne pas fournir la cible exacte entraînera une fuite de données vers tout site malveillant intéressé par les données.

transfert en option

Il s'agit d'une série d'objets transférables livrés en même temps que le message. La propriété de ces objets sera transférée au destinataire du message, et l'expéditeur n'en conservera plus la propriété.

Est-il facile de comprendre comment cela fonctionne ? Laissez-moi vous l'expliquer en chinois.

La fenêtre enfant (parente) à transférer postMessage (contenu transmis, à quelle adresse transférer, [si les autorisations sont transférées (généralement non utilisées)]) ;

Laissez-moi vous dire à l'avance que si vous souhaitez effectuer un transfert entre domaines, il doit s'agir d'une page parent-enfant, c'est-à-dire une page via js Open ou une page imbriquée dans iframe.

Ok, commençons à écrire du code

 <!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 et iframe résolvent des problèmes inter-domaines courants--> Je suis le contenu du site du port 3000 <button onclick=send()>Envoyer un message à mon fils</button> <iframe style=display:none src=http://localhost:4000 frameborder=0></iframe ><script> function send() { window.frames[0].postMessage({a:1},http://localhost:4000); // Déclenche l'événement de message de la sous-page inter-domaines} window.addEventListener('message', function(event) { console.info('Mon fils a écrit une lettre', 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 -Compatible content=ie=edge> <title>Document</title></head><body> <!-- postMessage et iframe résolvent des problèmes inter-domaines courants--> Je suis le contenu du site du port 4000 <button onclick=send()>Envoyer un message à papa</button> <iframe style=display:none src=http://localhost:4000 frameborder=0></iframe> <script> window.addEventListener(message,function(event){ console.log(Papa a écrit :, event) },false) function send() { parent.postMessage({a:1}, 'http://localhost:3000'); // }</script></body></html>

À ce stade, nous avons implémenté une communication inter-domaines entre les pages parent et enfant, mais cette communication ne se produit que dans une seule fenêtre et n'obtient pas l'effet souhaité. Que dois-je faire ?

À ce stade, tout le monde doit réfléchir à ce que peuvent voir tous les sites Web portant le même nom de domaine sur le navigateur ?

C'est vrai, le stockage, nous devons juste surveiller cela.

Ici, nous choisissons d'écouter localStorage et maintenant nous apportons des améliorations aux sous-pages

 <!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 et iframe résolvent des problèmes inter-domaines courants--> Je suis le contenu du site du port 4000 <button onclick=send()>Envoyer un message à papa</button> <iframe style=display:none src=http://localhost:4000 frameborder=0></iframe> <script> window.addEventListener(message,function(event){ console.log(Papa a écrit :, 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>

Écoutez, sommes-nous désormais capables de répondre au contenu transmis à travers les domaines ?

Maintenant que nous avons réalisé une communication inter-domaines entre deux pages, comment effectuer trois communications inter-domaines ou plus ? En fait, il existe une vérité. Maintenant que je vous ai dit la vérité, allez expérimenter vous-même la méthode d’écriture.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.