Chrome no permite modificar document.domain

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

Maud Nalpas

Eiji Kitamura

¿Qué cambiará y por qué?

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

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

Esperamos que otros navegadores dejen de admitir esta funcionalidad y la quiten. Consulta la sección Compatibilidad con navegadores para obtener más información.

¿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 configuran document.domain para permitir la comunicación entre páginas de origen cruzado en el mismo sitio.

Si bien esta es una técnica conveniente, presenta un riesgo de seguridad, ya que relaja la política del mismo origen. Las inquietudes de 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é se hace inmutable document.domain?

Cómo se usa document.domain en la actualidad

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

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

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 de 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 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 de DOM entre orígenes en https://parent.example.com en https://video.example.com.

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

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

Inquietudes de seguridad con document.domain

Las inquietudes de 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 document.domain, pueden fingir que tienen el mismo origen. Esto es particularmente importante cuando estas páginas usan un servicio de alojamiento compartido con diferentes subdominios. La configuración de document.domain abre el acceso a todos los demás sitios alojados por ese mismo servicio, lo que facilita que los atacantes accedan a tus 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 configurar document.domain, lee la página"Document.domain" en MDN.

Compatibilidad del navegador

• La especificación HTML indica que se debe quitar la función.
• Mozilla considera que inhabilitar document.domain de forma predeterminada vale la pena crear prototipos.
• WebKit indicó que está moderadamente a favor de dar de baja el set document.domain.
• Discusión con otros proveedores de navegadores
• Solicitud de extracción del grupo de trabajo WHATWG / HTML (experiencia de experimentación pendiente)

¿Cómo sé si mi sitio se ve afectado?

Si tu sitio web se ve afectado por este cambio, Chrome te advertirá en el panel de problemas de DevTools. Esta advertencia se agregó en 2022. Observa la bandera amarilla en la parte superior derecha de DevTools.

También puedes ejecutar tu sitio a través de la auditoría de APIs obsoletas de Lighthouse para encontrar todas las APIs que se programaron para quitar de Chrome.

Si configuraste la API de informes, Chrome te envió informes de baja para notificarte sobre esta baja próxima. Obtén más información para usar la API de Reporting con servicios existentes de recopilación de informes o para crear 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 aún 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, a través de la hosting de 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 un rediseño sustancial de una aplicación, por lo que vale la pena considerar alternativas que sigan admitiendo accesos entre orígenes.

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 confirma 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 comprueba cómo funciona. Si tienes requisitos específicos que no funcionan con postMessage() o la API de Channel Messaging, comunícate con nosotros en Twitter a través de @ChromiumDev o haz una 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 seguir 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 le indica al navegador si el clúster de agentes con clave de origen debe controlar el documento o no. Para obtener más información sobre Origin-Agent-Cluster, lee Cómo solicitar 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 efecto si solo un documento lo establece).

Configura OriginAgentClusterDefaultEnabled para la política empresarial

De forma 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 toda la organización. Para obtener más información, consulta Lista y administración de políticas de Chrome Enterprise | Documentación.

Recursos

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

Agradecimientos

Foto de Finan Akbar en Unsplash