Pratique HTML5 et analyse de la messagerie inter-documents (messagerie iframe)

Le transfert de messages entre des pages provenant de noms de domaine différents est généralement appelé messagerie interdocuments, ou XDM en abrégé. Par exemple, une page du domaine www.leemagnum.com communique avec une page du nom de domaine //m.sbmmt.com/ située dans un inline frame. Avant l’avènement du mécanisme XDM, il aurait fallu beaucoup de temps pour mettre en œuvre ce type de communication sans aucun stress. XDM standardise ce mécanisme, nous permettant ainsi d'établir une communication entre documents de manière simple et sécurisée.

Le cœur de XDM est la méthode postMessage(). Pour XDM, « un autre endroit » fait référence à la balise iframe incluse dans la page actuelle ou à la fenêtre qui apparaît à partir de la page actuelle.

La méthode postMessage() reçoit deux paramètres : un message et une chaîne indiquant le nom de domaine à partir duquel le message est accepté. Le deuxième paramètre est très important pour garantir une communication sécurisée et empêcher le navigateur d'envoyer des messages vers des endroits dangereux. Un petit exemple est le suivant

　Code HTML

<iframe id="iframe" src="http://blog.csdn.net/lee_magnum" frameborder="0"></iframe>

　 Code JavaScript

//获取框架中的window
var iframeWin = document.getElementById("iframe").contentWindow;
alert(iframeWin) // [object window]

//向框架中发送消息
iframeWin.postMessage("一个消息", "http://blog.csdn.net/lee_magnum")

La dernière ligne de code JavaScript tente d'envoyer un message au cadre en ligne et précise que le document dans le cadre doit provenir de "http:/ /m.sbmmt.com/"domaine. Si la source correspond, le message est transmis à l'iframe, sinon postMessage() ne fait rien. Cette restriction empêche la position dans la fenêtre de changer dans certaines situations. Si le deuxième paramètre passé à postMessage() est "*", cela signifie que le message peut être envoyé à des documents depuis n'importe quel domaine.

Lorsqu'un message XDM est reçu, l'événement message de l'objet fenêtre sera déclenché. Cet événement est déclenché de manière asynchrone, il peut donc y avoir un délai d'événement entre l'envoi du message et la réception du message (déclenchant l'événement de message de la fenêtre de réception). Une fois l'événement de message déclenché, l'objet événement transmis au gestionnaire onmessage contient les trois informations importantes suivantes.

　data : Les données de chaîne transmises comme premier paramètre de la méthode postMessage()

　origin : Le domaine du document qui a envoyé le message, tel que "//m.sbmmt.com/"

　source : le proxy de l'objet window du document qui envoie le message. Cet objet proxy est principalement utilisé pour appeler la méthode postMessage() dans la fenêtre qui a envoyé le message précédent. Si la fenêtre qui envoie le message provient du même nom de domaine, alors cet objet est window.

Il est très nécessaire de vérifier la source de la fenêtre d'envoi après réception du message. Tout comme spécifier un deuxième paramètre à la méthode postMessage() pour garantir que le navigateur n'envoie pas le message vers une page inconnue, vérifier la source du message dans le gestionnaire de méthode onmessage() peut garantir que le message entrant provient d'une page connue. page. Le modèle de détection de base est le suivant : le proxy, et non l'objet fenêtre réel. C'est-à-dire qu'aucune autre information sur l'objet window n'est accessible via cet objet proxy event.Source. La méthode postMessage() ne peut être appelée que via le proxy event.Source.

Il y a une autre chose étrange à propos de XDM. Tout d'abord, le premier paramètre de postMessage() a d'abord été implémenté sous la forme "toujours une chaîne". Mais plus tard, la définition de ce paramètre a été modifiée pour permettre la transmission de n'importe quelle structure de données. Mais tous les navigateurs n’ont pas implémenté ce changement. Par conséquent, par mesure de sécurité, lorsque vous utilisez la méthode postMessage(), il est préférable de ne transmettre que des chaînes. Si vous souhaitez transmettre des données structurées, il est préférable d'appeler JSON.stringify() sur les données à transmettre, de transmettre la chaîne résultante via la méthode postMessage(), puis d'appeler JSON dans le gestionnaire d'événements onmessage .parse. () méthode. Les navigateurs prenant en charge XDM incluent Opera, IE8, Safari 4, Firefox 3.5, Chrome, Webkit pour Android et Safari pour iOS. Pour plus d'informations sur XDM, vous pouvez accéder à la page officielle de XDM pour référence. La page officielle de XDM est //m.sbmmt.com/ Les connaissances pertinentes sur le combat réel HTML5 et l'analyse de la messagerie inter-documents (messagerie iframe) sont présentées ici, et plus de contenu connexe Veuillez payer attention au site PHP chinois (m.sbmmt.com) !

window.addEventListener('message',function(event){
	//确保发送消息的域名是已知的域名
	if(event.origin == "http://blog.csdn.net/lee_magnum"){
		//处理接收到的数据
		processMessage(event.data);
		//可选：向来源窗口发送回执
		event.source.postMessage("收到了", "http://www.leemagnum.com");
	}
}, false);