Acerca de este problema HTML
El Validador HTML de W3C verifica que las URLs en los atributos href se ajusten al estándar de URL (definido por WHATWG). Aunque los corchetes están permitidos en el componente host de una URL (para soportar direcciones IPv6 como [::1]), no son caracteres válidos sin escapar en la cadena de consulta — la parte de la URL que viene después del ?. Cuando el validador encuentra un [ o ] literal en la porción de consulta, lo marca como un carácter ilegal.
Este problema surge comúnmente al trabajar con APIs o frameworks del lado del servidor que utilizan corchetes en parámetros de consulta para representar arrays o estructuras de datos anidadas. Por ejemplo, cadenas de consulta estilo PHP como ?filter[name]=foo o ?ids[]=1&ids[]=2 contienen corchetes que deben codificarse para HTML válido.
Por qué importa esto
- Cumplimiento de estándares: El Estándar de URL de WHATWG incluye explícitamente los corchetes entre los caracteres que deben codificarse por porcentaje en cadenas de consulta. Las URLs inválidas causan fallos en la validación de W3C.
- Comportamiento del navegador: Aunque la mayoría de navegadores modernos son tolerantes y a menudo manejarán correctamente los corchetes sin escapar, depender de este análisis permisivo es frágil. Algunos clientes HTTP, proxies o servidores intermediarios pueden rechazar o alterar URLs con caracteres ilegales.
- Interoperabilidad: Las URLs codificadas son más seguras cuando se copian, comparten o procesan por herramientas como verificadores de enlaces, web scrapers o clientes de email que pueden realizar análisis estricto de URLs.
Cómo solucionarlo
Reemplaza cada corchete literal en la cadena de consulta con su forma codificada por porcentaje:
| Carácter | Codificado por porcentaje |
|---|---|
[ |
%5B |
] |
%5D |
Si estás generando URLs dinámicamente en un lenguaje del lado del servidor o JavaScript, usa la función de codificación apropiada (por ejemplo, encodeURIComponent() en JavaScript, urlencode() en PHP, o urllib.parse.quote() en Python) para manejar esto automáticamente.
Ejemplos
Incorrecto: corchetes literales en la cadena de consulta
<a href="https://example.com/search?filter[status]=active">Elementos activos</a>
Esto desencadena el error de validación porque [ y ] aparecen sin escapar en la consulta.
Correcto: corchetes codificados por porcentaje
<a href="https://example.com/search?filter%5Bstatus%5D=active">Elementos activos</a>
Reemplazar [ con %5B y ] con %5D resuelve el error. El servidor que recibe esta solicitud decodificará los valores de vuelta a filter[status]=active.
Incorrecto: parámetros estilo array con corchetes
<a href="/api/items?ids[]=1&ids[]=2&ids[]=3">Cargar elementos</a>Correcto: parámetros estilo array codificados
<a href="/api/items?ids%5B%5D=1&ids%5B%5D=2&ids%5B%5D=3">Cargar elementos</a>
Nota que además de codificar los corchetes, los caracteres & en atributos HTML deben escribirse como & para un marcado completamente válido.
Incorrecto: corchetes en un valor simple
<a href="search.html?q=[value]">Buscar</a>Correcto: corchetes codificados en un valor simple
<a href="search.html?q=%5Bvalue%5D">Buscar</a>Nota sobre corchetes en el host (uso válido)
Los corchetes son válidos en la porción host de una URL para direcciones IPv6. Lo siguiente no desencadena el error:
<a href="http://[::1]:8080/page">IPv6 localhost</a>El validador solo marca corchetes que aparecen en la cadena de consulta u otras partes de la URL donde no están permitidos.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.