Base64 en JavaScript: codificación, decodificación y casos de uso reales

#security #webdev #javascript #tutorial

Base64 aparece en todas partes del desarrollo web: imágenes incrustadas en CSS, tokens JWT, APIs REST, cabeceras de autenticación. Aquí tienes todo lo que necesitas saber.

Las funciones nativas: btoa() y atob()

// Codificar
btoa('Hola mundo');         // 'SG9sYSBtdW5kbw=='
btoa('toolrapido.com');     // 'dG9vbHJhcGlkby5jb20='

// Decodificar
atob('SG9sYSBtdW5kbw==');  // 'Hola mundo'

El problema: btoa() solo acepta caracteres ASCII. Con caracteres Unicode (tildes, ñ, emojis) lanza un error.

El problema con Unicode

btoa('Ñoño');  // ❌ InvalidCharacterError

La solución correcta en 2024 usa TextEncoder:

function toBase64(str) {
  const bytes = new TextEncoder().encode(str);
  const binary = Array.from(bytes, (b) => String.fromCharCode(b)).join('');
  return btoa(binary);
}

function fromBase64(str) {
  const binary = atob(str);
  const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
  return new TextDecoder().decode(bytes);
}

toBase64('Ñoño');           // 'w5Bvw5Bv' — funciona
fromBase64('w5Bvw5Bv');    // 'Ñoño'

Base64 URL-safe

El Base64 estándar usa +, / y = que necesitan escaparse en URLs. La variante URL-safe los reemplaza:

function toBase64URL(str) {
  return toBase64(str)
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=/g, '');
}

function fromBase64URL(str) {
  const padded = str + '='.repeat((4 - str.length % 4) % 4);
  return fromBase64(padded.replace(/-/g, '+').replace(/_/g, '/'));
}

Esta variante es la que usan los tokens JWT.

Data URLs: incrustar archivos en HTML/CSS

async function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result); // "data:image/png;base64,..."
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// Usar en una imagen
const img = document.createElement('img');
img.src = await fileToBase64(file);

Decodificar un JWT manualmente

function decodeJWT(token) {
  const [header, payload] = token.split('.');
  return {
    header: JSON.parse(fromBase64URL(header)),
    payload: JSON.parse(fromBase64URL(payload)),
  };
}

const token = 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMjMifQ.xxx';
decodeJWT(token).payload; // { sub: '123' }

Ojo: esto solo decodifica, no verifica la firma. Nunca confíes en el payload sin verificar el JWT en el servidor.

Cuándo NO usar Base64

Base64 aumenta el tamaño un 33%. No uses Base64 para:

Transferir archivos grandes (usa multipart/form-data)
Almacenar contraseñas (usa bcrypt/argon2)
Cifrar datos (Base64 no es cifrado, solo codificación)

Herramienta online

Si necesitas codificar o decodificar Base64 rápidamente sin escribir código, puedes usar este codificador Base64 gratuito que funciona en el navegador.

Resumen

Caso	Solución
ASCII simple	`btoa()` / `atob()`
Unicode (tildes, ñ)	`TextEncoder` + `btoa()`
URLs y JWT	Base64 URL-safe
Imágenes en HTML	Data URL con `FileReader`

DEV Community