Ferramentas de desenvolvedor · Codificador e decodificador URL
Anatomia de um URL: esquema, autoridade, caminho, consulta e fragmento explicados
· Fundo
estrutura de URL padrões da web ferramentas de desenvolvedor
Cada decisão de codificação percentual depende de qual parte do URL um personagem está. Esta postagem nomeia os cinco componentes de RFC 3986, mostra o que cada delimitador significa e por que o fragmento nunca chega ao servidor.
Por que o mesmo # funciona em um lugar e destrói um link em outro - uma questão de componente, não de personagem
Um caractere hash (#) em URL significa coisas completamente diferentes dependendo de onde aparece. Dentro de um valor de string de consulta como ?search=C%23sharp, ele deve ser codificado para %23 para ser seguro. No final de um URL como https://example.com/page#section, ele marca o delimitador do fragmento e tudo depois dele é um fragmento. Um personagem, dois contextos, dois significados diferentes. É por isso que as decisões de codificação dependem de saber com qual parte do URL você está trabalhando.
O ponto de interrogação (?) também tem dupla natureza. Dentro de um caminho ou valor de consulta, ele deve ser codificado como %3F para aparecer como dados. Como um caractere literal entre o caminho e a string de consulta, é uma sintaxe estrutural. Compreender esses cinco componentes – esquema, autoridade, caminho, consulta e fragmento – é a base para o tratamento correto de URL.
Os cinco componentes: esquema, autoridade, caminho, consulta, fragmento — e os delimitadores que os separam
RFC 3986 define formalmente URLs como tendo cinco componentes: esquema, autoridade, caminho, consulta e fragmento, separados por delimitadores específicos. O esquema vem primeiro, seguido por ://,, depois a autoridade, depois /,, depois o caminho, depois ?, depois a consulta, depois # e depois o fragmento. Nem todos os componentes aparecem em todos os URL. Um URL mínimo pode ter apenas esquema e caminho, como "mailto:user@example.com". Um URL completo inclui todos os cinco.
Cada componente possui suas próprias regras de sintaxe. Dois pontos são reservados no esquema, uma barra no caminho e um "e" comercial na consulta. Os caracteres reservados precisam de codificação quando aparecem como dados: a barra nos valores do caminho torna-se %2F.
Dentro da autoridade - userinfo, host e port, e por que @ e: estão reservados lá
O componente de autoridade contém o endereço de rede do recurso: nome de usuário, senha, nome do host e porta. O formato é [userinfo@]host[:porta]. Userinfo e host são separados por @; host e porta são separados por:. Esses caracteres @ e : são reservados pela autoridade para delimitar esses subcomponentes. Se você tiver um nome de usuário contendo um símbolo @, ele deverá ser codificado em porcentagem antes de concatená-lo. Por exemplo, "user@email.com:password" como nome de usuário se tornaria "user%40email.com:password" antes do @ final.
O nome do host pode ser um domínio registrado como example.com, um endereço IP em decimal pontilhado como 192.0.2.1 ou um endereço IPv6 entre colchetes como [::1]. A porta é opcional; se omitido, o esquema determina o padrão (80 para http, 443 para https, etc.). A parte userinfo raramente é usada em URLs modernos, mas continua fazendo parte da sintaxe.
Segmentos de caminho e o significado de / - estrutura hierárquica e resolução de segmento de ponto
O caminho é uma sequência de segmentos separados por barras. O caminho /a/b/c possui três segmentos: a, b e c. Cada segmento pode conter caracteres não reservados, caracteres codificados por porcentagem ou determinados caracteres reservados que são seguros neste contexto. Uma barra dentro de um segmento deve ser codificada como %2F para evitar confusão com separadores de segmento. O caminho é hierárquico; isso implica que a é um local, então a/b é mais específico.
Os caminhos também suportam segmentos de pontos especiais: um único ponto (.) significa "diretório atual" e dois pontos (..) significam "diretório pai". Um caminho como ../../etc/passwd é resolvido para cima. URLs modernos e HTTP evitam usá-los, mas eles existem na sintaxe. Um segmento de caminho contendo um ponto literal ou um ponto duplo deve ser codificado em porcentagem se o significado literal do ponto não for pretendido.
Consulta e fragmento — convenções de valores-chave e por que o fragmento permanece no navegador
A string de consulta segue o caminho e começa com ?. Tradicionalmente, é uma série de pares chave=valor separados por &, embora a sintaxe na verdade não seja estruturada – qualquer coisa pode entrar em uma consulta. Se você tiver um valor contendo & ou =, esses caracteres deverão ser codificados em porcentagem para que não sejam confundidos com delimitadores. A consulta é enviada ao servidor; o servidor decide o que fazer com ele.
O fragmento segue a consulta e começa com #. Tudo depois de # é um fragmento e nunca chega ao servidor. O navegador manipula o fragmento localmente, geralmente para saltar para uma âncora nomeada ou para indicar o estado em um aplicativo de página única. Como o fragmento nunca chega ao servidor, considera-se que um URL com um fragmento diferente aponta para o mesmo recurso.
Exemplo resolvido: dissecando um longo URL do mundo real - rotulando cada componente e cada delimitador
Pegue o URL "https://user:pass@example.com:8080/path/to/page?search=hello&sort=date#results". O esquema é https. A autoridade é usuário:pass@example.com:8080, dividida em userinfo (usuário:pass), host (example.com) e porta (8080). O caminho é /path/to/page, com segmentos caminho, para e página. A consulta é search=hello&sort=date, contendo dois parâmetros O fragmento é resultados. Insira este URL no codificador e decodificador URL para ver como a ferramenta rotula e codifica cada componente.
Se a pesquisa contiver &, como ?search=R&D, ela se tornará ?search=R%26D quando codificada corretamente. Os caracteres codificados por porcentagem não criam limites visuais no texto, portanto, uma codificação e decodificação cuidadosas são absolutamente essenciais para uma análise correta.
O que isso não cobre — resolução de referência relativa e esquemas especiais como mailto: e data:
Referências relativas como "../page" ou "?query=value" são válidas dentro de HTML e interpretadas em relação ao documento atual, mas têm suas próprias regras de resolução separadas. Esquemas especiais como mailto:, data: e file: seguem regras completamente diferentes e não são URLs absolutos padrão.
Esta postagem se concentra apenas na estrutura absoluta padrão URL demonstrada pelo inspetor. As referências relativas precisam de uma base URL antes que seus componentes possam ser interpretados, enquanto esquemas como mailto e data não compartilham o mesmo formato de autoridade e caminho. Manter esses casos separados evita que uma regra aprendida de um endereço HTTPS seja aplicada cegamente à sintaxe com diferentes delimitadores, etapas de resolução ou comportamento de transporte.
Conclusão: conheça o componente antes de codificar - como os modos de valor único e endereço completo do codificador e decodificador URL são mapeados nesta estrutura
O componente que você está codificando determina quais caracteres precisam ser escapados e quais são seguros. Uma barra é uma sintaxe literal no caminho, portanto, uma barra em um valor deve ser %2F. Nas consultas, & e = devem ser codificados se aparecerem em valores. O codificador e decodificador URL possui dois modos: "componente" para codificar um único valor e "endereço inteiro" para um URL completo. Use o modo de componente ao construir URLs concatenando partes; use o modo de endereço completo para verificar um URL existente.
Conhecer os cinco componentes e seus delimitadores permite escolher corretamente sempre que encontrar uma tarefa de codificação.