Utilia
Categorías ▾
Idioma: es ▾

Generador de hash SRI

Genera hashes Subresource Integrity (SRI) sha384 de un archivo JavaScript o CSS y copia los atributos integrity y crossorigin listos para usar.

Pega el contenido del archivo o abre el propio archivo: esta herramienta no descarga URL. Leer un script de otro sitio exigiría que ese servidor lo permitiera (CORS) o que un servidor nuestro lo descargara por ti, y nada de lo que calculas aquí sale nunca de tu navegador. Calcula el hash del archivo exacto que vas a servir.

Calcular hash de

El texto se procesa como UTF-8. Los navegadores convierten los finales de línea de Windows (CRLF) en LF en el texto pegado, y un solo byte distinto rompe el hash: en caso de duda, abre el propio archivo.

Algoritmos

La URL solo se escribe en el fragmento, nunca se solicita. Déjala vacía para usar el nombre del archivo.

Cómo generar un hash SRI

  1. En Calcular hash de, elige Código pegado o Archivos.
  2. Pega el contenido exacto del script o de la hoja de estilos en Contenido del script o de la hoja de estilos y pulsa Generar hash SRI, o suelta uno o varios archivos .js y .css en la zona de carga. Los hashes se actualizan mientras escribes.
  3. Deja marcado SHA-384 (recomendado) o añade SHA-256 y SHA-512. Cada algoritmo marcado añade un elemento al valor.
  4. Elige la Etiqueta (automática según el nombre del archivo, <script>, <script type="module"> o <link rel="stylesheet">), escribe la URL del recurso para el fragmento (opcional) y elige el modo crossorigin.
  5. Copia el valor integrity o la etiqueta completa.
  6. Para comprobar una etiqueta que ya usas, pega su valor o la etiqueta entera en Comprobar un valor integrity existente (opcional).

Qué hace Subresource Integrity

Cuando una página carga un script desde una CDN, el navegador confía en lo que devuelva ese servidor. Si la CDN se ve comprometida o el archivo cambia, el código modificado se ejecuta con acceso total a tu página. Subresource Integrity (SRI, del W3C) cierra esa brecha: publicas el hash esperado del archivo en el atributo integrity, el navegador calcula el hash de lo que descarga y se niega a ejecutar el script o aplicar la hoja de estilos si ambos no coinciden.

<script src="https://cdn.example.com/lib.min.js"
        integrity="sha384-H8BRh8j48O9oYatfu5AZzq6A9RINhZO5H16dQZngK7T62em8MUt1FLm52t+eX6xO"
        crossorigin="anonymous"></script>

El valor es el nombre del algoritmo, un guion y el resumen (digest) en Base64 de los bytes del archivo. Ese ejemplo es el hash de alert('Hello, world.'); que aparece en la especificación SRI. Cuando se indican varios hashes, los navegadores solo tienen en cuenta el algoritmo más fuerte presente y aceptan el archivo si coincide cualquier hash de ese algoritmo. Así un sitio puede listar dos versiones de un archivo durante un despliegue.

Por qué hace falta crossorigin

Para un archivo de otro origen, el navegador solo puede comprobar su integridad si la respuesta se obtiene en modo CORS, así que la etiqueta necesita un atributo crossorigin y el servidor debe responder con una cabecera Access-Control-Allow-Origin. Usa anonymous (sin cookies) para las CDN públicas; use-credentials es para los raros recursos privados. Sin CORS, el navegador bloquea el archivo en lugar de cargarlo sin comprobar.

Por qué esta herramienta no descarga URL

Esta herramienta solo calcula el hash del código que pegas o de los archivos que abres. Descargar un script desde su URL dentro de la página solo funcionaría si ese servidor permite lecturas de otro origen, y sortear esa limitación exigiría un servidor que descargara el archivo por ti, que además vería lo que procesas. Aquí todo se ejecuta en tu navegador. Lo más sencillo es descargar el archivo exacto al que vas a hacer referencia (la misma versión y la misma compilación minificada) y abrirlo aquí.

Preguntas frecuentes

¿Qué algoritmo debo usar?

SHA-384 es la opción habitual y la que publican la mayoría de las CDN. SHA-256 y SHA-512 también son compatibles con todos los navegadores modernos. MD5 y SHA-1 no están permitidos en SRI.

Mi hash es correcto, pero el navegador sigue bloqueando el archivo. ¿Por qué?

Comprueba que el servidor envía Access-Control-Allow-Origin y que la etiqueta tiene crossorigin. Asegúrate también de que la CDN sirve exactamente los mismos bytes: una versión distinta, un minificador automático o la falta de un salto de línea final cambian el hash.

¿Por qué mi código pegado da un hash distinto del archivo?

Los navegadores convierten los finales de línea de Windows (CRLF) en LF en los campos de texto, y un editor puede añadir o quitar una marca de orden de bytes (BOM) o un salto de línea final. Abre el propio archivo para calcular el hash de sus bytes exactos.

¿Necesito SRI para los archivos de mi propio dominio?

SRI protege frente a cambios hechos después de calcular el hash, así que es más importante para los alojamientos de terceros. Para tus propios archivos, suele ser más cómodo un empaquetador (bundler) que genere los hashes al compilar.

¿SRI funciona con imágenes o fuentes?

El atributo integrity se admite en <script> y <link rel="stylesheet"> (y en <link rel="preload"> o modulepreload para esos recursos). Las imágenes y las fuentes no pueden usarlo.

Herramientas relacionadas