Comunicación entre Orígenes: Patrones de Seguridad con la API PostMessage

En la web moderna, las aplicaciones frecuentemente necesitan interactuar con recursos de diferentes orígenes. La Política del Mismo Origen (SOP, por sus siglas en inglés) es un mecanismo de seguridad crucial que restringe a los scripts el acceso a recursos de un origen diferente. Sin embargo, existen escenarios legítimos donde la comunicación entre orígenes es necesaria. La postMessage API proporciona un mecanismo controlado para lograr esto, pero es vital comprender sus riesgos de seguridad potenciales e implementar patrones de seguridad apropiados.

Comprendiendo la Política del Mismo Origen (SOP)

La Política del Mismo Origen es un concepto de seguridad fundamental en los navegadores web. Restringe que las páginas web realicen solicitudes a un dominio diferente del que sirvió la página web. Un origen se define por el esquema (protocolo), el host (dominio) y el puerto. Si alguno de estos difiere, los orígenes se consideran diferentes. Por ejemplo:

• https://example.com
• https://www.example.com
• http://example.com
• https://example.com:8080

Todos estos son orígenes diferentes, y la SOP restringe el acceso directo de scripts entre ellos.

Introducción a la API PostMessage

La postMessage API proporciona un mecanismo seguro y controlado para la comunicación entre orígenes. Permite que los scripts envíen mensajes a otras ventanas (por ejemplo, iframes, nuevas ventanas o pestañas), independientemente de su origen. La ventana receptora puede entonces escuchar estos mensajes y procesarlos en consecuencia.

La sintaxis básica para enviar un mensaje es:

otherWindow.postMessage(message, targetOrigin);

• otherWindow: Una referencia a la ventana de destino (por ejemplo, window.parent, iframe.contentWindow, o un objeto de ventana obtenido de window.open).
• message: Los datos que deseas enviar. Puede ser cualquier objeto de JavaScript que se pueda serializar (por ejemplo, cadenas de texto, números, objetos, arreglos).
• targetOrigin: Especifica el origen al que deseas enviar el mensaje. Este es un parámetro de seguridad crucial.

En el lado receptor, necesitas escuchar el evento message:

window.addEventListener('message', function(event) {
  // ...
});

El objeto event contiene las siguientes propiedades:

• event.data: El mensaje enviado por la otra ventana.
• event.origin: El origen de la ventana que envió el mensaje.
• event.source: Una referencia a la ventana que envió el mensaje.

Riesgos de Seguridad y Vulnerabilidades

Aunque postMessage ofrece una forma de eludir las restricciones de la SOP, también introduce riesgos de seguridad potenciales si no se implementa con cuidado. A continuación, se presentan algunas vulnerabilidades comunes:

1. Origen de Destino Incorrecto

No validar la propiedad event.origin es una vulnerabilidad crítica. Si el receptor confía ciegamente en el mensaje, cualquier sitio web puede enviar datos maliciosos. Siempre verifique que event.origin coincida con el origen esperado antes de procesar el mensaje.

Ejemplo (Código Vulnerable):

window.addEventListener('message', function(event) {
  // ¡NO HAGAS ESTO!
  processMessage(event.data);
});

Ejemplo (Código Seguro):

window.addEventListener('message', function(event) {
  if (event.origin !== 'https://trusted-origin.com') {
    console.warn('Mensaje recibido de un origen no confiable:', event.origin);
    return;
  }

  processMessage(event.data);
});

2. Inyección de Datos

Tratar los datos recibidos (event.data) como código ejecutable o inyectarlos directamente en el DOM puede llevar a vulnerabilidades de Cross-Site Scripting (XSS). Siempre sanitice y valide los datos recibidos antes de usarlos.

Ejemplo (Código Vulnerable):

window.addEventListener('message', function(event) {
  if (event.origin === 'https://trusted-origin.com') {
    document.body.innerHTML = event.data; // ¡NO HAGAS ESTO!
  }
});

Ejemplo (Código Seguro):

window.addEventListener('message', function(event) {
  if (event.origin === 'https://trusted-origin.com') {
    const sanitizedData = sanitize(event.data); // Implementa una función de sanitización adecuada
    document.getElementById('message-container').textContent = sanitizedData;
  }
});

function sanitize(data) {
    // Implementa una lógica de sanitización robusta aquí.
    // Por ejemplo, usa DOMPurify o una biblioteca similar
    return DOMPurify.sanitize(data);
}

3. Ataques de Hombre en el Medio (MITM)

Si la comunicación ocurre a través de un canal inseguro (HTTP), un atacante MITM puede interceptar y modificar los mensajes. Utilice siempre HTTPS para una comunicación segura.

