Window: mtodo postMessage()

Sintaxis

postMessage(message)
postMessage(message, targetOrigin)
postMessage(message, targetOrigin, transfer)

postMessage(message, options)

Parmetros

message

Datos que se enviarn a la otra ventana. Los datos se serializan utilizando el algoritmo de clonacin estructurada. Esto significa que puedes pasar una amplia variedad de objetos de datos de forma segura a la ventana de destino sin tener que serializarlos t mismo.

targetOrigin Opcional

Especifica el origen que debe tener la ventana del destinatario para recibir el evento. Para que se enve el evento, el origen debe coincidir exactamente (incluido el esquema, el nombre de host y el puerto). Si se omite, se toma como valor predeterminado el origen que llama al mtodo. Este mecanismo proporciona control sobre el lugar al que se envan los mensajes; por ejemplo, si se utiliz postMessage() para transmitir una contrasea, sera absolutamente fundamental que este argumento fuera una URI cuyo origen sea el mismo que el del receptor previsto del mensaje que contiene la contrasea, para evitar la intercepcin de la contrasea por parte de un tercero malintencionado. Tambin se puede proporcionar *, lo que significa que el mensaje se puede enviar a un receptor con cualquier origen.

Nota: Siempre proporcione un targetOrigin especfico, no *, si sabe dnde debe ubicarse el documento de la otra ventana. Si no proporciona un target especfico, podra revelar datos a un sitio malicioso.

transfer Opcional

Un arreglo opcional de objetos transferibles para transferir la propiedad. La propiedad de estos objetos se otorga al lado de destino y ya no se pueden utilizar en el lado de envo. Estos objetos transferibles deben adjuntarse al mensaje; de lo contrario, se moveran pero no seran accesibles en el extremo receptor.

options Opcional

Un objeto opcional que contiene las siguientes propiedades:

transfer Opcional

Tiene el mismo significado que el parmetro transfer.

targetOrigin Opcional

Tiene el mismo significado que el parmetro targetOrigin.

Valor de retorno

Ninguno (undefined).

El evento enviado

Un objeto window puede escuchar mensajes enviados ejecutando el siguiente JavaScript:

window.addEventListener(
  "message",
  (event) => {
    if (event.origin !== "http://example.org:8080") return;

    // 
  },
  false,
);

Las propiedades del mensaje enviado son:

data

El objeto pasado desde la otra ventana.

origin

El origen de la ventana que envi el mensaje en el momento en que se llam a postMessage. Esta cadena es la concatenacin del protocolo y "://", el nombre de host si existe, y ":" seguido de un nmero de puerto si hay un puerto presente y difiere del puerto predeterminado para el protocolo dado. Ejemplos de orgenes tpicos son https://example.org (implicando el puerto 443), http://example.net (implicando el puerto 80), y http://example.com:8080. Ten en cuenta que este origen no est garantizado para ser el origen actual o futuro de esa ventana, que podra haber sido navegada a una ubicacin diferente desde que se llam a postMessage.

source

Una referencia al objeto window que envi el mensaje; puedes usar esto para establecer una comunicacin bidireccional entre dos ventanas con diferentes orgenes.

Preocupaciones de seguridad

Si no esperas recibir mensajes de otros sitios, no agregues ningn detector de eventos para eventos de mensaje. Esta es una forma completamente infalible de evitar problemas de seguridad.

