JavaScript
.postMessage () et MessageEvent

Syntaxe

• windowObject.postMessage(message, targetOrigin, [transfer]);
• window.addEventListener("message", receiveMessage);

Paramètres

Commencer

Qu'est-ce que .postMessage () , quand et pourquoi l'utilisons-nous?

.postMessage() méthode .postMessage() est un moyen d’autoriser la communication entre les scripts d’origine croisée.

Normalement, deux pages différentes peuvent communiquer directement entre elles en utilisant JavaScript lorsqu'elles sont sous la même origine, même si l'une d'elles est incorporée dans une autre (par exemple, iframes ) ou si l'une est ouverte depuis l'autre (par exemple window.open() ). Avec .postMessage() , vous pouvez contourner cette restriction tout en restant en sécurité.

Vous ne pouvez utiliser que .postMessage() lorsque vous avez accès au code JavaScript des deux pages. Étant donné que le destinataire doit valider l'expéditeur et traiter le message en conséquence, vous ne pouvez utiliser cette méthode que pour communiquer entre deux scripts auxquels vous avez accès.

Nous allons construire un exemple pour envoyer des messages à une fenêtre enfant et afficher les messages sur la fenêtre enfant. La page parent / expéditeur sera supposée être http://sender.com et la page enfant / destinataire sera supposée être http://receiver.com pour l'exemple.

Envoi de messages

Pour envoyer des messages à une autre fenêtre, vous devez avoir une référence à son objet window . window.open() renvoie l'objet de référence de la nouvelle fenêtre ouverte. Pour d'autres méthodes permettant d'obtenir une référence à un objet window, consultez l'explication sous le paramètre otherWindow ici .

var childWindow = window.open("http://receiver.com", "_blank");

Ajoutez une zone de textarea et un send button qui seront utilisés pour envoyer des messages à la fenêtre enfant.

<textarea id="text"></textarea>
<button id="btn">Send Message</button>

Envoyez le texte de textarea utilisant .postMessage(message, targetOrigin) lorsque vous cliquez button le button .

var btn = document.getElementById("btn"),
    text = document.getElementById("text");

btn.addEventListener("click", function () {
    sendMessage(text.value);
    text.value = "";
});

function sendMessage(message) {
    if (!message || !message.length) return;
    childWindow.postMessage(JSON.stringify({
        message: message,
        time: new Date()
    }), 'http://receiver.com');
}

Pour envoyer et recevoir des objets JSON au lieu d'une simple chaîne, JSON.stringify() pouvez utiliser les méthodes JSON.stringify() et JSON.parse() . Un Transfarable Object peut être Transfarable Object comme troisième paramètre facultatif de la .postMessage(message, targetOrigin, transfer) , mais la prise en charge du navigateur fait encore défaut dans les navigateurs modernes.

Pour cet exemple, puisque notre récepteur est supposé être la page http://receiver.com , nous targetOrigin son URL comme targetOrigin . La valeur de ce paramètre doit correspondre à l' origin de l'objet childWindow pour le message à envoyer. Il est possible d'utiliser * comme wildcard mais il est fortement recommandé d'éviter d'utiliser le caractère générique et de toujours définir ce paramètre sur l'origine spécifique du destinataire pour des raisons de sécurité .

Réception, validation et traitement des messages

Le code sous cette partie doit être placé dans la page du récepteur, qui est http://receiver.com pour notre exemple.

Pour recevoir des messages, l' message event de message event de la window doit être écouté.

window.addEventListener("message", receiveMessage);

Lorsqu'un message est reçu, il y a quelques étapes à suivre pour assurer la sécurité autant que possible .

• Valider l'expéditeur
• Valider le message
• Traiter le message

L'expéditeur doit toujours être validé pour s'assurer que le message est reçu d'un expéditeur de confiance. Après cela, le message lui-même doit être validé pour s'assurer que rien de malveillant n'est reçu. Après ces deux validations, le message peut être traité.

function receiveMessage(ev) {
    //Check event.origin to see if it is a trusted sender.
    //If you have a reference to the sender, validate event.source
    //We only want to receive messages from http://sender.com, our trusted sender page.
    if (ev.origin !== "http://sender.com" || ev.source !== window.opener)
        return;

    //Validate the message
    //We want to make sure it's a valid json object and it does not contain anything malicious 
    var data;
    try {
        data = JSON.parse(ev.data);
        //data.message = cleanseText(data.message) 
    } catch (ex) {
        return;
    }

    //Do whatever you want with the received message
    //We want to append the message into our #console div
    var p = document.createElement("p");
    p.innerText = (new Date(data.time)).toLocaleTimeString() + " | " + data.message;
    document.getElementById("console").appendChild(p);
}

Cliquez ici pour un JS Fiddle présentant son utilisation.