Google utiliza tecnología de IA para traducir contenido a tu idioma preferido. Las traducciones realizadas con IA pueden contener errores.

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 quieres usar SharedArrayBuffer, performance.measureUserAgentSpecificMemory(), o un temporizador de alta resolución con mejor precisión.

Si tienes la intención de habilitar el aislamiento de origen cruzado, evalúa el impacto que tendrá en otros recursos de origen cruzado de tu sitio web, como las posiciones de anuncios.

Determina en qué parte de tu sitio web se usa `SharedArrayBuffer`

A partir de Chrome 92, las funcionalidades 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 nada se interrumpa en tu sitio web debido a la baja, comienza por identificar dónde se usa.

Si no estás seguro de en qué parte de tu sitio se usa SharedArrayBuffer, hay dos formas de averiguarlo:

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

Si ya sabes dónde usas SharedArrayBuffer, ve a 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 sitios web.

Abre las Herramientas para desarrolladores de Chrome en la página que sospechas que podría usar SharedArrayBuffer.
Selecciona el panel de la 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  for more details. common-bundle.js:535

El nombre del archivo y el número de línea al final del mensaje (por ejemplo, common-bundle.js:535) indican de dónde proviene 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 guía que se indica a continuación para habilitar el aislamiento de origen cruzado.

Advertencia de la consola de Herramientas para desarrolladores cuando se usa SharedArrayBuffer sin aislamiento de origen cruzado. — Advertencia de la consola de las Herramientas para desarrolladores cuando se usa SharedArrayBuffer sin aislamiento de origen cruzado

(Avanzado) Cómo usar los informes de baja

Algunos navegadores tienen una funcionalidad de informes de baja de APIs a un extremo especificado.

Configura un servidor de informes de baja y obtén la URL de informes. Para ello, puedes usar un servicio público o crear uno tú mismo.
Con la URL, establece el siguiente encabezado HTTP en las páginas que potencialmente publican SharedArrayBuffer.
```
Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
```
Una vez que el encabezado comience a propagarse, el extremo que registraste debería empezar a recopilar informes de baja.

Consulta un ejemplo de implementación.

Analiza el impacto del aislamiento de origen cruzado

¿No sería genial si pudieras evaluar el impacto que tendría habilitar el aislamiento de origen cruzado en tu sitio sin interrumpir nada? Los encabezados HTTP Cross-Origin-Opener-Policy-Report-Only y Cross-Origin-Embedder-Policy-Report-Only te permiten hacer precisamente eso.

Establece Cross-Origin-Opener-Policy-Report-Only: same-origin en tu documento de nivel superior. Como indica el nombre, este encabezado solo envía informes sobre el impacto que COOP: same-origin tendría en tu sitio. En realidad, no inhabilitará la comunicación con las ventanas emergentes.
Configura los informes y un servidor web para recibir y guardar los informes.
Establece Cross-Origin-Embedder-Policy-Report-Only: require-corp en tu documento de nivel superior. Una vez más, este encabezado 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: Habilitar el aislamiento de origen cruzado bloqueará la carga de recursos de origen cruzado que no habilites de forma explícita y evitará que tu documento de nivel superior pueda comunicarse con las ventanas emergentes. Hemos estado explorando formas de implementar Cross-Origin-Resource-Policy a gran escala, ya que el aislamiento de origen cruzado requiere que todos los subrecursos habiliten la función 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 CORP quitando todas sus credenciales. Esperamos que esto alivie 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 desde la versión 96, aún no es compatible con ningún otro navegador, lo que puede dificultar que algunos desarrolladores implementen 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 ventanas de origen cruzado, como OAuth y los pagos. Para mitigar este problema, estamos explorando la posibilidad de relajar la condición para habilitar el aislamiento de origen cruzado a Cross-Origin-Opener-Policy: same-origin-allow-popups.
De esta manera, será posible la comunicación con la ventana que se abrió por sí sola. Si quieres habilitar el aislamiento de origen cruzado, pero estos desafíos te lo impiden, te recomendamos que te registres en una prueba de origen y esperes hasta que los modos nuevos estén disponibles. No planeamos finalizar la prueba de origen hasta que estos modos nuevos estén disponibles.

Mitiga el impacto del aislamiento de origen cruzado

Después de determinar qué recursos se verán afectados por el aislamiento de origen cruzado, estas son las instrucciones generales para habilitar esos recursos de origen cruzado:

En los recursos de origen cruzado, como imágenes, secuencias de comandos, hojas de estilo, iframes y otros, establece el Cross-Origin-Resource-Policy:cross-origin encabezado. En los recursos del mismo sitio, establece el Cross-Origin-Resource-Policy:same-site encabezado.
Para los recursos que se pueden cargar con CORS, asegúrate de que esté habilitado. Para ello, establece 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 quieres usar funciones potentes, como SharedArrayBuffer, dentro de un iframe cargado, agrega allow="cross-origin-isolated" a la <iframe>.
Si los recursos de origen cruzado cargados en iframes o secuencias de comandos de trabajador implican otra capa de iframes o secuencias de comandos de trabajador, aplica de forma recursiva los pasos descritos en esta sección antes de continuar.
Una vez que confirmes que todos los recursos de origen cruzado están habilitados, establece el encabezado Cross-Origin-Embedder-Policy: require-corp en iframes y secuencias de comandos de trabajador (esto es obligatorio, independientemente del origen cruzado o del mismo origen).
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 se habilita el aislamiento de origen cruzado. Puedes mover la comunicación a otro documento que no esté aislado de origen cruzado o usar un método de comunicación diferente (por ejemplo, solicitudes HTTP).

Habilita el aislamiento de origen cruzado

Después de mitigar el impacto del aislamiento de origen cruzado, estas son las instrucciones generales para habilitar el aislamiento de origen cruzado:

Establece el encabezado Cross-Origin-Opener-Policy: same-origin en tu documento de nivel superior. Si estableciste Cross-Origin-Opener-Policy-Report-Only: same-origin, reemplázalo. Esto bloquea la comunicación entre tu documento de nivel superior y sus ventanas emergentes.
Establece el encabezado Cross-Origin-Embedder-Policy: require-corp en tu documento de nivel superior. Si estableciste 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 tu página esté aislada de origen cruzado.

Habilitar el aislamiento de origen cruzado en un servidor local puede ser 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 información para ejecutar Chrome con una función experimental de línea de comandos en las plataformas correspondientes.