Cómo proteger interacciones de ventanas emergentes con restrict-properties

Obtén aislamiento entre orígenes y protección contra filtraciones entre sitios mientras interactúas con ventanas emergentes.

Arthur Hemery
GitHub
Maud Nalpas
Maud Nalpas
X GitHub

Hay un valor nuevo para la política de abridor de origen cruzado (COOP): restrict-properties. Ofrece beneficios de seguridad y facilita la adopción del aislamiento entre orígenes, a la vez que permite que tu sitio interactúe con ventanas emergentes de terceros para pagos, autenticación y otros casos de uso.

Para comenzar a experimentar con restrict-properties, participa en la prueba de origen a partir de Chrome 116.

Por qué usar restrict-properties

restrict-properties tiene dos casos de uso principales:

Evita filtraciones entre sitios sin interrupciones

De forma predeterminada, cualquier sitio web puede abrir tu aplicación en una ventana emergente y obtener una referencia a ella.

Un sitio web malicioso puede aprovecharse de esto para realizar ataques como filtraciones entre sitios. Para mitigar este riesgo, puedes usar el encabezado Cross-Origin-Opener-Policy (COOP).

Hasta ahora, tus opciones para Cross-Origin-Opener-Policy eran limitadas. Puedes hacer lo siguiente:

  • Establece same-origin,, que bloquea todas las interacciones entre orígenes con ventanas emergentes.
  • Configura same-origin-allow-popups, que bloquea todas las interacciones de origen cruzado que abren tu sitio en una ventana emergente.
  • Establece unsafe-none, que permite todas las interacciones entre orígenes con ventanas emergentes.

De esta manera, era imposible que los sitios web que se debían abrir en una ventana emergente y que interactuaran con su abridor para aplicar COOP. Esto dejó casos de uso clave, como el inicio de sesión único y los pagos, sin protección contra filtraciones entre sitios.

Cross-Origin-Opener-Policy: restrict-properties resuelve este problema.

Con restrict-properties, no están disponibles las propiedades que se pueden usar para el recuento de fotogramas y otros ataques de filtraciones entre sitios, pero se permite la comunicación básica entre ventanas a través de postMessage y closed.

Esto mejora la seguridad de un sitio y, al mismo tiempo, mantiene los casos de uso clave. Por ejemplo:

  • Si proporcionas un servicio en una ventana emergente, configurar Cross-Origin-Opener-Policy: restrict-properties te protegerá contra una variedad de ataques de filtraciones entre sitios. Aún puedes abrir todas las páginas que podías abrir antes.
  • Si necesitas acceder a una ventana emergente de origen cruzado, configurar Cross-Origin-Opener-Policy: restrict-properties protegerá de manera similar tu sitio del recuento de iframes. Podrás abrir el mismo conjunto de ventanas emergentes que puedes abrir hoy.
  • Si el emisor y el receptor configuran el encabezado, y las páginas son de origen cruzado, se comporta de manera similar a cuando uno de ellos configura el encabezado. Si son del mismo origen, se otorga acceso completo.

Aísla tu sitio de origen cruzado

Por qué necesitamos el aislamiento de origen cruzado

Algunas APIs web aumentan el riesgo de ataques de canal lateral, como Spectre. Para mitigar ese riesgo, los navegadores ofrecen un entorno aislado basado en la habilitación voluntaria llamado aislamiento de origen cruzado. Con un estado aislado de origen cruzado, la página web puede usar funciones privilegiadas, como SharedArrayBuffer, performance.measureUserAgentSpecificMemory() y timers de alta precisión con una mejor resolución, a la vez que aísla el origen de los demás, a menos que se habilite.

Hasta ahora, para usar estas APIs, debías configurar Cross-Origin-Opener-Policy: same-origin. Sin embargo, esto interrumpiría cualquier flujo de ventanas emergentes de origen cruzado que necesites, como el inicio de sesión único y los pagos.

Ahora se puede usar Cross-Origin-Opener-Policy: restrict-properties en lugar de Cross-Origin-Opener-Policy: same-origin para habilitar el aislamiento de origen cruzado. En lugar de cortar la relación del activador, solo la restringe al subconjunto de comunicación mínimo de window.postMessage() y window.closed.

Podrás habilitar el aislamiento entre orígenes con los siguientes dos encabezados:

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: require-corp

o

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: credentialless

Obtén más información sobre credentialless en Cómo cargar recursos entre dominios sin encabezados CORP con COEP: credentialless.

Demostración

Prueba varias opciones de encabezado en esta demostración de aislamiento entre orígenes.

Experimenta con la prueba de origen

Para experimentar con Cross-Origin-Opener-Policy: restrict-properties, habilita la prueba de origen.

Navegadores compatibles

Actualmente, Cross-Origin-Opener-Policy: restrict-properties solo se admite en Chrome. Otros navegadores están participando activamente en el debate sobre la estandarización.

Preguntas frecuentes

Mi sitio web debe comunicarse con ventanas emergentes del mismo origen, ¿debo usar COOP: restrict-properties para habilitar el aislamiento de origen cruzado?

Configurar COOP: restrict-properties tanto en la ventana emergente como en la página principal no generará restricciones. Si se configura solo en la ventana emergente o solo en la página principal, evitará cualquier acceso a propiedades que no sean postMessage y closed en el abridor, incluso si son del mismo origen.

¿El conjunto de propiedades permitidas es fijo?

Según los comentarios recibidos hasta el momento, se sospecha que window.postMessage y window.closed son suficientes para la mayoría de los flujos de trabajo, pero aún estamos considerando abrirlo a otras propiedades. Si tienes un caso de uso que no se puede resolver solo con postMessage y closed, deja tus comentarios en el subproceso Intent to Experiment.

Recursos