O encoding de URL, também conhecido como percent-encoding, é essencial para transmitir dados com segurança em URLs. Este processo converte caracteres que não são permitidos em URLs padrão (como espaços, caracteres especiais e letras acentuadas) em um formato que os servidores web podem entender. JavaScript fornece duas funções poderosas, encodeURI() e encodeURIComponent(), para lidar com isso de forma eficaz. Entender suas diferenças é fundamental para construir aplicativos web robustos e seguros.
Sumário
- Qual a diferença entre URI e URL?
- Codificando uma URL usando o método
encodeURI()em JavaScript - Codificando uma URL usando o método
encodeURIComponent()em JavaScript - Escolhendo o método de codificação correto
Qual a diferença entre URI e URL?
Embora frequentemente usados de forma intercambiável, URI (Uniform Resource Identifier) e URL (Uniform Resource Locator) são distintos. Um URI é um termo geral que identifica um recurso, enquanto um URL é um tipo específico de URI que localiza um recurso especificando seu mecanismo de acesso (por exemplo, HTTP). Pense em um URI como o endereço e um URL como as instruções para esse endereço. Para fins práticos na codificação JavaScript, a diferença é mínima; ambos exigem codificação adequada para lidar com caracteres especiais.
Codificando uma URL usando o método encodeURI() em JavaScript
O método encodeURI() codifica um URI ou URL completo. Ele visa caracteres especiais que não são permitidos em caminhos de URL, parâmetros de consulta ou identificadores de fragmento, deixando caracteres geralmente considerados seguros (como barras /, pontos de interrogação ? e ampersands &) intocados.
let url = "https://www.example.com/search?q=hello world";
let encodedUrl = encodeURI(url);
console.log(encodedUrl); // Saída: https://www.example.com/search?q=hello%20world
encodeURI() substitui espaços por %20 (a representação codificada em porcentagem de um espaço). É adequado para codificar URLs inteiras, mas não componentes individuais que podem conter caracteres reservados.
Codificando uma URL usando o método encodeURIComponent() em JavaScript
encodeURIComponent() é mais agressivo, codificando todos os caracteres especiais, incluindo aqueles geralmente seguros em URLs. Isso o torna perfeito para codificar componentes individuais de URL (parâmetros de consulta ou identificadores de fragmento). Codificar a URL inteira com esse método resultaria em uma URL malformada.
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); // Saída: https://www.example.com/search?q=hello%20world%26%20special%20characters
Observe como encodeURIComponent() codificou todos os espaços e o ampersand. Isso evita comportamentos inesperados e vulnerabilidades de segurança ao construir URLs dinamicamente.
Escolhendo o método de codificação correto
Use encodeURI() para URLs inteiras e encodeURIComponent() para componentes individuais (parâmetros de consulta, identificadores de fragmento). O uso incorreto dessas funções pode criar URLs quebradas e erros do lado do servidor. Sempre decodifique a URL no lado do servidor para recuperar os dados originais.