SRI: SubResource Integrity

By @raulrenales

Hace unos días unos amigos que tienen varias plataformas de blogging me consultaron por un problema que estaban comenzando a tener con los recursos de terceros que utilizaban en sus webs. Básicamente el problema era que en un determinado recurso, el fabricante había tenido una brecha de seguridad y el recurso había quedado comprometido, de tal manera que todas las plataformas web que utilizaban el recurso incorporan unas funciones que permiten la subida de archivos y obtención de información.

La verdad que estaban un poco apurados, pero por suerte les hable de SRI (SubResource Integrity)

que es una característica que permite a los navegadores comprobar la integridad de los archivos
mediante un Hash que el desarrollador suministra en el tag de html y que es comparado con el
resultante del recurso que se quiere verificar.

CÓMO IMPLEMENTARLO

Cuando adjuntamos un recurso a nuestra web utilizamos diferentes tags html, en el caso del siguiente
ejemplo queremos adjuntar una librería de javascript. Como se puede observar uno de los parámetros
es integrity, al cual como valor se le pasa un Hash de tipo SRI:

<script src="https://javascript.com/libreria.js"    

integrity="sha384-oqVuAfXRKap7fdgcC34e2kM6+R9GqQ8K/uxy9rx723rf2345twwx4JwY8wC"

crossorigin="*"></script>

Al visitar la página, el navegador del usuario verificará la integridad del fichero comparando el
resultado de calcular el hash del mismo con el que el desarrollador ha suministrado en la propiedad
integrity.

Como complemento tenemos el Access-Control-Allow-Origin, que permite que el host de destino
sepa que la solicitud proviene de una fuente externa y cuál es esa fuente.
Access-Control-Allow-Origin se puede establecer en uno de tres valores:

• null, que niega todos los orígenes
• *, el operador comodín, que permite todos los orígenes
• Una lista de origen de uno o más orígenes separados por espacios.

Los siguientes ejemplos son todos los encabezados válidos.

• Access-Control-Allow-Origin: null
• Access-Control-Allow-Origin: *
• Access-Control-Allow-Origin: http://foo.example
• Access-Control-Allow-Origin: http://foo.example http://bar.example

OK, ¿COMO CALCULO EL SRI HASH?

Una vez que sabemos cómo utilizar integrity, vamos a ver como obtener los Hashes para suministrarle
la información.

Es posible obtener los Hashes utilizando OpenSSL mediante los siguientes comandos:

cat libreria.js | openssl dgst -sha384 -binary | openssl base64 -A

o con shasum usando:

shasum -b -a 384 libreria.js | awk '{print $ 1}' | xxd -r -p | base64

Si no te mola mucho el mundo comando, también existe la posibilidad de generar los Hashes
mediante la siguiente WEB: https://www.srihash.org/

Resultado de realizar el cálculo sobre una librería de Jquery:

CUADRO DE COMPATIBILIDAD CON NAVEGADORES:

En la siguiente tabla podemos ver la compatibilidad del parámetro integrity con los diferentes
navegadores que tenemos en el mercado.

Fuente: https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity