Si alguna vez copiaste un enlace y encontraste %20 donde debería haber un espacio, ya conoces la codificación de URL. Parece ruido, pero obedece una regla simple e importante que mantiene funcionando la web.
Por qué las URLs necesitan codificación
La especificación de las URLs permite solo un conjunto pequeño de caracteres: letras sin reservar, dígitos y algunos símbolos. Una URL viaja como texto plano a través de navegadores, proxies, servidores y registros, y todos esos sistemas deben ponerse de acuerdo sobre dónde termina la dirección y dónde empieza cada parte. Un espacio sin codificar parecería el final del enlace en un correo. Un & sin codificar se leería como el inicio de un nuevo parámetro. Los caracteres fuera de ASCII, como las letras acentuadas y los emojis que se usan en muchos idiomas, no están permitidos en absoluto en el formato original.
La solución es el percent-encoding. Cualquier byte inseguro se reemplaza por un signo de porcentaje seguido de su valor hexadecimal de dos dígitos. Un espacio (byte 0x20) se convierte en %20, una barra en %2F y un ampersand en %26.
Caracteres sin reservar
Algunos caracteres nunca necesitan codificarse. Son el conjunto sin reservar: las letras de la A a la Z y de la a a la z, los dígitos del 0 al 9 y los cuatro símbolos guion, punto, guion bajo y tilde. Codificarlos está permitido pero es inútil, y dos URLs que solo difieren en la codificación innecesaria de estos caracteres se consideran equivalentes.
Caracteres reservados
Otros caracteres tienen una función especial dentro de una URL y se llaman reservados: : / ? # [ ] @ ! $ & ' ( ) * + , ; =. La barra separa segmentos de ruta, el signo de interrogación inicia la cadena de consulta, el numeral inicia el fragmento, el ampersand separa parámetros y el signo igual separa un nombre de su valor.
Que un carácter reservado deba codificarse depende de dónde aparece. Una barra está bien en una ruta pero debe codificarse como %2F si forma parte del valor de un parámetro. Esta dependencia del contexto es el origen de la mayoría de los errores de codificación.
Cómo se codifica el texto no ASCII
Las letras como la e con acento agudo, la ñ o cualquier carácter de otro alfabeto se convierten primero en bytes con UTF-8, y luego cada byte se codifica con porcentaje. La e con acento ocupa dos bytes y por eso se convierte en %C3%A9. Un emoji puede ocupar cuatro bytes y produce doce caracteres de codificación.
Los navegadores suelen mostrar la forma decodificada y amigable en la barra de direcciones, pero lo que realmente viaja por la red es la versión codificada.
Espacios: %20 frente a más
El percent-encoding escribe el espacio como %20. También existe una convención más antigua de los formularios HTML, llamada application/x-www-form-urlencoded, en la que un espacio en una cadena de consulta se escribe como +. Ambas aparecen en la práctica. Un + significa "espacio" solo en cadenas de consulta codificadas como formulario; en una ruta es un signo más literal. Por eso, al decodificar datos de una cadena de consulta es importante saber qué convención usó quien los envió.
Un ejemplo práctico
Supón que quieres enlazar a una búsqueda de "tacos & burritos" en tu sitio. El valor de la consulta debe evitar que el ampersand se lea como separador:
https://example.com/search?q=tacos%20%26%20burritos
Sin codificación, ?q=tacos & burritos se cortaría en el primer espacio y se interpretaría como el parámetro q=tacos más un fragmento suelto.
Errores comunes
- Codificar una URL completa con una función pensada para valores individuales, que también escapa las barras y los dos puntos y rompe el enlace.
- Codificar dos veces el mismo valor, lo que convierte
%20en%2520. - Olvidar codificar la entrada del usuario antes de ponerla en un enlace, lo que puede romper la URL o incluso abrir la puerta a problemas de inyección.
- Suponer que una URL decodificada es segura de mostrar sin más comprobaciones.
Codifica y decodifica al instante
Cuando necesites inspeccionar o arreglar un enlace codificado, pégalo en el codificador y decodificador de URL. Convierte en ambos sentidos, maneja la convención del más como espacio y separa una URL en protocolo, host, ruta y parámetros para que veas exactamente qué contiene.
Entender el percent-encoding convierte esas misteriosas secuencias con % en algo legible y evita algunos de los errores más frustrantes del desarrollo web.