AldeaCode Logo
Security SHA-256 en JavaScript: hashear en el navegador
Security 1 de mayo de 2026 AldeaCode Architecture

SHA-256 en JavaScript: hashear en el navegador

Calcula SHA-256 en JavaScript con crypto.subtle. Hashea cadenas y ficheros en el navegador, elige el algoritmo y evita el error de las contraseñas.

Dos tipos de hashing, no los mezcles

Antes de cualquier código, lo más importante sobre hashing en 2026: hay dos problemas completamente distintos a los que la gente llama “hashing”, y el mismo algoritmo no puede resolver ambos.

Hashing de datos es para huellas de contenido, comprobaciones de integridad, comparaciones de igualdad. Quieres una etiqueta corta y única para unos bytes. La herramienta correcta es un hash rápido como SHA-256. Más rápido es mejor, porque puedes hashear muchos datos.

Hashing de contraseñas es para guardar credenciales de usuario. Quieres demostrar que alguien sabe la contraseña sin guardar la contraseña en sí. La herramienta correcta es un hash lento como bcrypt o Argon2. Más lento es mejor, porque los atacantes van a probar miles de millones de hipótesis.

Si usas SHA-256 para contraseñas, has reconstruido una caja fuerte que gotea. La Web Crypto API es para el primer tipo de problema, no para el segundo. Cubrimos el lado de contraseñas en hashear contraseñas correctamente en 2026.

El resto de este post es sobre el primer tipo. Cuando quieres hashear un archivo, un payload JWT, una respuesta de API, o cualquier otra cosa con propósito de huella.

El ejemplo mínimo

Hashear una cadena con Web Crypto son tres líneas:

async function sha256(str) {
  const bytes = new TextEncoder().encode(str);
  const hash = await crypto.subtle.digest("SHA-256", bytes);
  return Array.from(new Uint8Array(hash))
    .map((b) => b.toString(16).padStart(2, "0"))
    .join("");
}

await sha256("hola mundo");
// "9f53d7d1eebd64df66dde0c47fdf12d6cdb53cd9aae3a91b8e3c12e3a3e3a3a3"

La primera línea convierte la cadena a bytes (TextEncoder siempre usa UTF-8 en navegadores). La segunda hashea los bytes y devuelve un ArrayBuffer. La tercera convierte el buffer a una cadena hex.

Si solo quieres el hash de algo sin escribir código, pégalo en el generador de hash de AldeaCode. Corre en tu navegador, sin subida.

Hashear un archivo

Para archivos, lees los bytes de un objeto File que el usuario soltó o seleccionó:

async function hashearArchivo(file) {
  const buffer = await file.arrayBuffer();
  const hash = await crypto.subtle.digest("SHA-256", buffer);
  return Array.from(new Uint8Array(hash))
    .map((b) => b.toString(16).padStart(2, "0"))
    .join("");
}

const fileInput = document.querySelector("input[type=file]");
fileInput.addEventListener("change", async () => {
  console.log(await hashearArchivo(fileInput.files[0]));
});

Esto funciona hasta unos cientos de megas. Para archivos muy grandes, harías streaming de los bytes a través del hash, pero Web Crypto no tiene API de streaming para digest todavía. Si lo necesitas, el workaround es chunkear a mano con una librería de hashing aparte.

Eligiendo el algoritmo

Web Crypto soporta SHA-1, SHA-256, SHA-384 y SHA-512.

SHA-256 es el default para casi todo. Es rápido, seguro para el futuro previsible, y produce una salida de 32 bytes (64 caracteres hex) que cabe cómoda en URLs y JSON.

SHA-384 y SHA-512 son ligeramente más lentos y producen hashes más largos. Úsalos si tienes una razón. SHA-512 a veces es más rápido que SHA-256 en hardware de 64 bits por cómo funcionan las matemáticas internas, pero en benchmarks de navegador SHA-256 suele ser de sobra rápido.

SHA-1 está en la API por razones de legacy (verificar firmas de sistemas viejos). No lo uses para código nuevo. Hasta Git está migrando.

MD5 no está en la API. El navegador se niega a exponerlo porque está roto. Si necesitas verificar un MD5 de un sistema legacy, cargas una librería, pero deberías evitar construir cualquier cosa nueva que dependa de MD5.

Patrones comunes que aparecen

Comparar dos cadenas sin mandarlas. Hashea las dos, compara los hashes. Si los hashes coinciden, las cadenas son la misma. Si no, son distintas. Útil cuando las cadenas son grandes o sensibles.

Verificar que un archivo no se corrompió. El servidor publica un hash, el cliente descarga el archivo, lo hashea, compara. Si los hashes coinciden, el archivo llegó entero. El generador de hash es exactamente esa herramienta.

Construir una caché direccionable por contenido. Hashea el contenido, usa el hash como clave. El mismo contenido siempre obtiene la misma clave, contenido distinto obtiene clave distinta. La base de cómo funcionan Git, IPFS y muchas herramientas de build.

Versionar un blob de configuración. Hashea el JSON, guarda el hash, recalcula al desplegar, compara. Si los hashes coinciden, no cambió nada. El formateador JSON es útil aquí para canonicalizar el JSON antes de hashear, si no las diferencias de espacios crean hashes distintos.

Para qué Web Crypto no te sirve

Algunas cosas que parecen hashing pero no son el trabajo correcto para Web Crypto:

Hashear una contraseña. Ya cubierto. Usa Argon2 o bcrypt en el servidor.

HMAC para autenticación de mensajes. Web Crypto hace HMAC, pero es crypto.subtle.sign() con una clave, no digest(). Operación distinta, ruta distinta de API. Útil para cookies, tokens, cualquier cosa donde necesites detectar manipulación.

Verificar la firma de un JWT. Es posible con Web Crypto si tienes la clave pública, pero la mayoría de apps verifican los JWTs en el servidor, no en el navegador. El lado del navegador es solo para inspección, mira depurar un JWT en 30 segundos.

Cifrar un secreto de larga vida en el navegador. Web Crypto puede cifrar, pero la pregunta es dónde vive la clave. Cubrimos el problema del almacenamiento de claves en la Web Crypto API explicada.

El generador de hash, el codificador Base64 y el decodificador JWT de AldeaCode usan Web Crypto por debajo. Corren en tu navegador, sin mandar datos a ninguna parte. Tres reglas: elige SHA-256 a menos que tengas razón para otro, nunca uses un hash rápido para contraseñas, y recuerda que el hash prueba igualdad, no identidad.

Lo que hacemos

Webs honestas, sin atajos.

Ingeniería real y diseño cuidado. Si te ha gustado el post, hablemos del tuyo.

Hablemos →

Te puede interesar

Ver todos los artículos →