Guía para habilitar el aislamiento de origen cruzado

El aislamiento de origen cruzado permite que una página web use funciones potentes como SharedArrayBuffer. En este artículo, se explica cómo habilitar el aislamiento de origen cruzado en tu sitio web.

Eiji Kitamura

En esta guía, se muestra cómo habilitar el aislamiento de origen cruzado. El aislamiento de origen cruzado es obligatorio si deseas usar SharedArrayBuffer, performance.measureUserAgentSpecificMemory() o un temporizador de alta resolución con mejor precisión.

Si deseas habilitar el aislamiento de origen cruzado, evalúa el impacto que esto tendrá en otros recursos de origen cruzado de tu sitio web, como las posiciones de anuncios.

Determina en qué lugar de tu sitio web se usa SharedArrayBuffer

A partir de Chrome 92, las funciones que usan SharedArrayBuffer ya no funcionarán sin el aislamiento de origen cruzado. Si llegaste a esta página debido a un mensaje de baja de SharedArrayBuffer, es probable que tu sitio web o uno de los recursos incorporados en él use SharedArrayBuffer. Para asegurarte de que no haya errores en tu sitio web debido a su baja, primero identifica dónde se usa.

Si no tienes certeza de en qué parte de tu sitio se usa un SharedArrayBuffer, hay dos maneras de averiguarlo:

Cómo usar las Herramientas para desarrolladores de Chrome
(Avanzado) Usa los informes de baja

Si ya sabes dónde estás usando SharedArrayBuffer, ve a la sección Analiza el impacto del aislamiento de origen cruzado.

Cómo usar las Herramientas para desarrolladores de Chrome

Las herramientas para desarrolladores de Chrome permiten que los desarrolladores inspeccionen los sitios web.

Abre las Herramientas para desarrolladores de Chrome en la página que sospechas que puede estar usando SharedArrayBuffer.
Selecciona el panel Consola.

Si la página usa SharedArrayBuffer, aparecerá el siguiente mensaje:

