Lección 4
Base64 en URLs y data URIs
Variantes estándar vs URL-safe y uso del esquema `data:`.
URLs, cadenas de consulta y canales adyacentes a cookies tratan + y / de forma incómoda — y el relleno = interactúa mal con lógica de concatenación descuidada. Los dialectos especializados Base64URL reordenan el alfabeto para reducir necesidades de escape.
Esta lección separa MIME Base64, RFC 4648 URL-safe y patrones pragmáticos de uso de data:.
Alfabetos estándar vs URL-safe
Base64 clásico usa 62 → '+' y 63 → '/'.
Las implementaciones URL-safe (informalmente «base64url») típicamente:
- remapean
+' → '-' - remapean
/' → '_' - a menudo omiten el relleno cuando lo permite la especificación que sigues (JWS de JWT usa base64url sin relleno para los segmentos)
Nunca mezcles codificadores y decoders entre dialectos sin conversión. Un token generado con +// fallará al pegarse en un segmento de ruta a menos que apliques percent-encoding o cambies de alfabeto de forma consistente.
El percent-encoding sigue ocurriendo
Incluso Base64 URL-safe puede incluir caracteres que necesitan codificación en contextos estrictos de parser URL — guion y guion bajo se comportan mejor que más y barra pero no abolieron por completo las reglas de capas. Ensambla URLs siempre con APIs tipadas de construcción (URLSearchParams, helpers del framework) en lugar de plantillas de cadenas frágiles alrededor de payloads en bruto.
Comprobación rápida con JWT
Decodificar manualmente para aprender está bien — solo recuerda que header/payload JWT son bytes JSON UTF-8 → base64url sin relleno. Si ves +, quizá estás mirando salida PEM o MIME en su lugar.
URIs data:
Incrusta assets pequeños en línea:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
Partes:
| Parte | Significado |
|---|---|
| Pista de tipo MIME | Ayuda al navegador a interpretar bytes |
Sentinela ;base64, | Indica que lo que sigue son bytes codificados en Base64 |
| Payload | Fragmento ASCII concatenado (a menudo largo) |
Ventajas: menos peticiones HTTP para iconos microscópicos durante prototipado.
Desventajas:
- Se cachea por separado de las eficiencias de empaquetado de hojas de estilo
- Infla el HTML/CSS fuente de forma pronunciada (≈33% de inflación antes de efectos de gzip)
- Content Security Policy y clientes de correo pueden prohibirlo
En producción suele preferirse archivos estáticos con hash/CDN — no porque Base64 falle, sino porque los compromisos de ingeniería favorecen caché y separación.
Payloads muy grandes
URIs data: enormes degradan el rendimiento del editor y saturan la memoria del DOM. Streams, blobs y object URLs (URL.createObjectURL) encajan mejor binario grande en la plataforma web.
Idea clave
Los contextos URL presionan dos dimensiones: amabilidad del conjunto de caracteres y ergonomía del relleno. Elige la variante que exija tu especificación (JWT vs PEM vs MIME) y canaliza conversiones por bibliotecas probadas — no sustituciones ad hoc de cadenas que olvidan bytes límite. Prueba variantes estándar y URL-safe en la herramienta Base64.