Por qué hay que codificar las URL
Una URL solo puede contener un conjunto limitado de caracteres ASCII, y varios de ellos tienen una función. ? inicia la cadena de consulta, & separa parámetros, = separa un nombre de su valor, # inicia el fragmento y / separa los segmentos de la ruta. Si un término de búsqueda o un nombre de archivo contiene uno de estos caracteres, el navegador o el servidor lo interpreta como estructura y no como dato.
La codificación por porcentaje lo resuelve escribiendo el carácter problemático como % seguido de dos dígitos hexadecimales. Un espacio pasa a ser %20, & pasa a ser %26 y / pasa a ser %2F. Los caracteres fuera de ASCII se convierten primero a bytes UTF-8 y cada byte se codifica por separado, así que é pasa a ser %C3%A9 y un solo emoji se convierte en cuatro grupos %XX.
Situaciones en las que lo necesitas:
- Montar un enlace con una búsqueda, una URL de redirección o una dirección de correo como parámetro.
- Meter una URL dentro de otra URL, por ejemplo un valor
returnTooredirect_urien un flujo de inicio de sesión. - Depurar webhooks y enlaces de analítica que llegan como una sopa ilegible de
%. - Leer logs de servidor, donde las rutas solicitadas se registran codificadas.
Modo componente frente a modo URL completa
La casilla Codificar URL completa (mantener :/?&=) elige entre dos reglas distintas, y escoger la equivocada es el error más habitual.
Por defecto: codificar un componente
Con la casilla desmarcada, se codifica todo excepto letras, dígitos y - _ . ! ~ * ' ( ). Es la opción correcta para un único valor que irá detrás de = en una cadena de consulta o dentro de un segmento de ruta. El texto rock & roll/live se convierte en rock%20%26%20roll%2Flive, que puede ir sin problemas en ?q= sin romper la lista de parámetros.
URL completa
Con la casilla marcada, se conservan los caracteres que dan estructura a la URL: : / ? # & = + , ; @ $ y los de la lista anterior. Los espacios, las letras no ASCII y algunos otros se siguen codificando. Úsalo cuando tienes una dirección completa que es casi válida, por ejemplo https://example.com/files/annual report.pdf, y solo necesitas arreglar el espacio.
El modo URL completa no puede distinguir un & estructural de uno que forma parte de un valor. En https://shop.example/?q=salt & pepper el & se queda como está y el servidor recibe un parámetro roto. En ese caso, codifica solo el valor en modo componente y pégalo en la URL.
Espacios, signos más y doble codificación
Hay dos convenciones para los espacios. La codificación de rutas y de URL en general usa %20; los envíos de formularios HTML (application/x-www-form-urlencoded) usan +. Este codificador siempre produce %20, que cualquier servidor entiende en ambos sitios.
El decodificador convierte + en espacio antes de decodificar, porque eso es lo que significa en las cadenas de consulta de formularios. El efecto secundario: un signo más literal que nunca se codificó, como C++ en una ruta, se decodifica como espacios. Si el texto original contenía un signo más de verdad, debería haberse enviado como %2B, y esa forma se decodifica correctamente.
La doble codificación es la otra trampa clásica. El propio signo % se codifica como %25, así que volver a pasar por el codificador una cadena ya codificada convierte %20 en %2520. Si ves %25 seguido de dos dígitos hexadecimales en un enlace que no funciona, decodifícalo una vez y revisa el resultado.
Cuando falla la decodificación
«Cadena codificada no válida» aparece cuando un % no va seguido de dos dígitos hexadecimales, o cuando los bytes no forman UTF-8 válido. Causas típicas:
- Un enlace truncado, cortado en mitad de una secuencia
%C3%A9. - Un signo de porcentaje literal, como en
50% off, que nunca se codificó. - Texto codificado hace tiempo con una página de códigos heredada de un solo byte, como Windows-1251 o Latin-1, donde
ées%E9en lugar de%C3%A9.
En los dos primeros casos, arregla a mano la parte rota. Para las páginas de códigos heredadas no hay una solución automática fiable, porque el mismo byte significa letras distintas en páginas de códigos distintas.
Codificaciones relacionadas
La codificación por porcentaje no es lo mismo que Base64, que convierte bytes arbitrarios en una cadena compacta, ni que las entidades HTML como &, que sirven para texto dentro de HTML. Para direcciones legibles creadas a partir de títulos, un generador de slug da resultados más limpios que codificar: My Trip to Kraków se convierte en my-trip-to-krakow en lugar de My%20Trip%20to%20Krak%C3%B3w.
La codificación y la decodificación se ejecutan en tu navegador, así que los tokens o parámetros privados de la URL no se envían a ningún sitio.