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

Obtén aislamiento de origen cruzado y protección contra fugas entre sitios mientras interactúas con ventanas emergentes.

Arthur Hemery

Maud Nalpas

Hay un nuevo valor disponible para la política de abridor de origen cruzado (COOP): restrict-properties. Aporta beneficios de seguridad y facilita la adopción del aislamiento de origen cruzado, al tiempo que permite que tu sitio interactúe con ventanas emergentes de terceros para pagos, autenticación o cualquier otro caso 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:

Evitar las filtraciones entre sitios sin interrupciones
Haz que tu sitio esté aislado de origen cruzado.

Cómo evitar fugas entre sitios sin generar 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 usar esto a su favor para realizar ataques como fugas 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 de origen cruzado con ventanas emergentes.
Establece same-origin-allow-popups, que bloquea todas las interacciones de origen cruzado que abren tu sitio en una ventana emergente.
Establece unsafe-none, lo que permite todas las interacciones de origen cruzado con ventanas emergentes.

Esto imposibilitó que los sitios web que deben abrirse en una ventana emergente y que necesitan interactuar con su abridor apliquen COOP. Esto dejó sin protección contra las filtraciones entre sitios casos de uso clave, como el acceso único y los pagos.

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 filtración 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 filtración 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 tanto el abridor como el abierto establecen el encabezado y las páginas son de origen cruzado, el comportamiento es similar al de uno de ellos que haya establecido 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 aceptación 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 temporizadores de alta precisión con mejor resolución, mientras aísla el origen de otros, a menos que se habiliten.

Hasta ahora, para usar estas APIs, debías establecer Cross-Origin-Opener-Policy: same-origin. Sin embargo, esto interrumpiría cualquier flujo de ventanas emergentes de origen cruzado que puedas necesitar, como el acceso ú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 de apertura, simplemente la restringe al subconjunto de comunicación mínimo de window.postMessage() y window.closed.

Podrás habilitar el aislamiento de origen cruzado con los siguientes dos encabezados:

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

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

Obtén más información sobre credentialless en Carga recursos de origen cruzado sin encabezados CORP con COEP: credentialless.

Demostración

Prueba varias opciones de encabezado en esta demostración de aislamiento de origen cruzado.

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 es compatible con Chrome. Otros navegadores participan activamente en el debate sobre la estandarización.

Preguntas frecuentes

Mi sitio web necesita comunicarse con ventanas emergentes del mismo origen. ¿Debo usar `COOP: restrict-properties` para habilitar el aislamiento de origen cruzado?

Establecer COOP: restrict-properties tanto en la ventana emergente como en la página principal no causará restricciones. Si se configura solo en la ventana emergente o solo en la página principal, se impedirá el acceso a propiedades que no sean postMessage y closed en el elemento que abrió la ventana, incluso si son del mismo origen.

¿El conjunto de propiedades permitidas es fijo?

Según los comentarios que recibimos hasta el momento, sospechamos 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 hilo de la intención de experimentar.