Acerca de este problema HTML
En la estructura de una URL, el símbolo @ tiene un significado especial: separa el componente userinfo (nombre de usuario y contraseña) del host. Una URL con credenciales sigue este patrón:
scheme://username:password@hostname/path
Cuando el nombre de usuario o contraseña contiene un carácter @ — por ejemplo, una dirección de correo electrónico usada como nombre de usuario — el navegador o analizador de URL puede no ser capaz de determinar dónde terminan las credenciales y dónde comienza el nombre del host. Por ejemplo, en http://user@name:pass@example.com, no está claro si el host es name o example.com.
El Estándar de URL (mantenido por WHATWG) requiere que cualquier @ que aparezca dentro del componente userinfo sea codificado por porcentaje como %40. La codificación por porcentaje reemplaza el carácter literal con un % seguido de su código ASCII hexadecimal (40 para @). Esto elimina la ambigüedad y asegura que todos los analizadores interpreten la URL de manera idéntica.
Aunque los navegadores modernos pueden intentar manejar URLs ambiguas, el comportamiento no está garantizado para ser consistente entre todos los agentes de usuario, verificadores de enlaces o clientes HTTP. Codificar correctamente estos caracteres asegura un comportamiento confiable en todas partes y mantiene tu HTML válido.
Nota: Incluir credenciales directamente en URLs generalmente se desaconseja por razones de seguridad, ya que pueden estar expuestas en el historial del navegador, logs del servidor y cabeceras de referencia. Considera métodos alternativos de autenticación cuando sea posible.
Ejemplos
❌ Incorrecto: @ no codificado en el nombre de usuario
<a href="http://user@name:password@example.com/path">Login</a>
Aquí, el analizador no puede distinguir de manera confiable user@name como el nombre de usuario del @ que separa las credenciales del host.
✅ Correcto: @ codificado por porcentaje en el nombre de usuario
<a href="http://user%40name:password@example.com/path">Login</a>
El @ dentro del nombre de usuario está codificado como %40, dejando solo un @ literal para servir como delimitador antes del nombre del host.
❌ Incorrecto: @ no codificado en la contraseña
<a href="http://admin:p@ss@example.com/dashboard">Dashboard</a>
✅ Correcto: @ codificado por porcentaje en la contraseña
<a href="http://admin:p%40ss@example.com/dashboard">Dashboard</a>❌ Incorrecto: dirección de correo electrónico usada como nombre de usuario sin codificar
<a href="ftp://joe@example.org:secret@ftp.example.com/files">Files</a>
✅ Correcto: dirección de correo electrónico con @ codificado por porcentaje
<a href="ftp://joe%40example.org:secret@ftp.example.com/files">Files</a>
Para corregir este problema, identifica cada carácter @ que aparece antes del @ final en la sección de autoridad de la URL y reemplázalo con %40. El último @ en la autoridad es el delimitador real y debe permanecer como un carácter literal.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.