¿Qué es la codificación URL?
Cada vez que ves %20 en una URL, estás viendo la codificación URL en acción.
La codificación URL (también llamada codificación porcentual) es el proceso de convertir caracteres que no están permitidos en las URL en un formato que puede transmitirse de forma segura. Reemplaza los caracteres no seguros con un signo % seguido de dos dígitos hexadecimales que representan el código ASCII del carácter.
Por ejemplo:
- Un espacio se convierte en
%20 - Un signo
@se convierte en%40 - Un hash
#se convierte en%23 - Una barra
/se convierte en%2F
Por eso, una búsqueda en Google de "hola mundo" produce una URL como:
https://www.google.com/search?q=hola%20mundo
El espacio entre "hola" y "mundo" no puede existir en una URL, por lo que se codifica como %20.
Por qué las URL necesitan codificación
Las URL tienen reglas estrictas sobre qué caracteres están permitidos. Estas reglas provienen de la RFC 3986, la especificación oficial para la sintaxis URI.
Caracteres seguros (no necesitan codificación)
Estos caracteres pueden aparecer en las URL sin codificación:
A-Z a-z 0-9
- _ . ~
Las letras, los números, los guiones, los guiones bajos, los puntos y las tildes siempre son seguros.
Caracteres reservados (deben codificarse cuando se usan como datos)
Estos caracteres tienen un significado especial en las URL:
| Caracter | Significado | Codificado |
|---|---|---|
| / | Separador de ruta | %2F |
| ? | Inicio de la query string | %3F |
| & | Separador de parámetros | %26 |
| = | Separador clave-valor | %3D |
| # | Identificador de fragmento | %23 |
| @ | Separador de información de usuario | %40 |
| : | Separador de puerto | %3A |
| + | Espacio (en formularios) | %2B |
Cuando estos caracteres aparecen como datos (no como elementos estructurales), deben codificarse.
Por ejemplo, si una consulta de búsqueda contiene &, debe codificarse:
# Mal — el & rompe la query string
?search=Tom & Jerry&page=1
# Correcto — el & en el término de búsqueda está codificado
?search=Tom%20%26%20Jerry&page=1
Caracteres no seguros (codificar siempre)
Estos caracteres nunca son seguros en las URL:
espacio " < > { } | \ ^ `
Siempre deben estar codificados en porcentaje.
Codificaciones comunes que verás
| Caracter | Codificado | Se ve en |
|---|---|---|
| Espacio | %20 o + | Consultas de búsqueda, nombres de archivos |
| @ | %40 | Direcciones de correo electrónico en URL |
| # | %23 | Hashtags, referencias de anclaje |
| & | %26 | Términos de búsqueda que contienen "and" |
| = | %3D | Valores que contienen signos igual |
| / | %2F | Rutas de archivos en parámetros de consulta |
| ? | %3F | Preguntas en consultas de búsqueda |
| % | %25 | El propio signo de porcentaje |
| + | %2B | Signos más en números de teléfono |
| é | %C3%A9 | Caracteres acentuados |
| 日 | %E6%97%A5 | Caracteres CJK (UTF-8) |
Espacio: %20 vs +
Hay dos formas de codificar un espacio en una URL:
%20— se usa en rutas de URL y en la codificación moderna+— se usa en envíos de formularios HTML (application/x-www-form-urlencoded)
Ambos representan un espacio, pero se utilizan en contextos diferentes:
Ruta de URL: /mi%20archivo.pdf ← %20
Query string: ?nombre=John+Doe ← + (codificación de formulario)
Query string: ?nombre=John%20Doe ← %20 (también válido)
Al decodificar, tu parser debe manejar ambos formatos.
Codificación URL en JavaScript
Codificación
JavaScript proporciona dos funciones:
// encodeURIComponent — codifica todo excepto A-Z a-z 0-9 - _ . ~
encodeURIComponent("hola mundo & adiós")
// → "hola%20mundo%20%26%20adi%C3%B3s"
// encodeURI — codifica pero preserva los caracteres estructurales de la URL
encodeURI("https://ejemplo.com/ruta?q=hola mundo")
// → "https://ejemplo.com/ruta?q=hola%20mundo"
Regla: Usa encodeURIComponent() para valores de parámetros de consulta. Usa encodeURI() para URL completas.
Decodificación
decodeURIComponent("hola%20mundo%20%26%20adi%C3%B3s")
// → "hola mundo & adiós"
decodeURI("https://ejemplo.com/ruta?q=hola%20mundo")
// → "https://ejemplo.com/ruta?q=hola mundo"
Codificación URL en Python
from urllib.parse import quote, unquote
# Codificación
quote("hola mundo & adiós")
# → "hola%20mundo%20%26%20adi%C3%B3s"
# Decodificación
unquote("hola%20mundo%20%26%20adi%C3%B3s")
# → "hola mundo & adiós"
Errores frecuentes
1. Doble codificación
Si codificas una cadena que ya está codificada, obtienes una doble codificación:
Original: hola mundo
Primera codificación: hola%20mundo
Doble codificación: hola%2520mundo ← %25 es la codificación de %
%2520 significa que el % de %20 se codificó nuevamente. Este es un error muy común que rompe las URL de forma silenciosa.
2. Codificar toda la URL
// Mal — también codifica :// y /
encodeURIComponent("https://ejemplo.com/ruta")
// → "https%3A%2F%2Fejemplo.com%2Fruta"
// Bien — solo codifica los valores de los parámetros
const base = "https://ejemplo.com/search";
const query = encodeURIComponent("hola mundo");
const url = `${base}?q=${query}`;
// → "https://ejemplo.com/search?q=hola%20mundo"
3. Olvidar decodificar
Al leer parámetros de URL, decodifícalos siempre:
// URL: ?nombre=John%20Doe
const params = new URLSearchParams(window.location.search);
const nombre = params.get('nombre');
// → "John Doe" (automáticamente decodificado)
URLSearchParams maneja la decodificación automáticamente. Si analizas las cadenas de consulta manualmente, debes llamar a decodeURIComponent() tú mismo.
4. No codificar las entradas del usuario
Si construyes URL a partir de la entrada del usuario sin codificarlas, los caracteres especiales pueden romper la URL o crear vulnerabilidades de seguridad:
// Peligroso — la entrada del usuario podría contener & o = u otros caracteres especiales
const url = `/search?q=${userInput}`;
// Seguro
const url = `/search?q=${encodeURIComponent(userInput)}`;
Esto es especialmente importante para prevenir ataques de inyección.
UTF-8 y caracteres internacionales
Las URL modernas admiten caracteres internacionales mediante la codificación UTF-8:
é → %C3%A9 (2 bytes en UTF-8)
ñ → %C3%B1 (2 bytes en UTF-8)
日 → %E6%97%A5 (3 bytes en UTF-8)
😀 → %F0%9F%98%80 (4 bytes en UTF-8)
Cada byte de la representación UTF-8 se codifica individualmente en porcentaje. Por eso los caracteres que no son ASCII producen cadenas largas codificadas.
Los navegadores modernos muestran caracteres internacionales en la barra de direcciones pero los envían codificados por la red.
Decodificar URL de forma segura
Cuando trabajes con URL que contengan datos sensibles (endpoints de API, rutas internas, parámetros de autenticación), ten cuidado con dónde las decodificas.
Los decodificadores de URL en línea procesan tus datos en sus servidores. Si tu URL contiene rutas de API internas, tokens de autenticación o parámetros de consulta sensibles, estás exponiendo esa información a un tercero.
Usa un decodificador que se ejecute completamente en tu navegador. Ningún dato debe salir de tu máquina.
El Decodificador URL de FmtDev procesa todo localmente. Tus URL nunca salen de tu navegador.
Puntos clave
- La codificación URL reemplaza los caracteres no seguros por
%seguido de valores hexadecimales. - Los espacios se convierten en
%20en las URL y en+en los envíos de formularios. - Usa
encodeURIComponent()para los valores de los parámetros yencodeURI()para las URL completas. - Ten cuidado con la doble codificación — rompe las URL de forma silenciosa.
- Codifica siempre la entrada del usuario antes de ponerla en una URL.
- Los caracteres internacionales se codifican como secuencias UTF-8 multibyte.
- Para URL sensibles, decodifica localmente — nunca uses herramientas en línea.