Generador de hashes SRI

Cómo generar un hash SRI

1. El modo SRI está seleccionado. En Hashes:, marca sha256, sha384 o sha512, uno o varios; sha384 viene marcado por defecto.
2. Suelta los archivos .js o .css con Entrada en Archivo. El tipo de etiqueta depende de la extensión del archivo.
3. O bien, con Entrada en Texto, pega el contenido del archivo en Contenido del archivo (pegar), elige la Etiqueta (<script> o <link rel="stylesheet">) e introduce la Ruta o URL desde la que se servirá el archivo.
4. Copia el valor integrity o la Etiqueta HTML completa. Si marcas varios algoritmos, aparecen separados por espacios en un mismo atributo.

Soltar el archivo es más fiable que pegarlo. Un cuadro de texto del navegador convierte los finales de línea CRLF en LF, y un salto de línea final que falta o sobra cambia el hash; la herramienta te recuerda ambas cosas.

Qué es el valor integrity

Un valor SRI es el nombre del algoritmo, un guion y el digest en Base64 de los bytes exactos del archivo. Para un archivo app.js que contiene una línea, console.log('hello');, seguida de un salto de línea:

<script src="https://cdn.example.com/app.js"
        integrity="sha384-eEqgsNuDqSzbarn2kIY7c4WH6zkoJrjJRQIhlYgVwRR+6Eb8tkfTItTNLlIjbE3O"
        crossorigin="anonymous"></script>

Sin el salto de línea final, la misma línea da el hash sha384-v393mDht/MNBowq0Z9UpetDvKE6u6EdCihklP1GZs66vL1YCFm1Z4Q4wJtb94rY9. El navegador descarga el archivo, calcula el hash del cuerpo recibido (después de quitar la compresión de transferencia gzip o Brotli, así que la compresión no influye) y se niega a ejecutarlo o aplicarlo si no coincide ninguno de los hashes indicados.

Cuándo merece la pena SRI

SRI te protege cuando otro sirve tu código: una CDN pública, un host de widgets de terceros, un bucket de almacenamiento compartido con otros equipos. Si ese servidor se ve comprometido y se sustituye el archivo, los navegadores bloquean el archivo modificado en lugar de ejecutarlo en tus páginas.

Encaja con archivos que nunca cambian en una URL dada, como library@1.2.3/dist/lib.min.js. No encaja con:

• URL como /latest/ o @1 que pasan a versiones nuevas.
• Respuestas que cambian según el navegador o la región, como algunos CSS de fuentes web que sirven reglas @font-face distintas según el user agent.
• Scripts que el proveedor actualiza en el mismo sitio a propósito, como muchos cargadores de analítica y de chat. Con ellos tienes que elegir entre SRI y las actualizaciones del proveedor.

Para tus propios archivos en tu propio dominio, SRI aporta poco: un atacante que puede cambiar el archivo normalmente también puede cambiar el HTML. Ahí la mejor herramienta es una Content Security Policy; el generador de nonces CSP y los hashes CSP de SHA-256 a Base64 cubren esa parte.

CORS y el atributo crossorigin

Un archivo de otro origen con atributo integrity debe descargarse en modo CORS, y el servidor debe permitirlo con Access-Control-Allow-Origin (normalmente * en las CDN públicas). Eso es lo que pide crossorigin="anonymous"; la etiqueta generada siempre lo incluye. Sin CORS, el navegador no puede leer los bytes para calcular el hash y bloquea el archivo, con un mensaje en la consola que indica el fallo de integridad o de CORS.

Los archivos del mismo origen no necesitan el atributo, pero tampoco les hace daño.

Generar hashes SRI en el build

Si tienes más de unos pocos archivos, calcula los hashes en el paso de build:

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

const crypto = require("crypto");
const fs = require("fs");

const integrity = "sha384-" +
  crypto.createHash("sha384").update(fs.readFileSync("app.js")).digest("base64");
console.log(integrity);

Ambos imprimen el valor eEqgsNuD… de arriba para el archivo de ejemplo. Los bundlers suelen tener un plugin que escribe el atributo en el HTML por ti, lo que mantiene los hashes al día en cada build. Para comprobar un valor que has recibido, suelta aquí el archivo y compara; la comparación es exacta, carácter a carácter.

Preguntas frecuentes