Si esperas recibir mensajes de otros sitios, siempre verifica la identidad del remitente usando las propiedades origin y posiblemente source. Cualquier ventana (incluyendo, por ejemplo, http://evil.example.com) puede enviar un mensaje a cualquier otra ventana, y no tienes garantas de que un remitente desconocido no enviar mensajes maliciosos. Habiendo verificado la identidad, sin embargo, an deberas verificar siempre la sintaxis del mensaje recibido. De lo contrario, un agujero de seguridad en el sitio en el que confiabas para enviar solo mensajes confiables podra entonces abrir un agujero de scripting entre sitios en tu sitio.

Siempre especifica un origen de destino exacto, no *, cuando uses postMessage para enviar datos a otras ventanas. Un sitio malicioso puede cambiar la ubicacin de la ventana sin tu conocimiento y, por lo tanto, interceptar los datos enviados utilizando postMessage.

Mensajera segura de memora compartida

Si postMessage() lanza una excepcin cuando se usa con objetos SharedArrayBuffer, es posible que necesites asegurarte de que tu sitio est correctamente aislado entre sitios. La memoria compartida est protegida detrs de dos encabezados HTTP:

• Cross-Origin-Opener-Policy con same-origin como valor (protege tu origen de atacantes)
• Cross-Origin-Embedder-Policy con require-corp o credentialless como valor (protege a las vctimas de tu origen)

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Para comprobar si el aislamiento entre sitios ha sido exitoso, puedes probar contra la propiedad Window.crossOriginIsolated disponible para los contextos de ventana y worker:

const myWorker = new Worker("worker.js");

if (crossOriginIsolated) {
  const buffer = new SharedArrayBuffer(16);
  myWorker.postMessage(buffer);
} else {
  const buffer = new ArrayBuffer(16);
  myWorker.postMessage(buffer);
}

Ejemplos

/*
 * En los scripts de la ventana A, con A en http://example.com:8080:
 */

const popup = 

// Cuando la ventana emergente se haya cargado completamente, si no est bloqueada por un bloqueador de ventanas emergentes:

// Esto no hace nada, suponiendo que la ventana no haya cambiado su ubicacin.
popup.postMessage(
  "El usuario es 'bob' y la contrasea es 'secret'",
  "https://secure.example.net",
);

// Esto colocar exitosamente un mensaje en la cola para ser enviado a la ventana emergente,
// suponiendo que la ventana no haya cambiado su ubicacin.

popup.postMessage("Hola!", "http://example.com");

window.addEventListener(
  "message",
  (event) => {
    // Confiamos en el remitente de este mensaje? (podra ser
    // diferente de lo que originalmente abrimos, por ejemplo).
    if (event.origin !== "http://example.com") return;

    // event.source es popup
    // event.data es "hola a ti mismo! la respuesta secreta es: rheeeeet!"
  },
  false,
);

/*
 * En los scripts de la ventana emergente, ejecutndose en http://example.com:
 */

// Llamado en algn momento despus de que se llama a postMessage
window.addEventListener("message", (event) => {
  // Confiamos en el remitente de este mensaje?
  if (event.origin !== "http://example.com:8080") return;

  // event.source es window.opener
  // event.data es "Hola!"

  // Suponiendo que has verificado el origen del mensaje recibido (lo cual
  // debes hacer en cualquier caso), un modismo conveniente para responder a un
  // mensaje es llamar a postMessage en event.source y proporcionar
  // event.origin como el targetOrigin.
  event.source.postMessage(
    "hola a ti mismo! la respuesta secreta " + "es: rheeeeet!",
    event.origin,
  );
});

Notas

Cualquier script en un documento en una ventana puede solicitar que se enve un mensaje a un documento en otra ventana cuyo objeto de ventana haya obtenido, llamando a .postMessage() en ese objeto de ventana. En consecuencia, cualquier detector de eventos utilizado para recibir mensajes debe comprobar primero la identidad del remitente del mensaje, utilizando las propiedades origin y posiblemente source. Esto no se puede exagerar: No comprobar las propiedades origin y posiblemente source permite ataques de secuencias de comandos entre sitios.

Como con cualquier script despachado asincrnicamente (tiempos de espera, eventos generados por el usuario), no es posible para el llamador de postMessage detectar cuando un controlador de eventos que detecta eventos enviados por postMessage lanza una excepcin.

Despus de que se llama a postMessage(), el MessageEvent se despachar solo despus de que todos los contextos de ejecucin pendientes hayan terminado. Por ejemplo, si postMessage() se invoca en un controlador de eventos, ese controlador de eventos se ejecutar hasta completarse, al igual que cualquier controlador restante para ese mismo evento, antes de que se despache el MessageEvent.

El valor de la propiedad origin del evento despachado no se ve afectado por el valor actual de document.domain en la ventana llamadora.

Para nombres de host IDN solamente, el valor de la propiedad origin no es consistentemente Unicode o punycode; para una mayor compatibilidad, verifica tanto los valores IDN como punycode cuando uses esta propiedad si esperas mensajes de sitios IDN. Este valor eventualmente ser consistentemente IDN, pero por ahora debes manejar ambas formas, IDN y punycode.

El valor de la propiedad origin cuando la ventana que enva contiene una URL javascript: o data: es el origen del script que carg la URL.

Uso de window.postMessage en extensiones

window.postMessage est disponible para JavaScript que se ejecuta en cdigo de chrome (por ejemplo, en extensiones y cdigo privilegiado), pero la propiedad source del evento despachado siempre es null como una restriccin de seguridad. (Las otras propiedades tienen sus valores esperados).

No es posible para scripts de contenido o contextos web especificar un targetOrigin para comunicarse directamente con una extensin (ya sea el script de fondo o un script de contenido). Los scripts web o de contenido pueden usar window.postMessage con un targetOrigin de "*" para transmitir a cada oyente, pero esto no se recomienda, ya que una extensin no puede estar segura del origen de tales mensajes, y otros oyentes (incluidos aquellos que no controlas) pueden detectar.

Los scripts de contenido deben usar runtime.sendMessage para comunicarse con el script de fondo. Los scripts de contexto web pueden usar eventos personalizados para comunicarse con los scripts de contenido (con nombres de eventos generados aleatoriamente, si es necesario, para evitar el espionaje desde la pgina invitada).

Por ltimo, publicar un mensaje a una pgina en una URL file: actualmente requiere que el argumento targetOrigin sea "*". file:// no puede ser usado como una restriccin de seguridad; esta restriccin puede ser modificada en el futuro.

Especificaciones

Compatibilidad con navegadores

Vase tambin

• Document.domain
• CustomEvent
• BroadcastChannel - Para comunicacin del mismo origen.