Hacer que su sitio web sea «aislado de origen cruzado» utilizando COOP y COEP

Utilice COOP y COEP para configurar un entorno aislado de origen cruzado y habilitar funciones potentes como SharedArrayBuffer, performanceEn el caso de las webs, el término Performance o rendimiento, se refiere a la velocidad de carga o a la potencia de cálculo de un servidor, es decir, a la velocidad a la que se transmiten los datos del servidor al cliente. Razones para una buena performance Una web que se carga lentamente, puede animar a los clientes potenciales a abandonar la página. Para asegurar una interacción fluida, se tiene más.measureMemory()y la APIConcepto de API¿Qué es una API?Una API, siglas de Application Programming Interface o Interfaz de Programación de Apps, es un recopilatorio de código que se puede emplear para que varias apps se comuniquen entre ellas. Es algo que realiza una tarea equivalente a la interfaz de usuario al momento de promover la interacción entre persona y programa, solo que aplicado única y exclusivamente dentro del entorno del software.Aún cuando suene más de autoperfilado de JS.

13 abr 2020
Actualizado 1 de septiembre de 2020

Aparece en:
Seguro y a salvo

Algunas API web aumentan el riesgo de ataques de canal¿Qué es un canal?Es un punto de contacto entre la marca y sus públicos en la web. Pueden ser blogs, vídeos, comentarios en artículo, imágenes, contactos en redes sociales o cualquier otra forma de interacción de la web 2.0. más lateral como Spectre. Para mitigar ese riesgo, los navegadoresConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet más ofrecen un entorno aislado basado en opt-in¿Qué es opt-in?Proceso en permission marketing por el que un usuario consiente voluntariamente la inclusión de su cuenta de correo en una lista, generalmente rellenando un formulario de suscripción. En el caso de las comunicaciones comerciales, sólo pueden realizarse envíos de manera legal cuando existe una petición expresa del usuario. más llamado aislado de origen cruzado. Con un estado aislado de origen cruzado, la página web podrá utilizar funciones privilegiadas que incluyen:

El estado aislado de origen cruzado también evita modificaciones de
document.domain. (Poder alterar document.domain permite la comunicación entre documentos del mismo sitio y se ha considerado una laguna en la política del mismo origen).

Para optar por un estado aislado de origen cruzado, debe enviar los siguientes encabezadosConcepto de Encabezados¿Qué son los Encabezados?Los Encabezados, además conocidos como headers en inglés, son una parte fundamental del diseño de cualquier web, dado que consiste en la parte principal que se ve de esta al acceder, la parte de arriba de cualquier página. El lugar más visible y al que todos los usuarios que visitan un lugar de Internet acceden cuando entran en él, pudiendo tener así una imagen rápida más HTTPEl HTTP (Hyper Text Transfer Protocol) es un protocolo que se usa para transmitir datos en redes. HTTP es un estándar técnico generalmente aceptado que establece cómo un cliente web se comunica con un servidor para que los datos solicitados por el cliente puedan ser cargados y mostrados. Información general Junto con el URL y el HTML, HTTP es uno de los conceptos más importantes de Internet (www). Fue desarrollado más en el documento principal:

 require-corp
same-origin

Estos encabezados le indican al navegadorUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los más que bloquee la carga de recursos o iframes que no hayan optado por ser cargados por documentos de origen cruzado y eviten que las ventanas de origen cruzado interactúen directamente con su documento. Esto también significa que los recursos que se cargan en origen cruzado requieren suscripciones.

Puede determinar si una página web se encuentra en un estado aislado de origen cruzado examinando
self.crossOriginIsolated. (Esto funciona en Firefox pero aún no se ha implementado en Chrome).

Este artículo muestra cómo utilizar estos nuevos encabezados. En un artículo de seguimiento, proporcionaré más antecedentes y contexto.

Implemente COOP y COEP para aislar el origen cruzado de su sitio web

Integra COOP y COEP

Al habilitar COOP en un documento de nivel superior, las ventanas con el mismo origen y las ventanas abiertas desde el documento tendrán un grupo de contexto de exploración separado a menos que estén en el mismo origen con la misma configuración de COOP. Por tanto, el aislamiento se aplica a las ventanas abiertas.

