Un examen plus approfondi de la messagerie inter-documents en HTML5

La messagerie cross-document, parfois appelée XDM, fait référence à la transmission de messages entre des pages de domaines différents. Par exemple, une page du domaine www.w3cmm.com communique avec une page du domaine p2p.w3cmm.com située dans un frame en ligne. Avant l’émergence du mécanisme XDM, il fallait beaucoup d’efforts pour mettre en œuvre ce type de communication de manière plus fiable. XDM standardise ce mécanisme, nous permettant de mettre en œuvre une communication entre documents de manière simple et sécurisée.

Le cœur de XDM est la méthode postMessage(). Dans la spécification HTML5, d'autres parties que la partie XDM mentionneront également ce nom de méthode, mais elles ont toutes le même objectif : transférer des données vers un autre endroit. Pour XDM, « un autre endroit » fait référence à l'élément d5ba1642137c3f32f4f4493ae923989c contenu dans la page actuelle ou à la fenêtre affichée par la page actuelle.

La méthode postMessage() reçoit deux paramètres : un message et une chaîne indiquant le domaine d'où provient le destinataire du message. 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. Considérez l'exemple suivant.

var iframWindow = document.getElementById("myframe").contentWindow;
iframWindow.postMessage("A secret", "http://www.w3cmm.com");

La dernière ligne de code tente d'envoyer un message au cadre en ligne et précise que le document dans le cadre doit provenir du domaine "http://www.w3cmm.com". Si les sources correspondent, le message est transmis à l'iframe ; sinon, postMessage() ne fait rien. Cette restriction empêche la position dans la fenêtre de changer à votre insu. Si le deuxième paramètre passé à postMessage() est "*", cela signifie que le message peut être envoyé à des documents depuis n'importe quel domaine, mais nous ne le recommandons pas. Lorsque

reçoit un message XDM, 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 entre l'envoi du message et sa réception (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 postMessage().
origine : Le domaine où se trouve le document qui envoie le message, tel que "http://www.w3cmm.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 domaine, alors cet objet est window.

Il est crucial de vérifier l'origine de la fenêtre d'envoi après réception du message. Tout comme la spécification d'un deuxième paramètre à la méthode postMessage() pour garantir que le navigateur n'envoie pas le message vers une page inconnue, la détection de la source du message dans le gestionnaire onmessage peut garantir que le message entrant provient d'une page connue. Les modes de détection de base sont les suivants.

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    }
};

EventUtil.addHandler(window, "message", function (event) {
    //确保发送消息的域是已知的域
    if (event.origin == "http://www.w3cmm.com") {
        //处理接收到的数据
        processMessage(event.data);
        //可选：向来源窗口发送回执
        event.source.postMessage("Received!", "http://p2p.w3cmm.com");
    }
});

Je tiens quand même à rappeler à tout le monde que event.source n'est qu'un proxy pour l'objet window dans la plupart des cas, pas l'objet window lui-même. En d’autres termes, aucune autre information sur l’objet window n’est accessible via cet objet proxy. N'oubliez pas qu'il suffit d'appeler postMessage() via ce proxy. Cette méthode n'existe jamais et peut toujours être appelée.

XDM a aussi quelques bizarreries. 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. Cependant, tous les navigateurs n’ont pas implémenté ce changement. Par mesure de sécurité, lorsque vous utilisez postMessage(), il est préférable de ne transmettre que des chaînes. Si vous souhaitez transmettre des données structurées, la meilleure option est d'appeler d'abord JSON.stringify() sur les données à transmettre, et de les transmettre via postMessage() chaîne, puis appelez JSON.parse() dans le programme onmessage event handler.

L'utilisation de XDM est très pratique lors du chargement de contenu provenant d'autres domaines via des frames en ligne. Par conséquent, cette méthode de transmission de messages est extrêmement courante dans les mashups et les applications de réseaux sociaux. Avec XDM, une page contenant un d5ba1642137c3f32f4f4493ae923989c peut garantir qu'elle est protégée contre le contenu malveillant car elle communique uniquement via XDM pour les frames intégrés. XDM peut également être utilisé entre les pages du même domaine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!