Codificación URL vs codificación Base64: ¿cuál es la diferencia?
La codificación URL (percent-encoding) convierte los caracteres especiales de las URL al formato %XX según la RFC 3986. La codificación Base64 convierte datos binarios en una cadena de texto usando 64 caracteres ASCII según la RFC 4648. Cumplen propósitos distintos y no son intercambiables.
¿Qué es la codificación URL?
La codificación URL, también llamada percent-encoding, está definida por la RFC 3986 como el mecanismo para representar caracteres de un URI que no están permitidos o que tienen un significado especial. Cada carácter que se va a codificar se convierte en uno o más bytes (usando UTF-8), y cada byte se representa con un signo de porcentaje (%) seguido de dos dígitos hexadecimales en mayúsculas.
Por ejemplo, un espacio se convierte en %20, un ampersand se convierte en %26 y un carácter no ASCII como el símbolo del euro se convierte en %E2%82%AC (tres bytes UTF-8, cada uno codificado con percent-encoding).
// Ejemplos de codificación URL en JavaScript
encodeURIComponent('hello world'); // "hello%20world"
encodeURIComponent('price=10&qty=2'); // "price%3D10%26qty%3D2"
encodeURIComponent('cafe'); // "caf%C3%A9"
La codificación URL está diseñada específicamente para que las URL sean seguras y válidas. Solo codifica los caracteres que no están permitidos o que tienen significados reservados en los URI, dejando intactos los caracteres alfanuméricos y unos pocos símbolos seguros.
¿Qué es la codificación Base64?
La codificación Base64, definida por la RFC 4648, es un esquema de codificación de binario a texto que representa datos binarios usando un conjunto de 64 caracteres ASCII: A-Z, a-z, 0-9, + y /, con = usado para el relleno. Cada tres bytes de entrada producen cuatro caracteres de salida.
Base64 fue diseñado para transmitir datos binarios a través de canales que solo admiten texto de forma fiable, como el correo electrónico (MIME) o la incrustación de datos en XML/JSON. No es específico de las URL y codifica todos los bytes de entrada, no solo los caracteres especiales.
// Ejemplos de codificación Base64 en JavaScript
btoa('hello world'); // "aGVsbG8gd29ybGQ="
btoa('price=10&qty=2'); // "cHJpY2U9MTAmcXR5PTI="
// Para cadenas Unicode, codifica primero a UTF-8
function toBase64(str) {
return btoa(unescape(encodeURIComponent(str)));
}
toBase64('cafe'); // "Y2Fmw6k="
También existe una variante de Base64 segura para URL (Base64url) que reemplaza + por - y / por _, y que a menudo omite el relleno =. Esta variante se usa en los JWT, en los data URI dentro de las URL y en otros contextos donde los caracteres estándar de Base64 entrarían en conflicto con la sintaxis de las URL.
Diferencias clave
| Característica | Codificación URL | Codificación Base64 |
|---|---|---|
| Estándar | RFC 3986 | RFC 4648 |
| Propósito | Hacer que las URL sean seguras | Representar binario como texto |
| Qué codifica | Solo caracteres especiales/reservados | Todos los bytes de entrada |
| Formato de salida | Secuencias hexadecimales %XX |
A-Z, a-z, 0-9, +, /, = |
| Aumento de tamaño | Variable (solo crecen los caracteres codificados) | Siempre ~33% mayor |
| Reversible | Sí | Sí |
| Legible por humanos | Parcialmente (los caracteres no reservados se mantienen) | No |
| Segura para URL por defecto | Sí (por diseño) | No (contiene +, /, =) |
Cuándo usar cada una
Usa la codificación URL cuando necesites incluir caracteres especiales en una URL, como los valores de parámetros de consulta, los segmentos de ruta o los identificadores de fragmento. La codificación URL es la opción correcta para cualquier situación en la que los datos deban incrustarse dentro de la estructura de una URL.
Usa la codificación Base64 cuando necesites representar datos binarios (imágenes, archivos, payloads cifrados) como texto, incrustar contenido binario en JSON o XML, o transmitir datos a través de canales que solo admiten texto. Base64 también se usa en las cabeceras de autenticación HTTP Basic y en los JSON Web Tokens (JWT).
// Codificación URL: incrustar un término de búsqueda en una URL
const searchUrl = 'https://example.com/search?q=' +
encodeURIComponent('C++ & Java');
// "https://example.com/search?q=C%2B%2B%20%26%20Java"
// Base64: incrustar una imagen en CSS o HTML
const imageData = 'data:image/png;base64,iVBORw0KGgoAAAANS...';
// Base64: cabecera HTTP Basic Auth
const credentials = btoa('username:password');
const header = 'Authorization: Basic ' + credentials;
¿Se pueden combinar?
Sí, y en algunos casos es obligatorio. Si necesitas pasar datos codificados en Base64 como parámetro de una URL, la salida estándar de Base64 puede contener los caracteres +, / y =, que tienen significados especiales en las URL. Tienes dos opciones:
Opción 1: Codificar en URL la cadena Base64 antes de colocarla en la URL. El + se convierte en %2B, el / se convierte en %2F y el = se convierte en %3D.
Opción 2: Usar la variante Base64url (RFC 4648, sección 5), que reemplaza + por -, / por _ y elimina el relleno. Este es el enfoque que utilizan los JWT y muchas API modernas.
// Opción 1: codificar en URL el Base64 estándar
const base64 = btoa('binary data here'); // "YmluYXJ5IGRhdGEgaGVyZQ=="
const urlSafe = encodeURIComponent(base64);
// "YmluYXJ5IGRhdGEgaGVyZQ%3D%3D"
// Opción 2: codificación Base64url
function toBase64url(str) {
return btoa(str)
.replace(/\+/g, '-')
.replace(/\//g, '_')
.replace(/=+$/, '');
}
toBase64url('binary data here');
// "YmluYXJ5IGRhdGEgaGVyZQ"