Un grupo de contexto de navegación es un grupo de pestañas, ventanas o iframes que comparten el mismo contexto. Por ejemplo, si un sitio web (httpsHTTPS (protocolo de Transferencia de Hiper-Texto) es un protocolo que permite determinar una conexión segura entre el servidor y el cliente, que no puede ser interceptada por personas no autorizadas. En resumidas cuentas, es la versión segura de el http (Hyper Text Transfer Protocol) Cómo funciona Una conexión HTTP estándar en Internet puede ser fácilmente secuestrada por partes no autorizadas. El propósito de una conexión HTTPS es evitar esto: encriptar más://a.example) abre una ventana emergente (https://b.example), la ventana de apertura y la ventana emergente comparten el mismo contexto de navegación y tienen acceso entre sí a través de API DOM como
window.opener.

A partir de Chrome 83, la compatibilidad con DevTools dedicada aún no está disponible para COOP. Sin embargo, puede examinar window.opener === null desde la ventana abierta, o
openedWindow.closed === true desde la ventana de apertura para determinar si están en grupos de contexto de exploración separados.

2. Asegúrese de que los recursos tengan CORP o CORS habilitado

Asegúrese de que todos los recursos de la página estén cargados con encabezados HTTP CORP o CORS. Este paso es necesario para el paso cuatro, que habilita COEP.

Esto es lo que debe hacer según la naturaleza del recurso:

• Si se espera que se cargue el recurso solo del mismo origen, selecciona el Cross-Origin-Resource-Policy: same-origin encabezamiento.
• Si se espera que se cargue el recurso solo del mismo sitio pero de origen cruzado, selecciona el Cross-Origin-Resource-Policy: same-site encabezamiento.
• Si el recurso es cargado desde origen (s) cruzado bajo su control, selecciona el
  Cross-Origin-Resource-Policy: cross-origin encabezado si es posible.
• Para recursos de origen cruzado sobre los que no tiene control:
  • Utilizar el crossorigin atributoAtributo es una definición que se usa en varios campos de IT. Generalmente, un atributo se usa para describir un fichero o un campo de datos con más detalle. En la programación orientada a objetos, los atributos son una propiedad o característica que se puede asignar a un objeto (elemento). A través el uso de atributos se pueden asignar valores específicos a ciertos items. Áreas de aplicación Las tres áreas más en la etiqueta HTMLHTML (Hypertext Markup Language) se usa para estructurar el contenido de texto de un documento web. No sólo se marca el contenido, sino además la meta-información que describe este contenido. Las páginas HTML se almacenan normalmente en el directorio raíz del servidor. Cómo se creó En la era digital, a los usuarios les resulta difícil hallar su camino en las webs y hacer un seguimiento de las estructuras de las más de carga si el recurso se sirve con CORS.
  • Pídale al propietario del recurso que apoye a CORS o CORP.
• Para iframes, use los encabezados CORP y COEP de la siguiente manera:
  Cross-Origin-Resource-Policy: same-origin y Cross-Origin-Embedder-Policy: require-corp.

Antes de habilitar completamente COEP, puede hacer un ensayo usando el
Cross-Origin-Embedder-Policy-Report-Only encabezado para examinar si la política realmente funciona. Recibirás informes sin bloquear el contenidoEl contenido puede ser muy difícil de definir con precisión. Es una definición que se refiere a las declaraciones contenidas en un documento o publicación de cualquier tipo y puede incluir las tecnologías de la información y la comunicación. Esto cubre todos los tipos de medios como imágenes y texto. A parte de esto, en el campo de la optimización de motores de búsqueda, los términos duplicar contenido, contenido único, más incrustado. Aplique esto de forma recursiva a todos los documentos. Para obtener información sobre el encabezado HTTP solo para informes, consulte Observar problemas con la API de informes.

4. Habilite COEP

Una vez que haya confirmado que todo funciona y que todos los recursos se pueden cargar correctamente, aplique el Cross-Origin-Embedder-Policy: require-corp Encabezado HTTP a todos los documentos, incluidos los que están incrustados mediante iframes.

Determine si el aislamiento tuvo éxito con self.crossOriginIsolated

los self.crossOriginIsolated devoluciones de propiedad true cuando la página web está en un estado aislado de origen cruzado y todos los recursos y ventanas están aislados dentro del mismo grupo de contexto de navegación. Puede utilizar esta API para determinar si ha aislado correctamente el grupo de contexto de navegación y ha obtenido acceso a funciones potentes como performance.measureMemory().

Depurar problemas con Chrome DevTools

Para los recursos que se representan en la pantalla, como imágenes, es bastante fácil detectar problemas de COEP porque la solicitud se bloqueará y la página indicará que falta una imagen. Sin embargo, para los recursos que no necesariamente tienen un impacto visual, como guiones o estilos, los problemas del COEP pueden pasar desapercibidos. Para esos, use el panel DevTools Network. Si hay un problema con COEP, debería ver
(blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) en el Estado
columna.

Luego puede hacer clic en la entrada para ver más detalles.

Observar problemas con la API de informes

los API de informes es otro mecanismo a través del cual puede detectar varios problemas. Puede configurar la API de informes para indicar al navegador de sus usuarios que envíe un informe siempre que COEP bloquee la carga de un recurso o que COOP aísle una ventana emergente. Chrome ha admitido el
Report-To

encabezado desde la versión 69 para una variedad de usos, incluidos COEP y COOP.

1. Habilite 2 banderas en chrome://flags 2. Registre una prueba original

Habilitar 2 banderas en chrome://flags

• Informes de política de apertura de origen cruzado (#cross-origin-opener-policy-reporting)
• Informes de acceso a la política de apertura de origen cruzado (#cross-origin-opener-policy-access-reporting)

Registrar una prueba de origen

Las pruebas de Origin le permiten probar nuevas funciones y brindar comentarios sobre su usabilidad, practicidad y efectividad a la comunidad de estándares web. Para obtener más información, consulte el Guía de pruebas de Origin para desarrolladores web. Para inscribirse en esta u otra prueba de origen, visite el página de registro.

1. Solicita un token por tu origen.
2. Agrega el token a tus páginas. Hay dos maneras de hacerlo:
   • Agregar un origin-trial <meta> etiqueta al encabezado de cada página. Por ejemplo, esto puede verse así:
     <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">
   • Si puede configurar su servidorLos servidores son ordenadores centrales y potentes dentro del campo de la tecnología de la información que procesan y proporcionan software y archivos en una red. Desde el punto de vista de un cliente, varios ordenadores en una red pueden ponerse en contacto con el servidor central para conseguir la información solicitada. En la arquitectura cliente-servidor, el servidor puede ser un software que proporciona un servicio y se ejecuta en más, también puede agregar el token usando un Origin-Trial Encabezado HTTP. El encabezado de respuesta resultante debería verse así:
     Origin-Trial: TOKEN_GOES_HERE

Precaución:
Para utilizar la API de informes COOP, el token debe servirse como un encabezado HTTP en lugar de un <meta> etiqueta.

Para especificar dónde el navegador debe enviar informes, agregue el Report-To Encabezado HTTP a cualquier documento que se entregue con un encabezado HTTP COEP o COOP. los
Report-To El encabezado también admite algunos parámetros adicionales para configurar los informes. Por ejemplo:

 { group: 'coep_report', max_age: 86400, endpoints: [{ urlEl URL (Localizador Uniforme de Recursos), es una dirección definida que apunta a la posición de un archivo en un servidor y lo recupera. Las URL se introducen en un navegador web para ingresar a documentos en la web o se incrustan como hipervínculos dentro de un documento. Se puede usar un Permalink para que una URL esté disponible de forma permanente. Componentes de una URL • prefijo de protocolo más: 'https://first-party-test.glitch.me/report'}]},{ group: 'coop_report', max_age: 86400, endpoints: [{ url: 'https://first-party-test.glitch.me/report'}]}

El objeto de parámetros tiene tres propiedades:

group

los group nombres de propiedad sus diversos puntos finales de informes. Utilice estos nombres para dirigir un subconjunto de sus informes. Por ejemplo, en el
Cross-Origin-Embedder-Policy y Cross-Origin-Opener-Policy directivas, puede especificar el punto final relevante proporcionando el nombre del grupo a report-to=. Por ejemplo:

 require-corp; report-to="coep_report"
same-origin; report-to="coop_report"

Cuando el navegador encuentra esto, hará una referencia cruzada al report-to valor con el group propiedad en el Report-To encabezado para buscar el punto final. Este ejemplo de referencias cruzadas coep_report y coop_report para encontrar el punto final https://first-party-test.glitch.me/report.

Si prefiere recibir informes sin bloquear ningún contenido incrustado o sin aislar una ventana emergente, agregue -Report-Only a los encabezados respectivos: es decir Cross-Origin-Embedder-Policy-Report-Only y
Cross-Origin-Opener-Policy-Report-Only. Por ejemplo:

 require-corp; report-to="coep_report"
same-origin; report-to="coop_report"

Al hacer esto, cuando el navegador detecta recursos de origen cruzado que no tienen CORP o CORS, envía un informe utilizando la API de informes sin bloquear esos recursos debido a COEP.

De manera similar, cuando el navegador abre una ventana emergente de origen cruzado, envía un informe sin aislar realmente la ventana debido a COOP. También informa cuando diferentes grupos de contexto de navegación intentan acceder entre sí, pero solo en el modo «solo informe».

max_age

los max_age La propiedad especifica el tiempo en segundos después del cual se eliminarán los informes no enviados. El navegador no envía los informes de inmediato. En cambio, los transmite fuera de banda siempre que no haya otras tareas de mayor prioridad. los max_age evita que el navegador envíe informes que son demasiado obsoletos para ser útiles. Por ejemplo, max_age: 86400 significa que no se enviarán informes de más de veinticuatro horas.

endpoints

los endpoints propiedad especifica las URL de uno o más puntos finales de informes. El punto final debe aceptar CORS si está alojado en un origen diferente. El navegador enviará informes con un tipo de contenidoEl tipo de contenido se refiere al contenido de un archivo que se transfiere mediante de HTTP y se clasifica según una estructura de dos partes. Esta clasificación está estandarizada y publicada por la IANA (Internet Assigned Numbers Authority, que supervisa la asignación global de direcciones IP). Una definición alternativo es MIME. En esta circunstancia, el contenido de los datos se especifica según el MIME (Multipurpose Internet Mail Extensions). El más de application/reports+json.

Un ejemplo de la carga útil del informe COEP cuando se bloquea un recurso de origen cruzado se ve así:

[{
"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://first-party-test.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"
}]

Un ejemplo de carga útil de informe COOP cuando se abre una ventana emergente aislada se ve así:

[{
"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://first-party-test.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 contexto de navegación intentan acceder entre sí (solo en el modo «solo informe»), COOP también envía un informe. Por ejemplo, un informe cuando
postMessage() se intenta se vería así:

[{
"age": 51785,
"body": {
"columnNumber": 18,
"disposition": "reporting",
"effectivePolicy": "same-origin",
"lineNumber": 83,
"property": "postMessage",
"sourceFile": "https://first-party-test.glitch.me/popup.js",
"type": "access-from-coop-page-to-openee"
},
"type": "coop",
"url": "https://first-party-test.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://first-party-test.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

Utilice una combinación de encabezados HTTP COOP y COEP para optar por una página web en un estado aislado especial de origen cruzado. Podrás examinar
self.crossOriginIsolated para determinar si una página web se encuentra en un estado aislado de origen cruzado.

En las próximas versiones de Chrome, este estado aislado de origen cruzado evitará
alterando
document.domain

y le dará acceso a funciones poderosas como:

Mantendremos esta publicación actualizada a medida que se pongan a disposición nuevas funciones para este estado aislado de origen cruzado y se realicen más mejoras en DevTools en torno a COOP y COEP.