4. Falsificación de Solicitudes entre Sitios (CSRF)

Si el receptor realiza acciones basadas en el mensaje recibido sin una validación adecuada, un atacante podría falsificar mensajes para engañar al receptor y hacer que realice acciones no deseadas. Implemente mecanismos de protección CSRF, como incluir un token secreto en el mensaje y verificarlo en el lado del receptor.

5. Uso de Comodines en targetOrigin

Establecer targetOrigin en * permite que cualquier origen reciba el mensaje. Esto debe evitarse a menos que sea absolutamente necesario, ya que anula el propósito de la seguridad basada en el origen. Si debe usar *, asegúrese de implementar otras medidas de seguridad sólidas, como códigos de autenticación de mensajes (MAC).

Ejemplo (Evitar Esto):

otherWindow.postMessage(message, '*'); // Evita usar '*' a menos que sea absolutamente necesario

Patrones de Seguridad y Mejores Prácticas

Para mitigar los riesgos asociados con postMessage, siga estos patrones de seguridad y mejores prácticas:

1. Validación Estricta del Origen

Valide siempre la propiedad event.origin en el lado del receptor. Compárela con una lista predefinida de orígenes confiables. Use igualdad estricta (===) para la comparación.

2. Sanitización y Validación de Datos

Sanitice y valide todos los datos recibidos a través de postMessage antes de usarlos. Use técnicas de sanitización apropiadas dependiendo de cómo se usarán los datos (por ejemplo, escapado de HTML, codificación de URL, validación de entrada). Use bibliotecas como DOMPurify para sanitizar HTML.

3. Códigos de Autenticación de Mensajes (MAC)

Incluya un Código de Autenticación de Mensajes (MAC) en el mensaje para garantizar su integridad y autenticidad. El remitente calcula el MAC usando una clave secreta compartida y la incluye en el mensaje. El receptor recalcula el MAC usando la misma clave secreta compartida y lo compara con el MAC recibido. Si coinciden, el mensaje se considera auténtico y no ha sido alterado.

Ejemplo (Usando HMAC-SHA256):

// Remitente
async function sendMessage(message, targetOrigin, sharedSecret) {
  const encoder = new TextEncoder();
  const data = encoder.encode(JSON.stringify(message));
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(sharedSecret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["sign"]
  );
  const signature = await crypto.subtle.sign("HMAC", key, data);
  const signatureArray = Array.from(new Uint8Array(signature));
  const signatureHex = signatureArray.map(b => b.toString(16).padStart(2, '0')).join('');

  const securedMessage = {
    data: message,
    signature: signatureHex
  };

  otherWindow.postMessage(securedMessage, targetOrigin);
}

// Receptor
async function receiveMessage(event, sharedSecret) {
  if (event.origin !== 'https://trusted-origin.com') {
    console.warn('Mensaje recibido de un origen no confiable:', event.origin);
    return;
  }

  const securedMessage = event.data;
  const message = securedMessage.data;
  const receivedSignature = securedMessage.signature;

  const encoder = new TextEncoder();
  const data = encoder.encode(JSON.stringify(message));
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(sharedSecret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["verify"]
  );
  const signature = await crypto.subtle.sign("HMAC", key, data);
  const signatureArray = Array.from(new Uint8Array(signature));
  const signatureHex = signatureArray.map(b => b.toString(16).padStart(2, '0')).join('');

  if (signatureHex === receivedSignature) {
    console.log('¡El mensaje es auténtico!');
    processMessage(message); // Proceder a procesar el mensaje
  } else {
    console.error('¡La verificación de la firma del mensaje falló!');
  }
}

Importante: La clave secreta compartida debe generarse y almacenarse de forma segura. Evite codificar la clave directamente en el código.

4. Uso de Nonce y Marcas de Tiempo

Para prevenir ataques de repetición, incluya un nonce único (número usado una sola vez) y una marca de tiempo en el mensaje. El receptor puede entonces verificar que el nonce no se ha usado antes y que la marca de tiempo está dentro de un plazo aceptable. Esto mitiga el riesgo de que un atacante repita mensajes previamente interceptados.

5. Principio de Privilegio Mínimo

Otorgue solo los privilegios mínimos necesarios a la otra ventana. Por ejemplo, si la otra ventana solo necesita leer datos, no le permita escribir datos. Diseñe su protocolo de comunicación teniendo en cuenta el principio de privilegio mínimo.

6. Política de Seguridad de Contenido (CSP)

