Sobre este problema HTML
Na estrutura de um URL, o símbolo @ tem um significado especial: separa o componente userinfo (nome de utilizador e palavra-passe) do host. Um URL com credenciais segue este padrão:
scheme://username:password@hostname/path
Quando o nome de utilizador ou palavra-passe contém um carácter @ — por exemplo, um endereço de e-mail usado como nome de utilizador — o navegador ou analisador de URL pode não conseguir determinar onde terminam as credenciais e onde começa o hostname. Por exemplo, em http://user@name:pass@example.com, não fica claro se o host é name ou example.com.
O URL Standard (mantido pela WHATWG) exige que qualquer @ que apareça dentro do componente userinfo seja codificado percentualmente como %40. A codificação percentual substitui o carácter literal por um % seguido do seu código ASCII hexadecimal (40 para @). Isto remove a ambiguidade e garante que todos os analisadores interpretam o URL de forma idêntica.
Embora os navegadores modernos possam tentar lidar com URLs ambíguos, o comportamento não está garantido como consistente em todos os user agents, verificadores de links ou clientes HTTP. Codificar adequadamente estes caracteres garante um comportamento fiável em todos os locais e mantém o seu HTML válido.
Nota: Incluir credenciais diretamente em URLs é geralmente desencorajado por razões de segurança, pois podem ser expostas no histórico do navegador, logs do servidor e cabeçalhos referrer. Considere métodos de autenticação alternativos quando possível.
Exemplos
❌ Incorreto: @ não codificado no nome de utilizador
<a href="http://user@name:password@example.com/path">Login</a>
Aqui, o analisador não consegue distinguir de forma fiável user@name como o nome de utilizador do @ que separa as credenciais do host.
✅ Correto: @ codificado percentualmente no nome de utilizador
<a href="http://user%40name:password@example.com/path">Login</a>
O @ dentro do nome de utilizador é codificado como %40, deixando apenas um @ literal para servir como delimitador antes do hostname.
❌ Incorreto: @ não codificado na palavra-passe
<a href="http://admin:p@ss@example.com/dashboard">Dashboard</a>
✅ Correto: @ codificado percentualmente na palavra-passe
<a href="http://admin:p%40ss@example.com/dashboard">Dashboard</a>❌ Incorreto: endereço de e-mail usado como nome de utilizador sem codificação
<a href="ftp://joe@example.org:secret@ftp.example.com/files">Files</a>
✅ Correto: endereço de e-mail com @ codificado percentualmente
<a href="ftp://joe%40example.org:secret@ftp.example.com/files">Files</a>
Para corrigir este problema, identifique cada carácter @ que apareça antes do @ final na secção de autoridade do URL e substitua-o por %40. O último @ na autoridade é o delimitador real e deve permanecer como um carácter literal.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.