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

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 en Android y Chrome 92 en computadoras de escritorio.

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

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

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.

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.

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

Término clave: En este artículo, se usan terminología que parecen similares. Para que quede más claro, primero debes definirlos: * COEP: Política de incorporaciones de origen cruzado * COOP: Política de abridor de origen cruzado * CORP: Política de recursos entre dominios * CORS: Uso compartido de recursos entre dominios * CORB: Bloqueo de lectura de origen cruzado

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

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. 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.

Precaución: Esta acción interrumpirá las integraciones que requieren interacciones de ventanas de origen cruzado, como OAuth y pagos. Para mitigar este problema, exploramos relajar la condición y 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 de origen cruzado, pero este problema te bloquea, te recomendamos que te registres en una prueba de origen y esperes hasta que la nueva condición esté disponible. No planeamos finalizar la prueba de origen hasta que este problema se resuelva de forma segura.

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.

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.

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

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.

Puedes habilitar el aislamiento de origen cruzado en un documento incorporado en un iframe aplicando la política de permisos allow="cross-origin-isolated" a la etiqueta <iframe> y cumpliendo con las mismas condiciones descritas en este documento. Ten en cuenta que toda la cadena de documentos, incluidos los marcos superiores y los secundarios, también debe estar aislada por origen cruzado.

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 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.

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

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

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 lo habiliten de forma explícita. Y se nos ocurrió la idea de ir en la dirección opuesta: un nuevo COEP “sin credenciales” que permite cargar recursos sin el encabezado CORP mediante la eliminación de todas sus credenciales. Esperamos que esto alivie tu carga de garantizar que los subrecursos envían el encabezado Cross-Origin-Resource-Policy. Sin embargo, dado que el modo credentialless está disponible en Chrome a partir de la versión 96, pero aún no es compatible con ningún otro navegador, es posible que algunos desarrolladores tengan dificultades para implementar COOP o COEP. Si prefieres no habilitar el aislamiento de origen cruzado aún, te recomendamos que te registres en una prueba de origen y 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 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 .

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 "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

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

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.

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.

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"
}]

Precaución: blocked-url solo se usa con fines de retrocompatibilidad y se quitará con el tiempo.

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

• Por qué necesitas un sistema “aislado de origen cruzado” para acceder a funciones potentes.
• Guía para habilitar el aislamiento de origen cruzado
• Actualizaciones de SharedArrayBuffer en Chrome 88 y Android para computadoras de escritorio (92)
• Supervisa el uso total de memoria de tu página web con measureUserAgentSpecificMemory()