Cómo hacer que tu sitio web esté "aislado de origen cruzado" con COOP y COEP

Usa COOP y COEP para configurar un entorno aislado de origen cruzado y habilitar funciones potentes como SharedArrayBuffer, performance.measureUserAgentSpecificMemory() y temporizador de alta resolución con mayor precisión.

Eiji Kitamura

Actualizaciones

  • 21 de junio de 2022: Las secuencias de comandos para trabajadores también requieren atención cuando el aislamiento de origen cruzado esté habilitado. Se agregaron algunas explicaciones.
  • 5 de agosto de 2021: La API de JS Self-Profiling se mencionó como una de las APIs que requieren aislamiento de origen cruzado, pero que reflejan un cambio reciente del instrucciones, se elimina.
  • 6 de mayo de 2021: En función de los comentarios y los problemas informados, decidimos realizar ajustes Cronograma para el uso de SharedArrayBuffer en ninguno de los sitios aislados de origen cruzado esté restringido en Chrome M92.
  • 16 de abril de 2021: Se agregaron notas sobre un nuevo COEP sin credenciales modo y COOP misma-origin-allow-popups para ser una persona condición para el origen cruzado de forma aislada.
  • 5 de marzo de 2021: Se quitaron las limitaciones de SharedArrayBuffer, performance.measureUserAgentSpecificMemory() y las funcionalidades de depuración, que ahora están completamente habilitados en Chrome 89. Se agregaron próximas funciones, performance.now() y performance.timeOrigin, que tendrán un valor mayor para lograr una mayor precisión.
  • 19 de febrero de 2021: Se agregó una nota sobre la política de funciones allow="cross-origin-isolated" y la funcionalidad de depuración en Herramientas para desarrolladores
  • 15 de octubre de 2020: self.crossOriginIsolated estará disponible a partir de Chrome 87. Por lo tanto, document.domain es inmutable cuando self.crossOriginIsolated muestra true. performance.measureUserAgentSpecificMemory() está finalizando su prueba de origen y está habilitada de forma predeterminada en Chrome 89. Shared Array Buffer en Android Chrome estarán disponibles a partir de Chrome 88.

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 aislados de origen cruzado. Con un estado aislado de origen cruzado, la página web se usar funciones con privilegios, como

API Descripción
SharedArrayBuffer Obligatorio para los subprocesos de WebAssembly. Esta función está disponible en Android Chrome 88. La versión de escritorio está actualmente habilitada de forma predeterminada con la ayuda de Aislamiento de sitios, pero requerirá el estado aislado de origen cruzado y se inhabilitará de forma predeterminada en Chrome 92.
performance.measureUserAgentSpecificMemory() Disponible a partir de Chrome 89.
performance.now() y performance.timeOrigin Actualmente disponible en muchos navegadores con la resolución limitada a 100 microsegundos o más. Con el aislamiento de origen cruzado, el resolución puede ser de 5 microsegundos o más.
Funciones que estarán disponibles detrás del aislamiento de origen cruzado el estado.

El estado aislado de origen cruzado también evita modificaciones del document.domain (Poder modificar document.domain permite la comunicación entre documentos del mismo sitio y se ha considerado una brecha en la política del mismo origen).

Para habilitar un estado aislado de origen cruzado, debes enviar lo siguiente: Encabezados HTTP en el documento principal:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

Estos encabezados le indican al navegador que bloquee la carga de recursos o iframes. que no hayan aceptado cargarse en documentos de origen cruzado y evitar ventanas de origen cruzado para evitar que interactúen directamente con su documento. Esto también significa que esos recursos que se cargan de origen cruzado requieren participación.

Para determinar si una página web se encuentra en un estado aislado de origen cruzado, haz lo siguiente: examinar self.crossOriginIsolated

En este artículo, se explica cómo utilizar estos nuevos encabezados. En una pregunta de seguimiento artículo, les brindaré más contexto y antecedentes.

Implementa COOP y COEP para aislar el origen cruzado de tu sitio web

Integra COOP y COEP

1. Establecer el encabezado Cross-Origin-Opener-Policy: same-origin en el documento de nivel superior

Si habilitas COOP: same-origin en un documento de nivel superior, las ventanas con las mismas el origen y las ventanas abiertas desde el documento, tendrán una configuración grupo de contexto, a menos que se encuentren en el mismo origen y con la misma configuración COOP. Por lo tanto, se aplica el aislamiento para las ventanas abiertas y la comunicación mutua entre ambas ventanas están inhabilitadas.

