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.
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()
yperformance.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 cuandoself.crossOriginIsolated
muestratrue
.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. |
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
.
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.
- Usa el atributo
- Para los iframes, sigue los mismos principios anteriores y establece la
Cross-Origin-Resource-Policy: cross-origin
(osame-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 encabezadoCross-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.](https://web.developers.google.cn/static/articles/coop-coep/image/coep-issues-the-status-c-9f8040461053.jpg?authuser=7&hl=es-419)
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.](https://web.developers.google.cn/static/articles/coop-coep/image/details-the-coep-issue-a-7483b46211d45.jpg?authuser=7&hl=es-419)
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](https://web.developers.google.cn/static/articles/coop-coep/image/chrome-devtools-iframe-in-7b22ff613fbeb.png?authuser=7&hl=es-419)
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](https://web.developers.google.cn/static/articles/coop-coep/image/chrome-devtools-popup-win-191023386b4a8.png?authuser=7&hl=es-419)
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
- 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()