Ferramentas de desenvolvedor · Codificador e decodificador URL
encodeURI vs encodeURIComponent: quais caracteres cada um deixa sozinho
· Como funciona
codificação de URL javascript fluxo de trabalho do desenvolvedor
As duas funções JavaScript diferem em exatamente onze caracteres, e escolher a errada quebra um URL ou falha ao escapar de um valor. Esta postagem explica os conjuntos e fornece uma regra que você pode lembrar.
A pesquisa que retornou tudo porque o & em 'P&D' dividiu a consulta - um bug concreto da função errada
Uma pesquisa por P&D pode retornar acidentalmente resultados para R se o código construir ?q=P&D manualmente. O e comercial é um separador entre parâmetros de consulta; ele não é preservado como parte de q, a menos que você codifique o valor. Escolher encodeURI para esse pequeno pedaço é um erro, não um bug do servidor. A opção mais segura no código do aplicativo geralmente é URLSearchParams, mas compreender as duas primitivas JavaScript torna o código existente muito mais fácil de depurar.
O que ambas as funções compartilham - o conjunto não reservado que elas nunca tocam e a codificação percentual UTF-8 que ambas aplicam
Ambos os métodos deixam ASCII letras, dígitos e a pontuação não reservada - _ . ! ~ * ' ( ) intocado pelas regras de codificação de JavaScript. Eles convertem caracteres não ASCII em UTF-8 bytes antes de escrever trigêmeos percentuais: é torna-se %C3%A9, nem um único Latin-1 byte. Eles também codificam um espaço como %20. A codificação percentual trata da preservação da estrutura de um URI; não é HTML escape, validação de entrada ou proteção contra script malicioso na página receptora.
Os onze caracteres apenas encodeURI preservam — ; , / ? : @ & = + $ # e por que cada um tem significado estrutural em um URL
encodeURI preserva adicionalmente onze caracteres estruturais que encodeURIComponent codifica: ; , / ? :@&=+$#. Para um endereço completo, deixar a barra e o ponto de interrogação em paz preserva o caminho e a sintaxe da consulta. Para um valor de consulta, deixar & ou = passar alteraria a lista de parâmetros, enquanto um # sem escape pode iniciar um fragmento. As funções diferem precisamente porque uma se destina a um endereço inteiro e a outra a um componente dentro desse endereço.
Uma regra válida: valores obtêm encodeURIComponent, URLs completos obtêm encodeURI — e por que 'complete URL' é mais raro do que parece
Os valores quase sempre obtêm encodeURIComponent; endereços completos e já estruturados são o caso menos comum de encodeURI. Para um URL que você está construindo programaticamente, use URL API para manipular parâmetros de caminho e pesquisa em vez de concatenar uma mistura de partes codificadas e brutas. Não codifique um URL inteiro com encodeURIComponent e espere que barras e dois pontos continuem se comportando como separadores. Por outro lado, não alimente o termo de consulta de um usuário por meio do encodeURI e deixe seu E comercial ativo.
Exemplo resolvido: a mesma string em ambas as funções — uma tabela de saídas para um valor com espaços, &, / e acento
Considere P&D/café como um valor de consulta. encodeURIComponent retorna R%26D%20%2F%20caf%C3%A9, protegendo o "e" comercial e a barra. encodeURI retorna R&D%20/%20caf%C3%A9, preservando a pontuação estrutural; um prefixo ingênuo ?q= agora criaria um delimitador não intencional. Ambos codificam o espaço e o acento, portanto, um teste usando apenas “hello world” perde a importante distinção. Compare as strings geradas em ToolAcre, cole-as em um analisador URL e verifique quantos parâmetros de consulta aparecem.
Erros comuns — codificar um URL completo com encodeURIComponent e decodificar com a contraparte errada
Codificar um URL completo como um componente produz %3A%2F%2F onde um consumidor esperava ://. Decodificar um endereço inteiro antes de validá-lo pode reintroduzir separadores reservados com novos significados. Evite também codificar duas vezes um valor que já contém %26: o próprio sinal de porcentagem pode se tornar %25, portanto, uma segunda camada de decodificação pode mudar de significado novamente. Emparelhe encodeURIComponent com decodeURIComponent para um componente e trate escapes percentuais malformados como erros de entrada.
O que isso não cobre – codificação de formulário com + e construção de URLs com URLSearchParams
A codificação de consulta de formulário HTML usa um sinal de mais para um espaço em application/x-www-form-urlencoded, que é distinto da saída %20 dessas duas funções. URLSearchParams lida com essas regras de formulário para você. Este artigo não cobre a normalização de caminho, a conversão de nome de host Unicode ou a decisão se um URL decodificado é seguro para solicitação; A codificação URL é uma etapa de representação, não uma política de autorização.
Conclusão: codifique as partes, não o todo - como o codificador e decodificador URL mostra os dois modos para que você possa ver a diferença em sua própria entrada
O limite memorável é partes versus todo: um valor de parâmetro é uma parte, portanto use encodeURIComponent ou URLSearchParams. O codificador e decodificador URL mostra as duas funções do navegador para a mesma string e mantém o experimento local. Teste a entrada contendo &, =, #, barra e um acento antes de decidir se dois codificadores são intercambiáveis.