Chrome no permite modificar document.domain

Si tu sitio web depende de la configuración de document.domain, debes realizar tu acción.

¿Qué cambiará y por qué?

A partir de Chrome 115, los sitios web no podrán configurar document.domain: Chrome hará que document.domain sea inmutable. Para comunicarte con orígenes cruzados, debes usar enfoques alternativos, como postMessage() o la API de Channel Messaging.

Ten en cuenta que este cambio se lanzará de forma progresiva.

Esperamos que, en el futuro, otros navegadores dejen de usar esta función y la quiten. Para obtener más información, consulta la sección sobre compatibilidad con navegadores.

¿Por qué hacer que document.domain sea inmutable?

document.domain se diseñó para obtener o establecer el nombre de host del origen. Muchos sitios web configuraron document.domain para permitir la comunicación entre páginas del mismo sitio, pero de origen cruzado.

Si bien esta es una técnica conveniente, presenta un riesgo de seguridad porque flexibiliza la política del mismo origen. Las inquietudes sobre la seguridad en torno a document.domain provocaron un cambio en la especificación que advierte a los usuarios que eviten usarlo.

En detalle: ¿Por qué hacer que document.domain sea inmutable?

Cómo se usa document.domain hoy

Muchos sitios web configuran document.domain para permitir la comunicación entre páginas del mismo sitio, pero de origen cruzado.

Los sitios con el mismo sitio, pero de origen cruzado, tienen el mismo eTLD+1, pero subdominios diferentes.

A continuación, te mostramos cómo se usaba document.domain hasta ahora:

Supongamos que una página en https://parent.example.com incorpora una página de iframe desde https://video.example.com. Estas páginas tienen el mismo eTLD+1 (example.com) con diferentes subdominios. Cuando el document.domain de ambas páginas se establece en 'example.com', el navegador trata a los dos orígenes como si fueran del mismo origen.

Establece el document.domain para https://parent.example.com:

// Confirm the current origin of "parent.example.com"
console.log(document.domain);

// Set the document.domain
document.domain = 'example.com';
console.log(document.domain);

Establece el document.domain para https://video.example.com:

// Confirm the current origin of "video.example.com"
console.log(document.domain);

// Set the document.domain
document.domain = 'example.com';
console.log(document.domain);

Ahora puedes crear una manipulación del DOM de origen cruzado en https://parent.example.com en https://video.example.com.

Los sitios web configuran document.domain para que los documentos del mismo sitio se comuniquen con mayor facilidad. Debido a que este cambio flexibiliza la política del mismo origen, la página superior puede acceder al documento del iframe y recorrer el árbol del DOM, y viceversa.

Esta es una técnica conveniente, pero presenta un riesgo de seguridad.

Problemas de seguridad con document.domain

Las inquietudes sobre la seguridad en torno a document.domain provocaron un cambio en la especificación que advierte a los usuarios que eviten usarlo.

Por ejemplo, cuando dos páginas establecen el valor document.domain, pueden simular como si fueran del mismo origen. Esto es particularmente importante cuando estas páginas usan un servicio de hosting compartido con diferentes subdominios. Si configuras document.domain, se abrirá el acceso a todos los demás sitios alojados por ese mismo servicio, lo que facilita el acceso de los atacantes a los sitios. Esto es posible porque document.domain ignora la parte del número de puerto del dominio.

Para obtener más información sobre las implicaciones de seguridad de la configuración de document.domain, lee la página “Document.domain” en MDN.

Compatibilidad del navegador

• La especificación HTML establece que se debe quitar la función.
• Mozilla considera que, de forma predeterminada, inhabilitar document.domain vale la pena crear un prototipo.
• WebKit indicó que tiene una actitud moderadamente positiva sobre la baja del método set document.domain.
• Debate con otros proveedores de navegadores
• Solicitud de extracción del grupo de trabajo de WhatsApp o HTML (experiencia de experimentación pendiente)

¿Cómo puedo saber si mi sitio se verá afectado?

Si tu sitio web se ve afectado por este cambio, Chrome te advertirá en el panel Problemas de Herramientas para desarrolladores; esta advertencia se agregó en 2022. Observa la bandera amarilla en la parte superior derecha de Herramientas para desarrolladores.

