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 varios orígenes y habilitar funciones potentes, como SharedArrayBuffer, performance.measureUserAgentSpecificMemory() y el temporizador de alta resolución, con mayor precisión.

Eiji Kitamura

Precaución: SharedArrayBuffer en Chrome para computadoras de escritorio requiere aislamiento de origen cruzado a partir de Chrome 92. Obtén más información en Actualizaciones de SharedArrayBuffer en Chrome 88 para Android y Chrome 92 para computadoras.

Actualizaciones

• 21 de junio de 2022: Las secuencias de comandos para trabajadores también requieren atención cuando se habilita el aislamiento de origen cruzado. Se agregaron algunas explicaciones.
• 5 de agosto de 2021: Se mencionó la API de autoperfilación de JS como una de las APIs que requieren aislamiento entre orígenes, pero, debido al cambio reciente de la dirección, se quitó.
• 6 de mayo de 2021: En función de los comentarios y los problemas informados, decidimos ajustar el cronograma para que el uso de SharedArrayBuffer en sitios no aislados de origen cruzado se restrinja en Chrome M92.
• 16 de abril de 2021: Se agregaron notas sobre un nuevo modo sin credenciales de la COEP y COOP para permitir ventanas emergentes del mismo origen como una condición relajada para el aislamiento entre orígenes.
• 5 de marzo de 2021: Se quitaron las limitaciones de SharedArrayBuffer, performance.measureUserAgentSpecificMemory() y las funciones de depuración, que ahora están completamente habilitadas en Chrome 89. Se agregaron las próximas funciones, performance.now() y performance.timeOrigin, que tendrán 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 DevTools.
• 15 de octubre de 2020: self.crossOriginIsolated está disponible a partir de Chrome 87. Como resultado, 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. El búfer de array compartido en Chrome para Android estará disponible 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 que se denomina aislamiento de origen cruzado. Con un estado aislado de origen cruzado, la página web podrá usar funciones privilegiadas, como las siguientes:

Funciones que estarán disponibles detrás del estado aislado de origen cruzado.

API	Descripción
SharedArrayBuffer	Obligatorio para subprocesos de WebAssembly. Esta función está disponible a partir de Chrome 88 para Android. Actualmente, la versión para computadoras de escritorio está habilitada de forma predeterminada con la ayuda del 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(), performance.timeOrigin	Actualmente, está disponible en muchos navegadores con la resolución limitada a 100 microsegundos o más. Con el aislamiento entre orígenes, la resolución puede ser de 5 microsegundos o más.

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

Para habilitar un estado aislado de origen cruzado, debes enviar los siguientes 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 que los carguen documentos de origen cruzado, y evitan que las ventanas de origen cruzado interactúen directamente con tu documento. Esto también significa que los recursos que se cargan de origen cruzado requieren solicitudes de aceptación.

Para determinar si una página web se encuentra en un estado aislado de varios orígenes, puedes examinar self.crossOriginIsolated.

En este artículo, se explica cómo utilizar estos nuevos encabezados. En un artículo de seguimiento, proporcionaré más información y contexto.

Nota: Este artículo está dirigido a quienes deseen preparar sus sitios web para usar SharedArrayBuffer, subprocesos de WebAssembly, performance.measureUserAgentSpecificMemory() o un temporizador de alta resolución con mayor precisión y de manera más sólida en todas las plataformas de navegadores.

Término clave: En este artículo, se usa mucha terminología que suena similar. Para que todo quede más claro, primero definamos cada una de ellas: * COEP: Política de incorporación de origen cruzado * COOP: Política de apertura de origen cruzado * CORP: Política de recursos de origen cruzado * CORS: Uso compartido de recursos entre dominios * CORB: Bloqueo de lectura de origen cruzado

Implementa COOP y COEP para que tu sitio web esté aislado de varios orígenes

Nota: Conoce los pasos prácticos para habilitar el aislamiento de origen cruzado en Una guía para habilitar el aislamiento de origen cruzado.

Integra COOP y COEP

1. Establece 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 el mismo origen y las ventanas abiertas desde el documento tendrán un grupo de contexto de navegación independiente, a menos que se encuentren en el mismo origen con la misma configuración COOP. Por lo tanto, se aplica el aislamiento para las ventanas abiertas y se inhabilita la comunicación mutua entre ambas ventanas.

Precaución: Esta acción interrumpirá las integraciones que requieren interacciones de ventanas de origen cruzado, como OAuth y pagos. Para mitigar este problema, estamos explorando la posibilidad de relajar la condición para habilitar el aislamiento de origen cruzado en Cross-Origin-Opener-Policy: same-origin-allow-popups. De esta manera, será posible la comunicación con la ventana abierta sola. Si quieres habilitar el aislamiento entre orígenes, pero este problema te bloquea, te recomendamos que te registres para obtener una prueba de origen y que esperes hasta que la nueva condición esté disponible. No planeamos finalizar la prueba de origen hasta que se resuelva este problema de forma segura.

Un grupo de contexto de navegación es un conjunto de ventanas que pueden hacer referencia entre sí. 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), la ventana del activador y la ventana emergente comparten el mismo contexto de navegación, por lo que tienen acceso entre sí a través de las APIs de DOM, como window.opener.

Puedes verificar si el abridor de ventanas y el elemento que lo abre están en grupos de contexto de navegación separados desde DevTools.

Pruébalo: Consulta el impacto de diferentes parámetros COOP.

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

