AldeaCode Logo
Developer Qué es la Web Crypto API: guía práctica
Developer 1 de mayo de 2026 AldeaCode Architecture

Qué es la Web Crypto API: guía práctica

Qué es la Web Crypto API, qué puede hacer SubtleCrypto, cuándo usarla y cuándo no. Almacenamiento de claves, límites y footguns reales explicados.

Qué es Web Crypto, en cristiano

Los navegadores modernos vienen con una caja de herramientas de criptografía incorporada. Tú no la instalaste, ya está ahí. Puede hashear datos, cifrar y descifrar, firmar y verificar firmas, y generar números aleatorios criptográficamente seguros.

Esto importa porque antes de que los navegadores trajeran esto, cualquiera que necesitara hacer cripto en una página web tenía que cargar una librería de JavaScript. Esas librerías eran grandes, lentas y a menudo tenían bugs sutiles. Ahora tienes una versión incorporada que es más rápida, auditada, y compartida entre todos los sitios.

La caja de herramientas se llama Web Crypto API. La parte interesante vive en window.crypto, y las operaciones pesadas viven en window.crypto.subtle.

Qué te da en realidad

Tres cosas útiles, en orden de cuánto las vas a usar.

Números aleatorios. crypto.getRandomValues() rellena un array con bytes aleatorios criptográficamente seguros. Esto es lo que usas para generar ids de sesión, tokens, salts de contraseña, cualquier cosa donde la predictibilidad de Math.random() plano sería un problema de seguridad.

Hashing. crypto.subtle.digest() calcula SHA-256, SHA-384 y SHA-512. Le das bytes, te devuelve un hash. Útil para huellas de contenido, comprobaciones de integridad, o igualdad rápida de dos trozos grandes de datos sin compararlos byte a byte.

Cifrado y firma. crypto.subtle.encrypt() y crypto.subtle.sign() manejan las operaciones más pesadas: cifrar datos con una clave, verificar una firma, hacer intercambio de claves. Aquí es donde tiras cuando estás implementando un protocolo real, no solo midiendo datos.

No hay atajo para hashear contraseñas en Web Crypto. Argon2 y bcrypt no son parte de la API. Si necesitas eso, tiras de una librería aparte. Web Crypto es genial para cripto general, no específicamente para contraseñas.

Lo que no hace

Algunas cosas que la gente espera de Web Crypto y que no puede hacer:

Hashear contraseñas. Mencionado arriba. Lo más cercano es PBKDF2, que es aceptable pero no genial. Para almacenamiento real de contraseñas, mira hashear contraseñas correctamente en 2026.

Algoritmos viejos. MD5 no está en la API. SHA-1 sí, pero solo para verificación de firmas legacy, no puedes calcular hashes SHA-1 nuevos. RC4 no está en la API. El navegador se niega a debilitar tu seguridad exponiendo algoritmos rotos.

Almacenamiento local cifrado. No hay una llamada “guarda esto cifrado en el navegador”. Puedes cifrar y descifrar a mano, pero el navegador no te gestionará la clave a largo plazo a menos que lo manejes tú.

Cifrado simétrico por bloques sin autenticación. AES-CBC está en la API, pero la recomendación moderna es AES-GCM, que autentica el cifrado además de cifrarlo. Usa AES-GCM a menos que tengas una razón muy específica para no hacerlo.

Un ejemplo rápido: hashear una cadena

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("hello world");
// "b94d27b9934d3e08a52e52d7da7dabfac484efe37a5380ee9088f7ace2efcde9"

Tres líneas hacen el trabajo: codifica la cadena a bytes, hashea los bytes, convierte los bytes del hash a hex.

Si solo quieres un hash de una cadena sin escribir código, el generador de hash de AldeaCode lo hace por ti, en tu navegador, sin subida.

Almacenamiento de claves: donde viven los footguns

Web Crypto genera y usa claves, pero no te da un sitio permanente para guardarlas entre cargas de página. Tienes algunas opciones, cada una con tradeoffs:

En memoria. La clave existe durante la vida de la pestaña. Cuando el usuario cierra la página, la clave desaparece. Bien para protocolos efímeros (intercambio de claves en una sola sesión). Inútil para cualquier cosa que el usuario espera que persista.

localStorage / IndexedDB. La clave persiste, pero cualquier script de la página puede leerla. Mismo problema que guardar JWTs en localStorage: una vulnerabilidad XSS se convierte en una fuga de clave.

Claves no extraíbles vía IndexedDB. La Web Crypto API puede marcar una clave como “no extraíble” y guardarla en el almacenamiento seguro del navegador. Tu código puede usarla a través de la API pero nunca leer sus bytes crudos. Esta es la opción más segura, pero solo algunas operaciones la soportan.

Llavero del sistema operativo. El navegador no expone el llavero del SO a JavaScript. Si necesitas eso, necesitas una app nativa o una extensión de navegador con permisos elevados.

Para la mayoría de webs, la respuesta correcta es “no guardes claves de larga vida en el navegador”. Las emites en el servidor, las mandas con cada sesión, dejas que expiren cuando la sesión termina. La Web Crypto API es entonces tu mejor amiga para usarlas, solo no para guardarlas.

Cuándo es Web Crypto la herramienta correcta

Es la correcta cuando:

  • Necesitas aleatoriedad criptográfica (úsala siempre para ids aleatorios, tokens, salts).
  • Estás calculando un hash para integridad o huella.
  • Estás implementando un protocolo que necesita cifrado o firma del lado cliente.
  • Estás verificando un valor firmado por el servidor antes de confiar en él.

No es la correcta cuando:

  • Necesitas hashear contraseñas (usa Argon2 o bcrypt en el servidor).
  • Necesitas almacenamiento local cifrado de larga vida (piensa bien si de verdad lo necesitas).
  • Te tienta “cifrar el JWT” antes de mandarlo (para eso está HTTPS).

El generador de hash, el codificador Base64 y el generador de UUIDs de AldeaCode usan Web Crypto por debajo. Son útiles cuando quieres el resultado sin escribir código, y los datos no salen de tu pestaña.

La Web Crypto API es esa rara feature de navegador que simplemente funciona, está auditada, y reemplaza una categoría de código de librería propenso a bugs con una sola pieza incorporada. Úsala para lo que es buena, rodéala para lo que no.

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 →