[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535

El nombre de archivo y el número de línea al final del mensaje (por ejemplo, common-bundle.js:535) indican de dónde proviene el SharedArrayBuffer. Si se trata de una biblioteca de terceros, comunícate con el desarrollador para solucionar el problema. Si se implementa como parte de tu sitio web, sigue la siguiente guía para habilitar el aislamiento de origen cruzado.

Advertencia de la consola de DevToools cuando se usa SharedArrayBuffer sin aislamiento de origen cruzado — Advertencia de la consola de DevToools cuando se usa SharedArrayBuffer sin el aislamiento de origen cruzado.

(Avanzado) Usa los informes de baja

Algunos navegadores tienen una función de informes que permite dar de baja las APIs a un extremo específico.

Configura un servidor de informes de baja y obtén la URL de informes. Para lograrlo, puedes usar un servicio público o crear uno por tu cuenta.
Con la URL, configura el siguiente encabezado HTTP en las páginas que posiblemente entreguen SharedArrayBuffer.
```
Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
```
Una vez que el encabezado comience a propagarse, el extremo en el que te registraste debería comenzar a recopilar informes de baja.

Consulta un ejemplo de implementación aquí: https://cross-origin-isolation.glitch.me.

Analiza el impacto del aislamiento de origen cruzado

¿No sería genial si pudieras evaluar el impacto que tendría en tu sitio habilitar el aislamiento de origen cruzado sin dañar nada? Eso es lo que te permiten hacer los encabezados HTTP Cross-Origin-Opener-Policy-Report-Only y Cross-Origin-Embedder-Policy-Report-Only.

Configura Cross-Origin-Opener-Policy-Report-Only: same-origin en el documento de nivel superior. Como su nombre lo indica, este encabezado solo envía informes sobre el impacto que COOP: same-origin podría tener en tu sitio; en realidad, no inhabilitará la comunicación con ventanas emergentes.
Establece informes y configura un servidor web para recibir y guardar los informes.
Configura Cross-Origin-Embedder-Policy-Report-Only: require-corp en el documento de nivel superior. Este encabezado también te permite ver el impacto de habilitar COEP: require-corp sin afectar el funcionamiento de tu sitio. Puedes configurar este encabezado para enviar informes al mismo servidor de informes que configuraste en el paso anterior.

Precaución: Si habilitas el aislamiento de origen cruzado, se bloqueará la carga de recursos de origen cruzado que no habilites de forma explícita, y también se impedirá que el documento de nivel superior se pueda comunicar con ventanas emergentes. Estamos explorando formas de implementar Cross-Origin-Resource-Policy a gran escala, ya que el aislamiento entre orígenes cruzados requiere que todos los subrecursos estén habilitados de forma explícita. Se nos ocurrió la idea de ir en la dirección opuesta: un nuevo modo "sin credenciales" de COEP que permite cargar recursos sin el encabezado de CORP mediante la eliminación de todas sus credenciales. Esperamos que esto aliente tu carga de asegurarte de que los subrecursos envíen el encabezado Cross-Origin-Resource-Policy. Si bien el modo credentialless está disponible en Chrome a partir de la versión 96, aún no es compatible con ningún otro navegador, por lo que a algunos desarrolladores les puede resultar difícil implementar COOP o COEP en esta etapa. Además, se sabe que el encabezado Cross-Origin-Opener-Policy: same-origin interrumpirá las integraciones que requieren interacciones de ventana de origen cruzado, como OAuth y pagos. Para mitigar este problema, estamos explorando disminuir la rigurosidad de la condición para habilitar el aislamiento de origen cruzado en Cross-Origin-Opener-Policy: same-origin-allow-popups. De esta manera, será posible comunicarse con la ventana abierta por sí sola. Si quieres habilitar el aislamiento de origen cruzado, pero estas pruebas te bloquean, te recomendamos que te registres para obtener una prueba de origen y esperes hasta que estén disponibles los modos nuevos. No planeamos finalizar la prueba de origen hasta que estos modos nuevos estén disponibles.

Mitiga el impacto del aislamiento de origen cruzado

Una vez que hayas determinado qué recursos se verán afectados por el aislamiento de origen cruzado, sigue estos lineamientos generales para habilitar esos recursos de origen cruzado:

En los recursos de origen cruzado, como imágenes, secuencias de comandos, hojas de estilo, iframes, entre otros, configura el encabezado Cross-Origin-Resource-Policy: cross-origin. En los recursos del mismo sitio, configura el encabezado Cross-Origin-Resource-Policy: same-site.
Para los recursos que se pueden cargar con CORS, asegúrate de que esté habilitado configurando el atributo crossorigin en su etiqueta HTML (por ejemplo, <img src="example.jpg" crossorigin>). Para la solicitud de recuperación de JavaScript, asegúrate de que request.mode esté configurado como cors.
Si deseas usar funciones potentes, como SharedArrayBuffer, dentro de un iframe cargado, agrega allow="cross-origin-isolated" a <iframe>.
Si los recursos de origen cruzado cargados en iframes o las secuencias de comandos de trabajador involucran otra capa de iframes o secuencias de comandos de trabajador, antes de continuar, aplica de manera recurrente los pasos descritos en esta sección.
Una vez que confirmes que todos los recursos de origen cruzado están habilitados, configura el encabezado Cross-Origin-Embedder-Policy: require-corp en iframes y secuencias de comandos de trabajador (esto es obligatorio independientemente del mismo origen o de origen cruzado).
Asegúrate de que no haya ventanas emergentes de origen cruzado que requieran comunicación a través de postMessage(). No hay forma de que sigan funcionando cuando el aislamiento de origen cruzado está habilitado. Puedes trasladar la comunicación a otro documento que no esté aislado de origen cruzado, o bien usar un método de comunicación diferente (por ejemplo, solicitudes HTTP).

Habilitar el aislamiento de origen cruzado

Una vez que hayas mitigado el impacto del aislamiento de origen cruzado, sigue estos lineamientos generales para habilitar el aislamiento de origen cruzado:

Configura el encabezado Cross-Origin-Opener-Policy: same-origin en tu documento de nivel superior. Si configuraste Cross-Origin-Opener-Policy-Report-Only: same-origin, reemplázalo. Esto bloquea la comunicación entre tu documento de nivel superior y las ventanas emergentes.
Configura el encabezado Cross-Origin-Embedder-Policy: require-corp en tu documento de nivel superior. Si configuraste Cross-Origin-Embedder-Policy-Report-Only: require-corp, reemplázalo. Esto bloqueará la carga de recursos de origen cruzado que no estén habilitados.
Verifica que self.crossOriginIsolated muestre true en la consola para verificar que la página esté aislada de origen cruzado.

Habilitar el aislamiento de origen cruzado en un servidor local puede resultar complicado, ya que los servidores simples no admiten el envío de encabezados. Puedes iniciar Chrome con una función experimental de línea de comandos --enable-features=SharedArrayBuffer para habilitar SharedArrayBuffer sin habilitar el aislamiento de origen cruzado. Obtén más información para ejecutar Chrome con una función experimental de línea de comandos en las plataformas respectivas.