Codificación de caracteres especiales en URL: una referencia para desarrolladores

Caracteres especiales en las URL

Las URL tienen una sintaxis estricta definida por el RFC 3986. Muchos caracteres tienen significados especiales o no están permitidos en ciertas partes de una URL. Comprender cómo codificar correctamente estos caracteres es esencial para crear aplicaciones web y API fiables.

El carácter de espacio

El carácter de espacio es el que se codifica con más frecuencia. Sin embargo, puede codificarse de dos maneras según el contexto:

• %20 - Codificación porcentual del RFC 3986, utilizada en las rutas de las URL y en la mayoría de los contextos
• + - Utilizado en el formato application/x-www-form-urlencoded (envíos de formularios HTML)

Al construir URL mediante código, es preferible usar %20 por coherencia. Al construir datos de formulario, la notación + es la estándar.

Análisis en profundidad de los caracteres reservados

El ampersand (&)

El ampersand separa los parámetros de consulta. Cuando un ampersand aparece en el valor de un parámetro, debe codificarse como %26 para evitar que se interprete como un separador. En contextos HTML, también debe codificarse como entidad mediante &.

El signo de interrogación (?)

El signo de interrogación separa la ruta de la cadena de consulta. Si un signo de interrogación aparece en el valor de un parámetro, debe codificarse como %3F. Ten en cuenta que encodeURI() NO codifica los signos de interrogación, mientras que encodeURIComponent() sí lo hace.

La almohadilla (#)

El símbolo de almohadilla inicia el identificador de fragmento. En las URL, cualquier # que aparezca en el valor de un parámetro de consulta debe codificarse como %23; de lo contrario, el navegador interpretará todo lo que le sigue como un identificador de fragmento y no lo enviará al servidor.

La barra diagonal (/)

Las barras diagonales separan los segmentos de la ruta. Cuando una barra aparece en el valor de un segmento de ruta (como un nombre de archivo que contiene una barra), debe codificarse como %2F. Ten en cuenta que algunos servidores pueden decodificar %2F y aun así tratarlo como un separador de ruta.

Caracteres Unicode

Los caracteres que no son ASCII se codifican convirtiéndolos primero a su secuencia de bytes UTF-8 y, a continuación, aplicando codificación porcentual a cada byte. Aquí tienes algunos ejemplos:

• e latina con acento agudo (e) → UTF-8: 0xC3 0xA9 → %C3%A9
• Carácter chino (zhong) → UTF-8: 0xE4 0xB8 0xAD → %E4%B8%AD
• Emoji (globo terráqueo) → UTF-8: 0xF0 0x9F 0x8C 0x8D → %F0%9F%8C%8D

Codificación en distintos componentes de la URL

Componente	Debe codificar	Ejemplo
Segmento de ruta	Espacios, ?, # y caracteres no ASCII	/path/my%20file
Clave de consulta	=, &, #, +, espacios	my%20key=value
Valor de consulta	&, #, +, espacios, =	key=hello%20world
Fragmento	Espacios y caracteres no ASCII	#section%20one

Errores habituales

• Olvidar codificar # en los valores de consulta (el resto de la URL se descarta de forma silenciosa)
• Codificar dos veces cadenas ya codificadas (lo que produce %2520 en lugar de %20)
• Usar encodeURI() en lugar de encodeURIComponent() para los valores de los parámetros
• No codificar + en los valores de consulta (se decodifica como un espacio)
• Suponer que todos los servidores tratan %2F de la misma manera en las rutas