JavaScript
.postMessage () y MessageEvent

Sintaxis

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

Parámetros

Empezando

Qué es .postMessage () , cuándo y por qué lo usamos

.postMessage() método .postMessage() es una forma de permitir la comunicación segura entre scripts de origen cruzado.

Normalmente, dos páginas diferentes, solo pueden comunicarse directamente entre sí utilizando JavaScript cuando tienen el mismo origen, incluso si una de ellas está incrustada en otra (por ejemplo, iframes ) o una se abre desde dentro de la otra (por ejemplo, window.open() ). Con .postMessage() , puede evitar esta restricción mientras se mantiene seguro.

Solo puede usar .postMessage() cuando tiene acceso al código de JavaScript de ambas páginas. Como el receptor necesita validar el remitente y procesar el mensaje en consecuencia, solo puede usar este método para comunicarse entre dos scripts a los que tiene acceso.

Crearemos un ejemplo para enviar mensajes a una ventana secundaria y los mensajes se mostrarán en la ventana secundaria. Se supondrá que la página principal / remitente es http://sender.com y se asumirá que la página secundaria / remitente es http://receiver.com para el ejemplo.

Enviando mensajes

Para enviar mensajes a otra ventana, necesita tener una referencia a su objeto de window . window.open() devuelve el objeto de referencia de la ventana recién abierta. Para otros métodos para obtener una referencia a un objeto de ventana, vea la explicación en el parámetro otherWindow aquí .

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

Agregue un área de textarea y un send button que se usará para enviar mensajes a la ventana secundaria.

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

Envíe el texto de área de textarea utilizando .postMessage(message, targetOrigin) cuando se .postMessage(message, targetOrigin) en el 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');
}

Para enviar y recibir objetos JSON en lugar de una cadena simple, se pueden usar los métodos JSON.stringify() y JSON.parse() . Se puede dar un Transfarable Object como el tercer parámetro opcional del .postMessage(message, targetOrigin, transfer) , pero el navegador aún carece de soporte incluso en los navegadores modernos.

Para este ejemplo, dado que se supone que nuestro receptor es la página http://receiver.com , ingresamos su url como targetOrigin . El valor de este parámetro debe coincidir con el origin del objeto childWindow para que se envíe el mensaje. Es posible utilizar * como wildcard pero se recomienda encarecidamente evitar el uso del comodín y establecer siempre este parámetro en el origen específico del receptor por razones de seguridad .

Recepción, validación y procesamiento de mensajes.

El código de esta parte se debe colocar en la página del receptor, que es http://receiver.com para nuestro ejemplo.

Para recibir mensajes, se debe escuchar el message event de message event de la window .

window.addEventListener("message", receiveMessage);

Cuando se recibe un mensaje, hay un par de pasos que se deben seguir para garantizar la mayor seguridad posible .

• Validar el remitente
• Validar el mensaje
• Procesar el mensaje

El remitente siempre debe validarse para asegurarse de que el mensaje se recibe de un remitente de confianza. Después de eso, el mensaje en sí debe validarse para asegurarse de que no se reciba nada malicioso. Después de estas dos validaciones, el mensaje puede ser procesado.

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);
}

Haga clic aquí para ver un JS Fiddle mostrando su uso.