Skip to Content
SNS Docs
Web

Opciones para guardar JWT

Existe varias maneras para guaradar el JWT, aqui veremos algunas.

1. LocalStorage

El localStorage es una forma de almacenamiento que permite guardar datos de forma persistente en el navegador. Los datos se mantienen incluso si el navegador se cierra y se vuelve a abrir.

Ventajas:

  • Persistencia: Los datos almacenados en localStorage no se eliminan incluso después de cerrar el navegador.
  • Simplicidad: Fácil de usar y acceder desde JavaScript.

Desventajas:

  • Vulnerabilidad a XSS: Los datos almacenados en localStorage son accesibles desde JavaScript, lo que significa que si un atacante puede inyectar código malicioso en tu aplicación (XSS), podría robar el JWT.
  • No se envía automáticamente en las solicitudes HTTP, por lo que necesitas incluirlo manualmente en los encabezados de las solicitudes.

Uso:

localStorage.setItem('jwt', 'tu-token-jwt-aqui');

const token = localStorage.getItem('jwt');

2. SessionStorage

Similar a localStorage, pero los datos almacenados en sessionStorage solo persisten durante la sesión de navegación (hasta que la pestaña del navegador se cierre).

Ventajas:

  • Similar a localStorage, pero los datos se eliminan automáticamente cuando se cierra la pestaña, lo que puede ser útil si no deseas que el JWT persista después de que el usuario cierre su sesión o la pestaña.

Desventajas:

  • Vulnerabilidad a XSS: Al igual que con localStorage, sessionStorage está accesible para JavaScript, lo que lo hace vulnerable a ataques de XSS.
  • No se envía automáticamente en las solicitudes HTTP, por lo que aún necesitas agregarlo manualmente a los encabezados.

Uso:

sessionStorage.setItem('jwt', 'tu-token-jwt-aqui');

const token = sessionStorage.getItem('jwt');

3. Cookies (HttpOnly)

Las cookies son una opción muy común para almacenar tokens de autenticación. Las cookies pueden ser configuradas con la bandera HttpOnly y Secure para mejorar la seguridad.

  • HttpOnly: Impide que el JWT sea accesible a través de JavaScript, lo que lo hace más seguro frente a ataques de XSS.
  • Secure: Solo envía la cookie a través de conexiones HTTPS, lo que previene el robo del token a través de redes no seguras.

Ventajas:

  • Seguridad contra XSS: Al establecer HttpOnly, el JWT no es accesible desde JavaScript, lo que lo hace mucho más seguro frente a ataques XSS.
  • Enviado automáticamente: Las cookies se envían automáticamente con cada solicitud HTTP al mismo dominio, por lo que no necesitas agregar el JWT manualmente en los encabezados de cada solicitud.

Desventajas:

  • Vulnerabilidad a CSRF: Si la aplicación no maneja adecuadamente las solicitudes cross-site (CSRF), un atacante podría realizar solicitudes maliciosas desde otro dominio utilizando la cookie del usuario.
  • No es persistente si no se configura con una fecha de expiración.

Uso:

Para almacenar un JWT de forma segura en una cookie con HttpOnly y Secure, normalmente se haría en el servidor:

  • En el backend (por ejemplo, en un servidor Node.js con Express):
res.cookie('jwt', 'tu-token-jwt-aqui', {
  httpOnly: true,    // No accesible desde JavaScript
  secure: true,      // Solo en conexiones HTTPS
  maxAge: 3600000    // Expira después de 1 hora
});

En el cliente (JavaScript), no necesitarías hacer nada especial, ya que el navegador se encarga de enviar la cookie automáticamente con las solicitudes HTTP.

4. IndexedDB (Avanzado)

IndexedDB es una base de datos del lado del cliente que permite almacenar grandes cantidades de datos estructurados. A diferencia de localStorage o sessionStorage, IndexedDB es más adecuado para almacenar datos más complejos, como objetos.

Ventajas:

  • Mayor capacidad de almacenamiento: A diferencia de localStorage o sessionStorage, IndexedDB puede almacenar grandes cantidades de datos.
  • No se expone a XSS: Si los datos se almacenan de manera adecuada, no están directamente accesibles desde JavaScript.

Desventajas:

  • Complejidad: Es más complejo de usar que localStorage y sessionStorage.
  • No tan común: Aunque es seguro y robusto, no es tan común para almacenar JWT debido a su mayor complejidad y a que otras opciones son más simples.

JSON Web Token (JWT)

Es un estándar abierto (RFC 7519) que define un formato compacto y autónomo para representar información de manera segura entre partes. JWT se utiliza para transmitir información entre dos entidades de manera segura, utilizando firmas digitales o encriptación.

URLs absolutas y relativas

Next Page

On this page

1. LocalStorageVentajas:Desventajas:Uso:2. SessionStorageVentajas:Desventajas:Uso:3. Cookies (HttpOnly)Ventajas:Desventajas:Uso:4. IndexedDB (Avanzado)Ventajas:Desventajas: