Codificación de URL: Guía Completa
La codificación de URL (también llamada codificación por ciento) es esencial para transmitir datos en URLs. Entender cuándo y cómo los caracteres deben codificarse previene enlaces rotos, vulnerabilidades de seguridad y errores de transmisión de datos.
¿Por Qué Codificación de URL?
Las URLs fueron diseñadas para texto ASCII y tienen caracteres reservados con significados especiales. El carácter ? inicia cadenas de consulta, & separa parámetros, = asigna valores y # marca fragmentos. Si tus datos contienen estos caracteres, deben codificarse para evitar mala interpretación. Imagina buscar "Tom & Jerry". Sin codificación, ?q=Tom & Jerry trataría el & como separador de parámetros, rompiendo la consulta. Correctamente codificado: ?q=Tom%20%26%20Jerry trata la cadena completa como un valor. Los caracteres no ASCII también deben codificarse. Las URLs solo pueden contener ASCII. Los caracteres internacionales como ü, 漢, или deben convertirse a bytes codificados por ciento para aparecer en URLs. Los espacios son un caso especial común. Pueden codificarse como %20 o a veces como + (pero solo en cadenas de consulta). La inconsistencia causa bugs frecuentes. Usa %20 para compatibilidad más confiable. Las implicaciones de seguridad son significativas. La entrada de usuario sin codificar en URLs puede permitir vulnerabilidades XSS, ataques de inyección y manipulación de URL. Siempre codifica contenido generado por usuario colocado en URLs.
Cómo Funciona la Codificación de URL
La codificación de URL reemplaza caracteres inseguros con signo de porcentaje seguido de dos dígitos hexadecimales. El espacio (ASCII 32, hex 20) se convierte en %20. El carácter & (ASCII 38, hex 26) se convierte en %26. Para caracteres UTF-8, el proceso es: convierte el carácter a bytes UTF-8, luego codifica por ciento cada byte. El carácter ü es bytes UTF-8 C3 BC, entonces se convierte en %C3%BC. El chino 中 es UTF-8 E4 B8 AD, entonces se convierte en %E4%B8%AD. Los caracteres seguros que no necesitan codificación son A-Z, a-z, 0-9 y estos: - _ . ~ (aunque algunas implementaciones también los codifican). Los caracteres reservados que deben codificarse cuando son literales incluyen: ! # $ & ' ( ) * + , / : ; = ? @ [ ]. Estos tienen significados especiales en URL, por lo que su uso literal requiere codificación. La codificación doble es un error común. Codificar una cadena ya codificada convierte %20 en %2520. Decodifica antes de recodificar o rastrea el estado de codificación cuidadosamente.
Funciones URL de JavaScript
JavaScript proporciona varias funciones de codificación de URL con diferentes comportamientos. Elegir la incorrecta rompe URLs o expone vulnerabilidades de seguridad. encodeURIComponent() es lo que normalmente quieres. Codifica todo excepto A-Z a-z 0-9 - _ . ! ~ * ' ( ). Úsalo para valores de parámetros: '?name=' + encodeURIComponent(userInput). encodeURI() codifica para URLs completas y deja caracteres reservados como : / ? & sin codificar. Úsalo para URLs completas: encodeURI('https://example.com/ruta?q=test'). Pero no manejará correctamente valores de parámetros que contengan caracteres reservados. La diferencia crítica: encodeURI('a&b') retorna 'a&b' (& permanece). encodeURIComponent('a&b') retorna 'a%26b' (& se codifica). Para la mayoría de casos de uso, encodeURIComponent es correcto para valores. Para decodificar usa decodeURIComponent() para valores individuales y decodeURI() para URLs completas. Las funciones heredadas escape() y unescape() están obsoletas y no manejan Unicode correctamente. Nunca las uses en código nuevo.
Probar la Herramienta
Codificador/Decodificador URL
Preguntas Frecuentes
Codificador/Decodificador URL
Preguntas Frecuentes →