Utilice la Política de Seguridad de Contenido (CSP) para restringir las fuentes desde las que se pueden cargar scripts y las acciones que los scripts pueden realizar. Esto puede ayudar a mitigar el impacto de las vulnerabilidades XSS que podrían surgir de un manejo inadecuado de los datos de postMessage.

7. Validación de Entradas

Valide siempre la estructura y el formato de los datos recibidos. Defina un formato de mensaje claro y asegúrese de que los datos recibidos se ajusten a este formato. Esto ayuda a prevenir comportamientos inesperados y vulnerabilidades.

8. Serialización Segura de Datos

Utilice un formato de serialización de datos seguro, como JSON, para serializar y deserializar mensajes. Evite usar formatos que permitan la ejecución de código, como eval() o Function().

9. Limitar el Tamaño del Mensaje

Limite el tamaño de los mensajes enviados a través de postMessage. Los mensajes grandes pueden consumir recursos excesivos y potencialmente llevar a ataques de denegación de servicio.

10. Auditorías de Seguridad Regulares

Realice auditorías de seguridad regulares de su código para identificar y abordar posibles vulnerabilidades. Preste especial atención a la implementación de postMessage y asegúrese de que se sigan todas las mejores prácticas de seguridad.

Escenario de Ejemplo: Comunicación Segura entre un Iframe y su Padre

Considere un escenario donde un iframe alojado en https://iframe.example.com necesita comunicarse con su página padre alojada en https://parent.example.com. El iframe necesita enviar datos de usuario a la página padre para su procesamiento.

Iframe (https://iframe.example.com):

// Generar una clave secreta compartida (reemplazar con un método seguro de generación de claves)
const sharedSecret = 'SU_CLAVE_SECRETA_COMPARTIDA_SEGURA';

// Obtener datos del usuario
const userData = {
  name: 'John Doe',
  email: 'john.doe@example.com'
};

// Enviar los datos del usuario a la página padre
async function sendUserData(userData) {
  const encoder = new TextEncoder();
  const data = encoder.encode(JSON.stringify(userData));
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(sharedSecret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["sign"]
  );
  const signature = await crypto.subtle.sign("HMAC", key, data);
  const signatureArray = Array.from(new Uint8Array(signature));
  const signatureHex = signatureArray.map(b => b.toString(16).padStart(2, '0')).join('');

  const securedMessage = {
    data: userData,
    signature: signatureHex
  };
  parent.postMessage(securedMessage, 'https://parent.example.com');
}

sendUserData(userData);

Página Padre (https://parent.example.com):

// Clave secreta compartida (debe coincidir con la clave del iframe)
const sharedSecret = 'SU_CLAVE_SECRETA_COMPARTIDA_SEGURA';

window.addEventListener('message', async function(event) {
  if (event.origin !== 'https://iframe.example.com') {
    console.warn('Mensaje recibido de un origen no confiable:', event.origin);
    return;
  }

  const securedMessage = event.data;
  const userData = securedMessage.data;
  const receivedSignature = securedMessage.signature;

  const encoder = new TextEncoder();
  const data = encoder.encode(JSON.stringify(userData));
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(sharedSecret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["verify"]
  );
  const signature = await crypto.subtle.sign("HMAC", key, data);
  const signatureArray = Array.from(new Uint8Array(signature));
  const signatureHex = signatureArray.map(b => b.toString(16).padStart(2, '0')).join('');


  if (signatureHex === receivedSignature) {
    console.log('¡El mensaje es auténtico!');
    // Procesar los datos del usuario
    console.log('Datos del usuario:', userData);
  } else {
    console.error('¡La verificación de la firma del mensaje falló!');
  }
});

Notas Importantes:

• Reemplace SU_CLAVE_SECRETA_COMPARTIDA_SEGURA con una clave secreta compartida generada de forma segura.
• La clave secreta compartida debe ser la misma tanto en el iframe como en la página padre.
• Este ejemplo utiliza HMAC-SHA256 para la autenticación de mensajes.

Conclusión

La API postMessage es una herramienta poderosa para habilitar la comunicación entre orígenes en aplicaciones web. Sin embargo, es crucial comprender los riesgos de seguridad potenciales e implementar patrones de seguridad apropiados para mitigar estos riesgos. Siguiendo los patrones de seguridad y las mejores prácticas descritos en esta guía, puede usar postMessage de forma segura para construir aplicaciones web robustas y seguras.

Recuerde siempre priorizar la seguridad y mantenerse actualizado con las últimas mejores prácticas de seguridad para el desarrollo web. Revise regularmente su código y sus configuraciones de seguridad para asegurarse de que sus aplicaciones estén protegidas contra posibles vulnerabilidades.