Cómo usar postMessage para una Comunicación Segura entre Orígenes Cruzados (diferentes origenes)

Hola coders 🖖🏻, en esta publicación, te presentaré la API postMessage, una característica asombrosa pero poco conocida para la comunicación segura entre orígenes cruzados. ¡Si tienes algún comentario, me encantaría escucharlo!

Declaración del Problema

Imagina que tienes una aplicación web que necesita comunicarse entre diferentes ventanas o iframes. Por ejemplo, puedes tener una aplicación principal ejecutándose en la ventana padre y una ventana hija o iframe que necesita intercambiar datos con el padre. Debido a la política de mismo origen, la comunicación directa entre estas ventanas puede ser desafiante e insegura. Aquí es donde entra en juego postMessage, permitiendo una comunicación segura y confiable entre diferentes contextos de navegación.

¿Qué es postMessage?

postMessage es un método que te permite enviar mensajes de una ventana a otra de manera segura y controlada. Es especialmente útil para la comunicación entre una ventana padre y una ventana hija, o entre iframes y su documento padre. Al usar postMessage, podemos eludir de manera segura la política de mismo origen y asegurar que nuestros intercambios de datos sean seguros y confiables.

Ejemplo Práctico

Consideremos un ejemplo práctico. Supongamos que tienes una aplicación principal ejecutándose en una ventana padre y abres una ventana hija para mostrar información adicional. Deseas que la ventana hija envíe datos de vuelta a la ventana padre después de algún procesamiento.

Envío de un Mensaje desde la Ventana Padre Aquí está cómo puedes enviar un mensaje desde la ventana padre a la ventana hija:

// Open a new window
const childWindow = window.open('child.html', 'Child Window');

// Wait until the child window is fully loaded
childWindow.addEventListener('load', () => {
  // Send a message to the child window
  const message = 'Hello from the parent window!';
  const targetOrigin = 'https://your-domain.com';
  childWindow.postMessage(message, targetOrigin);
});

Recepción de un Mensaje

En la Ventana Hija En la ventana hija, puedes recibir y procesar el mensaje de la siguiente manera:

window.addEventListener('message', (event) => {
  // Validate the origin of the message
  if (event.origin !== 'https://your-domain.com') return;

  // Process the received message
  console.log('Message received from parent window:', event.data);
});

Envío de una Respuesta desde la Ventana Hija

De manera similar, la ventana hija puede enviar una respuesta de vuelta a la ventana padre:

// Assuming the parent window reference is available
const parentWindow = window.opener;

// Send a message back to the parent window
const responseMessage = 'Hello from the child window!';
const targetOrigin = 'https://your-domain.com';
parentWindow.postMessage(responseMessage, targetOrigin);

Recepción de la Respuesta en la Ventana Padre

En la ventana padre, puedes recibir y procesar la respuesta de la siguiente manera:

window.addEventListener('message', (event) => {
  // Validate the origin of the message
  if (event.origin !== 'https://your-domain.com') return;

  // Process the received response
  console.log('Response received from child window:', event.data);
});

Consideraciones Clave

• Valida Orígenes: Siempre valida el origen de los mensajes que recibes. Esto asegura que solo aceptes mensajes de fuentes confiables.
• Evita usar: como targetOrigin para prevenir que sitios maliciosos intercepten tus mensajes.
• Manejo Seguro de Datos: Asegúrate de que los datos que se envían y reciben se manejen de manera segura para prevenir fugas de datos o accesos no autorizados.

Al seguir estas mejores prácticas, puedes utilizar efectivamente postMessage para habilitar una comunicación segura y confiable entre orígenes cruzados en tus aplicaciones web.

Espero que disfrutes este artículo. Cualquier pregunta, puedes escribirme en Google :).