Descubre por qué es necesario el aislamiento de origen cruzado para usar funciones eficaces, como SharedArrayBuffer
, performance.measureUserAgentSpecificMemory()
y el temporizador de alta resolución con mayor precisión.
Introducción
En Cómo hacer que tu sitio web esté "aislado entre orígenes cruzados" usando COOP y COEP explicamos cómo adoptar prácticas de "origen cruzado" aisladas" con COOP y COEP. Este es un artículo complementario que explica por qué se requiere el aislamiento de origen cruzado para habilitar funciones potentes en el navegador.
Información general
La Web se basa en el mismo origen
política: una función de seguridad que restringe
cómo los documentos y las secuencias de comandos pueden interactuar con recursos de otro origen. Esta
restringe las formas en que los sitios web pueden acceder a recursos de origen cruzado. Para
ejemplo, un documento de https://a.example
no puede acceder a los datos
alojado en https://b.example
.
Sin embargo, la política del mismo origen tuvo algunas excepciones históricas. Cualquier sitio web puede hacer lo siguiente:
- Cómo incorporar iframes de origen cruzado
- Incluir recursos de origen cruzado, como imágenes o secuencias de comandos
- Abre ventanas emergentes de origen cruzado con una referencia de DOM
Si la Web pudiera diseñarse desde cero, estas excepciones no existirían. Desafortunadamente, para cuando la comunidad web notó los beneficios clave de una estricta política del mismo origen, la Web ya se basaba en estas excepciones.
Los efectos secundarios de seguridad de esta política laxa del mismo origen se solucionaron en dos
maneras. Una manera fue la introducción de un nuevo protocolo llamado Cross
Uso compartido de recursos de origen (CORS)
cuyo propósito es garantizar que el servidor permita compartir un recurso con un
origen determinado. Otra forma es quitar implícitamente el acceso directo de la secuencia de comandos a
recursos de origen cruzado mientras se preserva la retrocompatibilidad. Tales
los recursos de origen cruzado se denominan "opacos" de Google Cloud. Por ejemplo, esta es la razón
manipular los píxeles de una imagen de origen cruzado mediante CanvasRenderingContext2D
falla a menos que se aplique CORS a la imagen.
Todas estas decisiones sobre políticas ocurren dentro de un grupo de contexto de navegación.
Durante mucho tiempo, la combinación de CORS y recursos opacos fue suficiente para navegadores seguros. A veces, los casos extremos (como JSON este tipo de vulnerabilidades) de los usuarios fueron descubiertos y debían aplicar parches, pero, en general, el principio de no permitiendo el acceso de lectura directo a los bytes sin procesar de los recursos de origen cruzado y exitoso.
Todo esto cambió con
Spectre, que
hace que cualquier dato que se cargue en el mismo grupo de contextos de navegación que tu código
potencialmente legibles. Al medir el tiempo que tardan ciertas operaciones, los atacantes
puede adivinar el contenido de las memorias caché de la CPU y, con ello, el contenido de la
proceso memoria. Esos ataques de tiempo son posibles con cronómetros de bajo nivel de detalle
disponibles en la plataforma, pero que se pueden acelerar con cronómetros de alto nivel de detalle,
explícito (como performance.now()
) e implícito (como
SharedArrayBuffer
). Si evil.com
incorpora una imagen de origen cruzado, puede usar un
Spectre para leer sus datos de píxeles, lo que hace que las protecciones dependan de
"opacidad" ineficaz.
Idealmente, el servidor debe aprobar de forma explícita todas las solicitudes de origen cruzado propietario del recurso. Si no proporciona la verificación servidor propietario de los recursos, los datos nunca llegarán al grupo de contexto de un actor malvado y, por lo tanto, se mantendrá fuera del alcance de cualquier espectro que una página web puede llevar a cabo. Lo llamamos un estado aislado de origen cruzado. De eso se trata COOP+COEP.
En un estado aislado de origen cruzado, el sitio solicitante se considera menos
peligroso, y esto desbloquea funciones potentes, como SharedArrayBuffer
,
performance.measureUserAgentSpecificMemory()
y alta resolución
cronómetros con mayor precisión, lo que podría
para ataques similares a los de un especie Spectre. También evita la modificación
document.domain
Política de incorporaciones de origen cruzado
Incorporador de origen cruzado (COEP) evita que documento no cargue ningún recurso de origen cruzado que no otorgue explícitamente el permiso del documento (con CORP o CORS). Con esta función, puedes declarar que un documento no puede cargar tales recursos.
Para activar esta política, agrega el siguiente encabezado HTTP al documento:
Cross-Origin-Embedder-Policy: require-corp
La palabra clave require-corp
es el único valor aceptado para COEP. Esto aplica
la política de que el documento solo puede cargar recursos del mismo origen
recursos marcados de forma explícita como cargables desde otro origen.
Para que los recursos se puedan cargar desde otro origen, deben admitir Uso compartido de recursos entre dominios (CORS) o Política de recursos entre dominios (CORP).
Uso compartido de recursos entre dominios
Si un recurso de origen cruzado admite el uso compartido de recursos entre dominios
(CORS), puedes usar el
crossorigin
para cargarlo en tu página web sin que el COEP te bloquee.
<img src="https://third-party.example.com/image.jpg" crossorigin>
Por ejemplo, si este recurso de imagen se entrega con encabezados CORS, usa el
El atributo crossorigin
para que la solicitud para recuperar el recurso use CORS
automático. Esto también
impide que se cargue la imagen, a menos que establezca encabezados de CORS.
Del mismo modo, puedes recuperar datos de origen cruzado a través del método fetch()
, que
no requiere un tratamiento especial, siempre que el servidor responda con la respuesta
HTTP
encabezados.
Política de recursos entre dominios
Política de recursos multiorigen (CORP) se introdujo originalmente como una habilitación para proteger tus recursos contra cargado por otro origen. En el contexto de COEP, CORP puede especificar el recurso política del propietario para determinar quién puede cargar un recurso.
El encabezado Cross-Origin-Resource-Policy
acepta tres valores posibles:
Cross-Origin-Resource-Policy: same-site
Los recursos marcados como same-site
solo se pueden cargar desde el mismo sitio.
Cross-Origin-Resource-Policy: same-origin
Los recursos marcados como same-origin
solo se pueden cargar desde el mismo origen.
Cross-Origin-Resource-Policy: cross-origin
Cualquier sitio web puede cargar los recursos marcados como cross-origin
. (Este
value se agregó al
las especificaciones de CORP y COEP).
Política de abridor de origen cruzado
Política del abridor de origen cruzado
(COOP) te permite garantizar
que una ventana de nivel superior se aísle de otros documentos al colocarlos en una
grupo de contextos de navegación diferente, de modo que no puedan interactuar directamente con el
ventana de nivel superior. Por ejemplo, si un documento con COOP abre una ventana emergente, su
La propiedad de window.opener
será null
. Además, la propiedad .closed
de la
la referencia del abridor mostrará true
.
El encabezado Cross-Origin-Opener-Policy
acepta tres valores posibles:
Cross-Origin-Opener-Policy: same-origin
Los documentos marcados como same-origin
pueden compartir el mismo contexto de navegación
grupo con documentos del mismo origen que también se marcan de forma explícita como same-origin
.
Cross-Origin-Opener-Policy: same-origin-allow-popups
Un documento de nivel superior con same-origin-allow-popups
conserva las referencias a cualquier
de sus ventanas emergentes que no configuran COOP o que inhabilitan el aislamiento por
estableciendo un COOP de unsafe-none
.
Cross-Origin-Opener-Policy: unsafe-none
unsafe-none
es la opción predeterminada y permite que el documento se agregue al menú de apertura.
grupo de contexto de navegación, a menos que el objeto de apertura tenga un COOP de same-origin
.
Resumen
Si quieres tener acceso garantizado a funciones potentes, como SharedArrayBuffer
,
performance.measureUserAgentSpecificMemory()
o alta resolución
cronómetros con mayor precisión, solo recuerda
que tu documento debe usar COEP con el valor de require-corp
y
COOP con el valor de same-origin
. En caso de que no exista ninguna de estas opciones, el navegador
No garantizamos un aislamiento suficiente
para habilitar esas funciones potentes. Tú
puede determinar la situación de tu página comprobando si
self.crossOriginIsolated
muestra true
.
Consulta los pasos para implementar esto en el artículo Crea un sitio web "de origen cruzado" aisladas" usando COOP y COEP.