Un grupo de contexto de navegación es un conjunto de ventanas que pueden hacer referencia unas a otras. Para Por ejemplo, un documento de nivel superior y sus documentos secundarios incorporados a través de <iframe>. Si un sitio web (https://a.example) abre una ventana emergente (https://b.example), haz lo siguiente: la ventana de apertura y la ventana emergente comparten el mismo contexto de navegación, por lo tanto, tienen acceso entre sí mediante APIs de DOM, como window.opener.

Grupo de contexto de navegación

Puedes comprobar si el botón de apertura de ventana y el usuario que abrió se encuentran en una navegación separada. grupos de contextos de Herramientas para desarrolladores.

2. Asegúrate de que los recursos tengan el CORP o CORS habilitados

Asegúrate de que todos los recursos de la página estén cargados con CORP o CORS HTTP encabezados. Este paso es obligatorio para el paso cuatro, habilitar COEP.

Esto es lo que debes hacer según la naturaleza del recurso:

  • Si se espera que el recurso se cargue solo desde el mismo origen, establece el encabezado Cross-Origin-Resource-Policy: same-origin.
  • Si se espera que el recurso se cargue solo desde el mismo sitio, pero entre origin, establece el encabezado Cross-Origin-Resource-Policy: same-site.
  • Si el recurso se carga desde orígenes cruzados bajo tu control, configura la Cross-Origin-Resource-Policy: cross-origin, si es posible.
  • Para los recursos de varios orígenes sobre los que no tienes control, haz lo siguiente:
    • Usa el atributo crossorigin en la etiqueta HTML de carga si el recurso está si se proporcionan con CORS. (Por ejemplo, <img src="***" crossorigin>).
    • Pídele al propietario del recurso que admita CORS o CORP.
  • Para los iframes, sigue los mismos principios anteriores y establece la Cross-Origin-Resource-Policy: cross-origin (o same-site, same-origin según el contexto).
  • Las secuencias de comandos cargadas con un WebWorker deben entregarse desde el mismo origen, por lo que no necesitas encabezados CORP ni CORS.
  • Para un documento o un trabajador entregado con COEP: require-corp, origen cruzado los subrecursos que se cargan sin CORS deben establecer el encabezado Cross-Origin-Resource-Policy: cross-origin para habilitar la incorporación. Por ejemplo, esto se aplica a <script>, importScripts, <link>, <video>, <iframe>, etcétera.

3. Usa el encabezado HTTP de solo informes de COEP para evaluar los recursos incorporados

Antes de habilitar COEP por completo, puedes hacer una prueba de validación con el Cross-Origin-Embedder-Policy-Report-Only para examinar si la política no funciona. Recibirás informes sin bloquear el contenido incorporado.

Aplicar esto de forma recurrente a todos los documentos, incluido el documento de nivel superior iframes y secuencias de comandos de trabajador. Para obtener información sobre el encabezado HTTP solo del informe, consulta Observa los problemas con la herramienta API

4. Habilitar COEP

Una vez que hayas confirmado que todo funciona y que todos los recursos se pueden se cargó correctamente, cambia Cross-Origin-Embedder-Policy-Report-Only al encabezado Cross-Origin-Embedder-Policy con el mismo valor para todos incluidos los que están incorporados a través de iframes y secuencias de comandos para trabajadores.

Determina si el aislamiento se realizó correctamente con self.crossOriginIsolated

La propiedad self.crossOriginIsolated muestra true cuando la página web está en una estado aislado de origen cruzado y todos los recursos y ventanas están aislados en el mismo grupo de contexto de navegación. Puedes usar esta API para determinar si aislaron correctamente el grupo del contexto de navegación y obtuvieron acceso a funciones potentes, como performance.measureUserAgentSpecificMemory().

Depura problemas con las Herramientas para desarrolladores de Chrome

Para los recursos que se renderizan en la pantalla, como las imágenes, es bastante sencillo. para detectar problemas de COEP, ya que se bloqueará la solicitud y la página para indicar que falta una imagen. Sin embargo, para los recursos que no necesariamente tienen un impacto visual, como guiones o estilos, los problemas de COEP podrían pasan desapercibidas. Para esos, usa el panel Network de Herramientas para desarrolladores. Si hay un problema con el COEP. Deberías ver (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) en Estado .

Problemas de COEP en la columna Estado del panel Red.

Luego, puedes hacer clic en la entrada para ver más detalles.

Los detalles del problema de COEP se muestran en la pestaña Encabezados después de hacer clic en un recurso de red en el panel Red.

También puedes determinar el estado de los iframes y las ventanas emergentes a través del Panel Application. Ve a "Marcos". a la izquierda y expandir "arriba" para ver el desglose de la estructura de recursos.

Puedes verificar el estado del iframe, como la disponibilidad de SharedArrayBuffer, etcétera

Inspector de iframe de Herramientas para desarrolladores de Chrome

También puedes verificar el estado de las ventanas emergentes, por ejemplo, si se trata de un origen cruzado. aisladas.

Inspector de ventana emergente de Herramientas para desarrolladores de Chrome

Observa los problemas con la API de Reporting

La API de Reporting es otro mecanismo mediante el cual puedes detectar varios problemas. Puedes configurar la API de Reporting para indicarle a tu de los usuarios navegador que envíe un informe cada vez que COEP bloquee la carga de un recurso o COOP aísla una ventana emergente. Chrome es compatible con la API de Reporting desde versión 69 para diversos usos, como COEP y COOP.

A fin de aprender a configurar la API de Reporting y establecer un servidor para recibir ve a Cómo usar la pestaña Informes API

Ejemplo de informe del COEP

Ejemplo de COEP informe cuando el recurso de origen cruzado está bloqueado, se ve de la siguiente manera:

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
}]

Ejemplo de informe COOP

Un ejemplo de COOP de informar Cuando se abre una ventana emergente de forma aislada, se ve de la siguiente manera:

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

Cuando diferentes grupos de contextos de navegación intentan acceder entre sí (solo en "solo informes" ), COOP también envía un informe. Por ejemplo, un informe cuando postMessage() se intenta de la siguiente manera:

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
},
{
  "age": 51785,
  "body": {
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "property": "postMessage",
    "type": "access-to-coop-page-from-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

Conclusión

Usa una combinación de encabezados HTTP COOP y COEP para incluir una página web en un estado aislado de origen cruzado. Podrás examinar self.crossOriginIsolated para determinar si una página web está en un origen cruzado estado aislado.

Mantendremos esta publicación actualizada a medida que se agreguen funciones nuevas estado aislado de origen cruzado, y se realizan aún más mejoras en Herramientas para desarrolladores en torno a COOP y COEP.

Recursos