Cómo codificar y decodificar URL

Si alguna vez ha visto %20 en una URL donde deberia haber un espacio, o %C3%A9 donde pertenece un caracter acentuado, ha encontrado la codificacion de URL. Es una parte fundamental de como funciona la web, y entenderla le ayuda a depurar enlaces rotos, problemas de API y envios de formularios. Un codificador basado en navegador maneja todo el trabajo localmente sin subir sus datos a un servidor.

Lo que hace la codificacion de URL

Las URL solo pueden contener un conjunto limitado de caracteres de forma segura: letras (A-Z, a-z), digitos (0-9) y algunos caracteres especiales (-, _, ., ~). Todo lo demas (espacios, caracteres acentuados, emoji y simbolos como &, =, #, ?) debe convertirse a un formato seguro.

La codificacion de URL (tambien llamada codificacion porcentual) reemplaza los caracteres inseguros con un % seguido de sus valores de byte hexadecimales:

Cuando necesita codificacion de URL

• Parametros de consulta con caracteres especiales: una consulta de busqueda como precio > 100 & categoria = zapatos necesita codificacion para funcionar en una URL
• Caracteres no ingleses en URL: nombres, ciudades o contenido en otros idiomas deben ser codificados
• Solicitudes de API: al construir llamadas de API manualmente, los valores de parametros a menudo necesitan codificacion
• Depuracion: cuando una URL no funciona, decodificarla revela cuales son los valores reales
• Enlaces de correo (mailto:): las lineas de asunto y el texto del cuerpo en los enlaces mailto necesitan codificacion
• URI de redireccion OAuth: el parametro redirect_uri pasado a los proveedores OAuth debe estar completamente codificado
• Cargas utiles de webhook: cadenas de consulta en URL de webhook entregadas por servicios como Stripe o Slack
• Enlaces profundos a aplicaciones moviles: esquemas de URL personalizados para aplicaciones iOS/Android necesitan codificacion para un manejo seguro
• Consultas persistentes de GraphQL: consultas con hash anadidas como parametros de URL necesitan codificacion
• Cadenas de conexion PostgreSQL: contrasenas y otros caracteres especiales en valores DATABASE_URL

Como codificar y decodificar

1. Elija codificar o decodificar: seleccione la direccion. Elija encodeURIComponent para parametros de consulta o encodeURI para URL completas.
2. Pegue su entrada: ingrese el texto o URL. El resultado se actualiza instantaneamente.
3. Copie la salida: use el resultado en su codigo, solicitud de API o navegador.

Una breve historia de la codificacion de URL

La codificacion de URL fue definida por el RFC 1738 en diciembre de 1994, junto con la especificacion URL original. El RFC fue escrito por Tim Berners-Lee (inventor de la web) con la contribucion del Grupo de Trabajo URI de IETF. El esquema de codificacion original usaba valores de byte ASCII: cada caracter reservado o inseguro se codificaba como % seguido de dos digitos hexadecimales.

La codificacion se actualizo varias veces:

• RFC 1738 (1994): especificacion URL original, solo ASCII
• RFC 2396 (1998): sintaxis mas rigurosa, separa caracteres «reservados» de «no reservados»
• RFC 3986 (2005): especificacion URI actual, define dos modos de codificacion (ruta vs consulta), secuencias de bytes UTF-8 para no-ASCII
• Estandar URL WHATWG (en curso): la especificacion viviente estandar del navegador, usada por todos los navegadores modernos, reglas ligeramente diferentes al RFC 3986 para compatibilidad retroactiva

El cambio mas grande fue el paso a UTF-8 en el RFC 3986. Antes de eso, las URL codificadas eran solo ASCII, y los caracteres no latinos requerian soluciones alternativas (Punycode para dominios, IDN para direcciones internacionales). Hoy, una «é» acentuada en una URL se codifica como %C3%A9 (sus dos bytes UTF-8), no el byte Latin-1 %E9 que los sistemas mas antiguos producirian.

encodeURI vs encodeURIComponent vs encodeURIFull

JavaScript tiene tres funciones de codificacion con comportamiento sutilmente diferente:

En Python:

• urllib.parse.quote() es como encodeURI (preserva /, pero no :)
• urllib.parse.quote_plus() es como encodeURIComponent pero usa + para espacios
• urllib.parse.urlencode(dict) codifica cadenas de consulta completas

En otros idiomas:

Errores comunes

• Codificar toda la URL: si codifica https://example.com/search?q=hello, obtiene https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello que ya no es una URL funcional. Solo codifique los valores, no los caracteres estructurales.
• Doble codificacion: codificar una cadena ya codificada produce cosas como %2520 (el % se codifica como %25). Si su URL se ve mal, verifique si algo se esta codificando dos veces.
• Espacios como + vs %20: en application/x-www-form-urlencoded (cuerpos POST de formulario), los espacios se convierten en +. En las URL, los espacios se convierten en %20. La mayoria de los servidores aceptan ambos, pero algunos analizadores estrictos no.
• Codificar caracteres reservados incorrectamente: ?, #, &, = tienen significado especial en la sintaxis URL. Si aparecen en un valor, deben estar codificados; si aparecen como sintaxis, no deben estarlo.
• Olvidar decodificar al recibir: si codifica un valor, lo envia, luego su servidor lee ?q=hello%20world literalmente sin decodificar, su aplicacion ve hello%20world no hello world. La mayoria de frameworks decodifican automaticamente, pero verifique en codigo personalizado.
• Confusion del signo mas: + es un mas literal en segmentos de ruta y un espacio en cadenas de consulta. Codifique los signos mas reales como %2B en valores de consulta para evitar la ambiguedad.
• UTF-8 vs otras codificaciones: si su URL contiene «résumé» y el servidor espera Latin-1 en lugar de UTF-8, puede obtener mojibake. La web moderna es UTF-8; los sistemas heredados no.
• Limites de longitud de URL: aunque no hay limite estricto en la especificacion, los navegadores y servidores a menudo limitan las URL a 2048-8192 caracteres. Los datos fuertemente codificados pueden alcanzar limites mas rapidamente de lo esperado.
• Cookies y encabezados Referer: las URL se pasan en los encabezados Referer y pueden ser registradas. Los datos sensibles en las URL (contrasenas, tokens) se filtran a los registros y analiticas. Use cuerpos POST para datos sensibles.
• Nombres de dominio no ASCII: los dominios usan Punycode (RFC 3492), no codificacion porcentual. «münchen.de» se convierte en «xn--mnchen-3ya.de» en busquedas DNS, no «m%C3%BCnchen.de».

Ejemplos trabajados

Consejos

• Codifique valores, no URL enteras: si codifica una URL entera, las barras y los dos puntos que estructuran la URL tambien se codificaran, rompiendola. Solo codifique los valores dentro de los parametros de consulta.
• Doble codificacion: codificar una cadena ya codificada produce cosas como %2520 (el % se codifica como %25). Si su URL se ve mal, verifique si algo se esta codificando dos veces.
• Decodificar para depuracion: cuando una solicitud de API falla o una URL se ve confusa, decodifiquela para ver los valores reales de los parametros. Esto a menudo revela el problema inmediatamente.
• Use las funciones integradas de su lenguaje: en codigo de produccion, siempre use encodeURIComponent() (JavaScript), urllib.parse.quote() (Python) o URLEncoder.encode() (Java) en lugar de codificar manualmente.
• Pruebe con casos limite: pruebe entradas con espacios, acentos, emoji y caracteres especiales. Si su codificacion funciona para todos, funciona.
• Verifique en la barra de direcciones del navegador: pegue su URL codificada en un navegador. Si la pagina carga, la URL esta bien formada. Si no, su codificacion tiene un error.
• Use una biblioteca de cadenas de consulta para casos complejos: construir una cadena de consulta desde un diccionario u objeto (?a=1&b=2&c=3) es mas facil y mas seguro con una funcion de biblioteca (urlencode en Python, URLSearchParams en JavaScript) que con ensamblaje manual.
• Conozca la diferencia entre codificacion de ruta y consulta: una barra / en un segmento de ruta es estructural; en un valor de consulta, debe estar codificada. RFC 3986 tiene reglas diferentes para cada una.

Privacidad y URL confidenciales

El codificador y decodificador de URL se ejecutan completamente en su navegador. Las URL que pega, el procesamiento intermedio y la salida codificada/decodificada se quedan todos en su dispositivo. Nada se sube a un servidor, se registra o se comparte con nadie.

Esto importa porque las URL frecuentemente contienen datos extremadamente sensibles: claves y tokens de API en parametros de consulta, codigos de autorizacion OAuth que otorgan acceso a la cuenta, IDs de sesion, URL firmadas para buckets S3 privados con credenciales integradas, tokens de inicio de sesion magico, URL de restablecimiento de contrasena, URL internas de administracion que revelan estructura del producto, direcciones de correo electronico del cliente en enlaces de cancelacion de suscripcion, datos personales en envios de formularios. Los codificadores URL en la nube registran cada pegado, a veces los retienen para «mejora del servicio», y han estado involucrados en filtraciones reales donde tokens de autenticacion pegados fueron extraidos por atacantes monitoreando los registros. Un codificador basado en navegador tiene exposicion cero: la URL nunca sale de su maquina.

La codificacion basada en navegador tambien funciona sin conexion una vez cargada la pagina, util para codificar URL en aviones, en entornos seguros sin acceso a internet, o en cualquier lugar donde no pueda o no deba pegar URL portadoras de autenticacion en un servicio de terceros.