La codificación de URL, también conocida como codificación por porcentaje, es esencial para transmitir datos de forma segura dentro de las URL. Este proceso convierte caracteres que no están permitidos en las URL estándar (como espacios, caracteres especiales y letras acentuadas) en un formato que los servidores web pueden entender. JavaScript proporciona dos funciones potentes, encodeURI() y encodeURIComponent(), para manejar esto de manera eficaz. Comprender sus diferencias es clave para construir aplicaciones web robustas y seguras.
Tabla de contenido
- ¿Cuál es la diferencia entre URI y URL?
- Codificar una URL usando el método
encodeURI()en JavaScript - Codificar una URL usando el método
encodeURIComponent()en JavaScript - Elegir el método de codificación correcto
¿Cuál es la diferencia entre URI y URL?
Aunque a menudo se usan indistintamente, URI (Identificador uniforme de recursos) y URL (Localizador uniforme de recursos) son distintos. Un URI es un término general que identifica un recurso, mientras que una URL es un tipo específico de URI que localiza un recurso especificando su mecanismo de acceso (por ejemplo, HTTP). Piense en un URI como la dirección y en una URL como las indicaciones para llegar a esa dirección. Para fines prácticos en la codificación de JavaScript, la diferencia es mínima; ambos requieren una codificación adecuada para manejar caracteres especiales.
Codificar una URL usando el método encodeURI() en JavaScript
El método encodeURI() codifica un URI o URL completo. Se dirige a caracteres especiales que no están permitidos en las rutas de URL, los parámetros de consulta o los identificadores de fragmento, dejando intactos los caracteres que generalmente se consideran seguros (como las barras /, los signos de interrogación ? y las ampersands &).
let url = "https://www.example.com/search?q=hello world";
let encodedUrl = encodeURI(url);
console.log(encodedUrl); // Salida: https://www.example.com/search?q=hello%20world
encodeURI() reemplaza los espacios con %20 (la representación codificada en porcentaje de un espacio). Es adecuado para codificar URL completas, pero no componentes individuales que puedan contener caracteres reservados.
Codificar una URL usando el método encodeURIComponent() en JavaScript
encodeURIComponent() es más agresivo, codificando todos los caracteres especiales, incluidos los que generalmente son seguros dentro de las URL. Esto lo hace perfecto para codificar componentes individuales de URL (parámetros de consulta o identificadores de fragmento). Codificar la URL completa con este método daría como resultado una URL mal formada.
let urlBase = "https://www.example.com/search?q=";
let query = "hello world & special characters";
let encodedQuery = encodeURIComponent(query);
let completeUrl = urlBase + encodedQuery;
console.log(completeUrl); // Salida: https://www.example.com/search?q=hello%20world%26%20special%20characters
Observe cómo encodeURIComponent() codificó todos los espacios y la ampersand. Esto evita comportamientos inesperados y vulnerabilidades de seguridad al construir URL dinámicamente.
Elegir el método de codificación correcto
Use encodeURI() para URL completas y encodeURIComponent() para componentes individuales (parámetros de consulta, identificadores de fragmento). El mal uso de estas funciones puede crear URL rotas y errores del lado del servidor. Siempre decodifique la URL en el lado del servidor para recuperar los datos originales.