Base64 y codificación de URLs explicadas con ejemplos

Muchos sistemas de Internet se diseñaron para transportar texto simple: el correo electrónico, las URLs, las cabeceras HTTP. Cuando hay que enviar por ellos datos binarios (una imagen) o caracteres especiales (una tilde, un espacio, un &), se necesita una codificación que los convierta en caracteres seguros. Las dos más comunes son Base64 y la codificación porcentual (URL encoding). En esta guía explicamos cómo funcionan, cuándo usarlas y los errores más frecuentes.

Qué es Base64

Base64 representa cualquier secuencia de bytes usando solo 64 caracteres seguros: A–Z, a–z, 0–9, + y /, más = como relleno.

Cómo funciona

1. Se toman los datos en grupos de 3 bytes (24 bits).
2. Se dividen en 4 bloques de 6 bits.
3. Cada bloque (0–63) se sustituye por un carácter de la tabla.
4. Si al final sobran 1 o 2 bytes, se rellena con =.

Ejemplo: el texto Hola

Texto:   Hola
Base64:  SG9sYQ==

Hola tiene 4 bytes: el primer grupo de 3 (Hol) da SG9s, y el byte restante (a) da YQ más dos signos de relleno.

Con tildes, primero se convierte el texto a UTF-8: España → RXNwYcOxYQ==. Puedes probarlo con el codificador Base64.

Tamaño: +33 %

Como 3 bytes se convierten en 4 caracteres, el resultado ocupa unas 4/3 partes del original:

Tamaño Base64 ≈ ceil(n / 3) × 4

Un archivo de 300 KB pasa a ocupar unos 400 KB. Por eso un adjunto de 20 MB puede superar el límite de 25 MB de un correo: los adjuntos viajan en Base64. La guía para comprimir PDF lo tiene en cuenta.

Usos habituales

• Adjuntos de correo (MIME).
• Data URLs: incrustar una imagen pequeña dentro del HTML o CSS.
• Cabecera HTTP Basic Auth: Authorization: Basic dXN1YXJpbzpjbGF2ZQ== (que es solo usuario:clave codificado; por eso siempre debe ir sobre HTTPS).
• Tokens JWT, que usan la variante Base64URL.
• Claves y certificados en formato PEM.

Data URLs

<img src="data:image/png;base64,iVBORw0KGgo..." alt="icono">

Útiles para iconos muy pequeños (menos de 1–2 KB), porque evitan una petición HTTP. Para imágenes mayores son contraproducentes: pesan un 33 % más, no se cachean por separado y bloquean el HTML. La guía de optimización de imágenes explica mejores alternativas.

Base64URL

La variante para URLs y nombres de archivo sustituye + por - y / por _, y suele omitir el relleno =. Es la que usan los JWT. Si decodificas un JWT con un decodificador Base64 estándar puede fallar por esa diferencia.

Qué es la codificación porcentual (URL encoding)

Una URL solo puede contener un conjunto limitado de caracteres ASCII. Los demás, y los que tienen significado especial (?, &, =, #, /), deben codificarse cuando forman parte de un valor:

1. Se convierte el carácter a bytes UTF-8.
2. Cada byte se escribe como % seguido de dos dígitos hexadecimales.

Ejemplo: buscar “café & té” en un parámetro:

https://ejemplo.com/buscar?q=caf%C3%A9%20%26%20t%C3%A9

Sin codificar el &, el servidor entendería que empieza un nuevo parámetro. Usa el codificador de URL para codificar o decodificar valores.

encodeURI frente a encodeURIComponent

En JavaScript:

• encodeURIComponent() codifica un valor (un parámetro): también codifica /, ?, & y =.
• encodeURI() codifica una URL completa y respeta esos separadores.

Usar encodeURI para un parámetro es una fuente clásica de errores.

Codificar y decodificar en código

// JavaScript (navegador): btoa solo admite Latin-1, hay que pasar por UTF-8
const b64 = btoa(String.fromCharCode(...new TextEncoder().encode('España')));
const texto = new TextDecoder().decode(Uint8Array.from(atob(b64), c => c.charCodeAt(0)));

encodeURIComponent('café & té');   // "caf%C3%A9%20%26%20t%C3%A9"

# Python
import base64, urllib.parse
base64.b64encode('España'.encode()).decode()      # 'RXNwYcOxYQ=='
urllib.parse.quote('café & té')                   # 'caf%C3%A9%20%26%20t%C3%A9'

echo -n 'Hola' | base64          # SG9sYQ==
echo 'SG9sYQ==' | base64 -d      # Hola

Un detalle importante en la línea de comandos: sin -n, echo añade un salto de línea al final y el resultado cambia (SG9sYQo=). Es una causa frecuente de contraseñas o tokens “incorrectos” en archivos de configuración.

Errores frecuentes

• Creer que Base64 protege datos. No es cifrado ni hash; para contraseñas se usan funciones de hash como bcrypt o Argon2. La guía de contraseñas seguras lo explica.
• Doble codificación: %20 codificado otra vez se convierte en %2520.
• Mezclar codificaciones de texto: decodificar UTF-8 como Latin-1 produce España en lugar de España.
• Usar + para espacios fuera de formularios: en una ruta, + es un + literal.
• Slugs con tildes: técnicamente válidos, pero en URLs públicas es más práctico usar letras sin acentos (/guias/contrasena-segura).

Codificación en HTML: otra cosa distinta

No confundas estas codificaciones con las entidades HTML (&, <, ñ), que sirven para mostrar caracteres especiales dentro de una página. Cada contexto tiene la suya: entidades en HTML, codificación porcentual en URLs, escapes con barra invertida en JSON y Base64 para datos binarios. Aplicar la equivocada provoca textos con símbolos extraños o, peor, vulnerabilidades de inyección.

Resumen