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

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

Arthur Hemery
GitHub
Maud Nalpas
Maud Nalpas
X GitHub

Hay un nuevo valor disponible para la Política de abridor multiorigen (COOP): restrict-properties. Proporciona beneficios de seguridad y facilita la adopción del aislamiento de origen cruzado mientras 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 prácticos principales:

Evita las filtraciones entre sitios sin fallas

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

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

Hasta ahora, las opciones para Cross-Origin-Opener-Policy eran limitadas. Puedes realizar una de las siguientes acciones:

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

Esto impedía que los sitios web se abrieran en una ventana emergente y pudieran interactuar con su opción de apertura 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 soluciona 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 del 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. Podrás abrir todas las páginas que antes podías abrir.
  • Si necesitas acceder a una ventana emergente de origen cruzado, la configuración Cross-Origin-Opener-Policy: restrict-properties también protegerá tu sitio contra el recuento de iframes. Podrás abrir el mismo conjunto de ventanas emergentes que tienes hoy.
  • Si tanto el iniciador como el abierto establecen el encabezado, y las páginas son de origen cruzado, se comporta de manera similar a una de ellas que estableció el encabezado. Si tienen el mismo origen, se otorga acceso completo.

Haz que tu sitio esté aislado 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 que se denomina aislamiento de origen cruzado. Con un estado aislado de origen cruzado, la página web puede usar funciones con privilegios, como SharedArrayBuffer, performance.measureUserAgentSpecificMemory() y temporizadores de alta precisión con mejor resolución, y aislar el origen de los demás, a menos que estén habilitados.

Hasta ahora, para usar estas APIs, tenías que configurar Cross-Origin-Opener-Policy: same-origin. Sin embargo, esto interrumpiría cualquier flujo emergente de origen cruzado que puedas necesario, 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 dividir la relación del abridor, 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

o

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 de CORP con COEP: credentialless.

Demostración

Prueba varias opciones de encabezados 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

Por el momento, Cross-Origin-Opener-Policy: restrict-properties solo es compatible con Chrome. Otros navegadores están participando activamente en el debate sobre 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?

Configurar COOP: restrict-properties en la ventana emergente y en la página principal no causará restricciones. Configurarlo 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 de mismo origen.

¿El conjunto de propiedades permitidas es fijo?

En función de los comentarios que recibiste hasta ahora, se sospecha que window.postMessage y window.closed son suficientes para la mayoría de los flujos de trabajo, pero aún estamos considerando abrirlos en otras propiedades. Si tienes un caso de uso que no se puede resolver usando solo postMessage y closed, deja tus comentarios en el subproceso Intent to Experiment.

Recursos