También puedes ejecutar tu sitio mediante la auditoría de la API obsoleta de Lighthouse para encontrar todas las APIs que están programadas para quitarse de Chrome.

Si configuraste la API de Reporting, Chrome te envió informes de baja para notificarte sobre esta baja. Obtén más información sobre cómo usar la API de Reporting con servicios de recopilación de informes existentes o mediante la compilación de tu propia solución interna.

¿Cómo puedo ver este cambio en acción?

El cambio se lanzará de forma progresiva a partir de Chrome 115. Para ver este cambio en acción, incluso si todavía no se lanzó en tu navegador Chrome, puedes activarlo de la siguiente manera:

1. Abrir chrome://flags/#origin-agent-cluster-default
2. Selecciona Habilitar.
3. Reinicia Chrome.

¿Qué alternativas puedo usar?

La mejor opción es no modificar document.domain en absoluto, por ejemplo, alojando la página y todos los marcos constituyentes en el mismo origen. Esto funciona en todas las versiones de todos los navegadores. Sin embargo, esto puede requerir que la aplicación vuelva a trabajar de forma sustancial, por lo que vale la pena buscar también alternativas que continúen admitiendo accesos de origen cruzado.

Usa postMessage() o la API de Channel Messaging en lugar de document.domain

En la mayoría de los casos de uso, postMessage() o la API de Channel Messaging de origen cruzado pueden reemplazar a document.domain.

En el siguiente ejemplo:

1. https://parent.example.com solicita https://video.example.com dentro de un iframe para manipular el DOM enviando un mensaje a través de postMessage().
2. https://video.example.com manipula el DOM en cuanto recibe el mensaje y notifica el éxito al elemento superior.
3. https://parent.example.com reconoce el éxito.

En https://parent.example.com:

// Send a message to https://video.example.com
iframe.postMessage('Request DOM manipulation', 'https://video.example.com');

// Receive messages
iframe.addEventListener('message', (event) => {
  // Reject all messages except ones from https://video.example.com
  if (event.origin !== 'https://video.example.com') return;

  // Filter success messages
  if (event.data === 'succeeded') {
    // DOM manipulation is succeeded
  }
});

En https://video.example.com:

// Receive messages
window.addEventListener('message', (event) => {
  // Reject all messages except ones from https://parent.example.com
  if (event.origin !== 'https://parent.example.com') return;

  // Do a DOM manipulation on https://video.example.com.

  // Send a success message to https://parent.example.com
  event.source.postMessage('succeeded', event.origin);
});

Pruébala y mira cómo funciona. Si tienes requisitos específicos que no funcionan con postMessage() ni la API de Channel Messaging, avísanos en Twitter a través de @ChromiumDev o pregunta en Stack Overflow con una etiqueta document.domain.

Como último recurso, envía el encabezado Origin-Agent-Cluster: ?0.

Si tienes motivos sólidos para continuar configurando document.domain, puedes enviar el encabezado de respuesta Origin-Agent-Cluster: ?0 junto con el documento de destino.

Origin-Agent-Cluster: ?0

El encabezado Origin-Agent-Cluster indica al navegador si el clúster de agentes con clave de origen debe manejar el documento o no. Para obtener más información sobre Origin-Agent-Cluster, consulta Solicita aislamiento de rendimiento con el encabezado Origin-Agent-Cluster.

Cuando envías este encabezado, tu documento puede seguir configurando document.domain, incluso después de que se vuelva inmutable de forma predeterminada.

Todos los demás documentos que requieran ese comportamiento también deberán enviar un Origin-Agent-Cluster (ten en cuenta que document.domain no tiene ningún efecto si solo lo configura un documento).

Configura OriginAgentClusterDefaultEnabled para la política empresarial

De manera opcional, el administrador puede configurar la política OriginAgentClusterDefaultEnabled en false para que document.domain se pueda configurar de forma predeterminada en las instancias de Chrome de tu organización. Para obtener más información, consulta Administración y lista de políticas de Chrome Enterprise | Documentación.

Recursos

• Document.domain - APIs web | MDN
• Aislamiento de origen y dar de baja document.domain
• Se dará de baja document.domain. · Problema #564 · w3ctag/design-reviews

Agradecimientos

Foto de Finan Akbar en Unsplash