¿Cuáles son los atributos de integridad y origen cruzado?


363

Bootstrapcdn cambió recientemente sus enlaces. Ahora se ve así:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 
rel="stylesheet" 
integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" 
crossorigin="anonymous">

¿Qué significan los atributos integrityy crossorigin? ¿Cómo afectan la carga de la hoja de estilo?

Respuestas:


237

Ambos atributos se han agregado a Bootstrap CDN para implementar la integridad del recurso secundario .

Subresource Integrity define un mecanismo por el cual los agentes de usuario pueden verificar que se haya entregado un recurso obtenido sin manipulación inesperada. Referencia

El atributo de integridad es permitir que el navegador verifique la fuente del archivo para asegurarse de que el código nunca se cargue si la fuente ha sido manipulada.

El atributo Crossorigin está presente cuando se carga una solicitud utilizando 'CORS', que ahora es un requisito de comprobación de SRI cuando no se carga desde el 'mismo origen'. Más información sobre crossorigin

Más detalles sobre la implementación de CDN de Bootstrap


2
Acabo de utilizar el validador h3ml de w3c y recibí este mensaje cuando utilicé el atributo "integridad":Attribute integrity not allowed on element link at this point.
Tomás González

99
@TomasGonzalez Creo que se puede asumir con seguridad que la herramienta W3C no ha sido actualizado para incluir soporte SRI por el momento
Josh_at_Savings_Champion

55
FYI: También archivé
jonathanKingston

72
Mantenedor del W3C HTML Checker (también conocido como validador) aquí. Sí, lo siento, el corrector aún no sabe nada sobre el integrityatributo. Pero pronto agregaré soporte para ello, como se solicitó en github.com/validator/validator/issues/151 . Por lo tanto, es posible que desee suscribirse a ese problema para recibir una notificación cuando llegue.
sidehowbarker

77
OnlineWebCheck.com admite el integrityatributo (soy el encargado de mantener ese corrector).
Albert Wiersch

112

integridad : define el valor hash de un recurso (como una suma de comprobación) que debe coincidir para que el navegador lo ejecute. El hash asegura que el archivo no se modificó y contiene los datos esperados. De esta forma, el navegador no cargará recursos diferentes (por ejemplo, maliciosos). Imagine una situación en la que sus archivos JavaScript fueron pirateados en el CDN, y no había forma de saberlo. El atributo de integridad impide cargar contenido que no coincide.

El SRI no válido se bloqueará (herramientas de desarrollador de Chrome), independientemente del origen cruzado. Debajo del caso NO CORS cuando el atributo de integridad no coincide:

ingrese la descripción de la imagen aquí

La integridad se puede calcular usando: https://www.srihash.org/ O escribiendo en la consola ( enlace ):

openssl dgst -sha384 -binary FILENAME.js | openssl base64 -A

crossorigin : define las opciones utilizadas cuando el recurso se carga desde un servidor en un origen diferente. (Ver CORS (Cross-Origin Resource Sharing) aquí: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS ). Cambia efectivamente las solicitudes HTTP enviadas por el navegador. Si se agrega el atributo "crossorigin", resultará en agregar origen: par clave-valor <ORIGIN> en la solicitud HTTP como se muestra a continuación.

ingrese la descripción de la imagen aquí

crossorigin se puede establecer en "anónimo" o "credenciales de uso". Ambos resultarán en agregar origen: en la solicitud. Sin embargo, este último garantizará que se verifiquen las credenciales. Ningún atributo de origen cruzado en la etiqueta dará como resultado el envío de una solicitud sin origen: par clave-valor.

Este es un caso cuando se solicitan "credenciales de uso" de CDN:

<script 
        src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
        integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" 
        crossorigin="use-credentials"></script>

Un navegador puede cancelar la solicitud si el origen cruzado está configurado incorrectamente.

ingrese la descripción de la imagen aquí

Enlaces
- https://www.w3.org/TR/cors/
- https://tools.ietf.org/html/rfc6454
- https://developer.mozilla.org/en-US/docs/Web/HTML / Elemento / enlace

Blogs
- https://frederik-braun.com/using-subresource-integrity.html
- https://web-security.guru/en/web-security/subresource-integrity


66
Muy útil respuesta!
Emiel Koning

44
Gracias por tu respuesta. ¡Me encantan los detalles técnicos!
Anh Tran

¿Cómo podemos saber si la integridad del archivo es la que aún no ha sido manipulada? ¿Algún consejo?
Vadi Taslim

@ yon.fun: no sugiera modificaciones para agregar sus propios enlaces. Somos bastante sensibles al posible spam aquí, incluso si su contenido es valioso.
halfer

1

Técnicamente, el atributo de integridad ayuda con eso: permite la verificación adecuada de la fuente de datos. Es decir, simplemente le permite al navegador verificar los números en el archivo fuente correcto con las cantidades solicitadas por el archivo fuente ubicado en el servidor CDN.

Yendo un poco más profundo, en el caso del valor hash cifrado establecido de esta fuente y su cumplimiento verificado con un valor predefinido en el navegador: el código se ejecuta y la solicitud del usuario se procesa con éxito.

Atributo de origen cruzado ayuda a los desarrolladores a optimizar las tasas de rendimiento de CDN, al mismo tiempo, protegiendo el código del sitio web de scripts maliciosos.

En particular, Crossorigin descarga el código del programa del sitio en modo anónimo, sin descargar cookies ni realizar el procedimiento de autenticación. De esta forma, evita la fuga de datos del usuario cuando carga el sitio por primera vez en un servidor CDN específico, que los estafadores de red pueden reemplazar fácilmente las direcciones.

Fuente: https://yon.fun/what-is-link-integrity-and-crossorigin/

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.