Asegúrate de que todos los recursos de la página se carguen con encabezados HTTP CORP o CORS. 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, configura el encabezado Cross-Origin-Resource-Policy: same-origin.
• Si se espera que el recurso se cargue solo desde el mismo sitio, pero con origen cruzado, establece el encabezado Cross-Origin-Resource-Policy: same-site.
• Si el recurso se carga desde orígenes cruzados bajo tu control, establece el encabezado Cross-Origin-Resource-Policy: cross-origin si es posible.
• Para los recursos de origen cruzado que no tienes control, haz lo siguiente:
  • Usa el atributo crossorigin en la etiqueta HTML de carga si el recurso se entrega 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 configura Cross-Origin-Resource-Policy: cross-origin (o same-site o 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 un encabezado CORP o CORS.
• Para un documento o un trabajador que se entrega con COEP: require-corp, los subrecursos entre dominios cargados 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.

Para habilitar el aislamiento de origen cruzado en un documento incorporado en un iframe, aplica la política de permisos allow="cross-origin-isolated" a la etiqueta <iframe> y cumple con las mismas condiciones que se describen en este documento. Ten en cuenta que toda la cadena de documentos, incluidos los marcos principales y secundarios, también debe estar aislada de varios orígenes.

Término clave: Es importante que comprendas la diferencia entre "same-site" y "same-origin". Obtén más información sobre las diferencias en Información sobre el mismo sitio y el mismo origen.

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

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

Aplica esto de forma recursiva a todos los documentos, incluido el documento de nivel superior, los iframes y las secuencias de comandos de trabajador. Para obtener información sobre el encabezado HTTP de solo informes, consulta Observa problemas con la API de informes.

4. Habilita COEP

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

Pruébalo: Consulta el impacto de los diferentes parámetros de COEP o CORP.

Nota: Squoosh (una PWA de optimización de imágenes) ahora usa COOP/COEP para obtener acceso a los subprocesos de Wasm (y al búfer de array compartido) también en Chrome para Android.

Precaución: Exploramos formas de implementar Cross-Origin-Resource-Policy a gran escala, ya que el aislamiento de origen cruzado requiere que todos los subrecursos para la habilitación explícita. Y se nos ocurrió ir en la dirección opuesta: un nuevo modo "sin credenciales" de COEP que permite cargar recursos sin el encabezado CORP quitando todas sus credenciales. Esperamos que esto te permita asegurarte de que los subrecursos envíen el encabezado Cross-Origin-Resource-Policy con mayor facilidad. Sin embargo, como el modo credentialless está disponible en Chrome desde la versión 96, pero aún no es compatible con ningún otro navegador, es posible que algunos desarrolladores encuentren dificultades para implementar COOP o COEP. Si prefieres no habilitar el aislamiento entre orígenes todavía, te recomendamos que te registres para obtener una prueba de origen y que esperes hasta que credentialless esté disponible en más navegadores.

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

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

Cómo depurar problemas con las Herramientas para desarrolladores de Chrome

En el caso de los recursos que se renderizan en la pantalla, como las imágenes, es bastante fácil detectar problemas de COEP, ya que la solicitud se bloqueará y la página indicará que falta una imagen. Sin embargo, en el caso de los recursos que no tienen un impacto visual, como las secuencias de comandos o los estilos, es posible que los problemas de la COEP pasen desapercibidos. Para esos, usa el panel Network de Herramientas para desarrolladores. Si hay un problema con el COEP, deberías ver (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) en la columna Estado.

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

También puedes determinar el estado de los iframes y las ventanas emergentes a través del panel Application. Ve a la sección "Frames" en el lado izquierdo y expande "top" para ver el desglose de la estructura de recursos.

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

También puedes verificar el estado de las ventanas emergentes, por ejemplo, si están aisladas de varios orígenes.

Observa problemas con la API de Reporting

La API de Reporting es otro mecanismo a través del cual puedes detectar varios problemas. Puedes configurar la API de Reporting para que le indique al navegador de tus usuarios que envíe un informe cada vez que la COEP bloquee la carga de un recurso o la COOP aísle una ventana emergente. Chrome admite la API de Reporting desde la versión 69 para varios usos, incluidos COEP y COOP.

Nota: ¿Ya usas la API de Reporting con el encabezado Report-To? Chrome se encuentra en transición a una nueva versión de la API de Reporting, que reemplaza Report-To por Reporting-Endpoints. Considera migrar a la nueva versión. Consulta Migra a la API de Reporting v1 para obtener más detalles.

Para aprender a configurar la API de Reporting y un servidor para recibir informes, consulta Cómo usar la API de Reporting.

Ejemplo de informe del COEP

Una carga útil del informe de COEP de ejemplo cuando se bloquea un recurso de origen cruzado 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"
}]

Precaución: blocked-url solo sirve para retrocompatibilidad y se quitará con el tiempo.

Ejemplo de informe de COOP

Un ejemplo de carga útil del informe COOP cuando se abre una ventana emergente y 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 contexto de navegación intentan acceder entre sí (solo en el modo "solo informe"), COOP también envía un informe. Por ejemplo, un informe cuando se intenta postMessage() se vería 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 de COOP y COEP para que una página web entre en un estado aislado especial entre varios orígenes. Podrás examinar self.crossOriginIsolated para determinar si una página web se encuentra en un estado aislado de origen cruzado.

Mantendremos esta publicación actualizada a medida que haya nuevas funciones disponibles para este estado aislado de origen cruzado y se realicen más mejoras en las Herramientas para desarrolladores en cuanto a COOP y COEP.

Recursos

• Por qué necesitas "aislamiento de origen cruzado" para funciones potentes
• Una guía para habilitar el aislamiento de origen cruzado
• Actualizaciones de SharedArrayBuffer en Chrome 88 para Android y Chrome 92 para computadoras
• Supervisa el uso total de memoria de tu página web con measureUserAgentSpecificMemory()