Valor incorrecto X para el atributo “src” en el elemento “iframe”: Carácter ilegal en fragmento: “#” no está permitido.

Una URL sigue una estructura específica definida por RFC 3986. El formato general es:

scheme://host/path?query#fragment

El carácter # sirve como delimitador que introduce la parte fragmento de la URL. Solo puede aparecer una vez en este rol. Una vez que el analizador encuentra el primer #, todo lo que viene después se trata como el identificador de fragmento. Un segundo # dentro de ese fragmento es un carácter ilegal porque la producción de fragmento en la especificación de URL no permite caracteres # sin escapar.

Este error de validación surge comúnmente por:

• Caracteres # duplicados — p.ej., incluir accidentalmente dos símbolos de almohadilla como /#?param=value#section.
• Cadenas de consulta mal colocadas — poner ?key=value después del # en lugar de antes. Aunque esto puede funcionar en algunos enrutadores de aplicaciones de una sola página, resulta en que la consulta sea parte del fragmento, y agregar otro # después de eso crea una URL inválida.
• Errores de copiar-pegar — ensamblar URLs desde múltiples partes e introducir inadvertidamente un # extra.

Esto importa por varias razones. Los navegadores pueden manejar URLs malformadas de manera inconsistente — algunos pueden truncar o ignorar silenciosamente parte de la URL, mientras que otros pueden fallar completamente al cargar el recurso. El validador W3C marca esto porque viola el requisito de la especificación HTML de que el atributo src contenga una URL válida. Las URLs inválidas también pueden causar problemas con tecnologías de asistencia, compartir enlaces y herramientas automatizadas que analizan tu HTML.

Cómo solucionarlo

1. Localiza todos los caracteres # en la URL y determina cuál es el delimitador de fragmento previsto.
2. Elimina cualquier # duplicado que se haya agregado por error.
3. Mueve los parámetros de consulta antes del fragmento — la parte ?query debe venir antes del #fragment en una URL bien formada.
4. Codifica como porcentaje si es necesario — si un # literal debe aparecer como datos dentro del fragmento o valor de consulta (no como delimitador), codifícalo como %23.

Ejemplos

Incorrecto: múltiples caracteres #

El segundo # dentro del fragmento es ilegal:

<iframe src="https://example.com/#?secret=123#abc"></iframe>

Correcto: consulta antes del fragmento

Mueve la cadena de consulta antes del # para que la URL tenga una estructura adecuada:

<iframe src="https://example.com/?secret=123#abc"></iframe>

Correcto: fragmento único, sin consulta

Si solo necesitas un identificador de fragmento, usa un solo #:

<iframe src="https://example.com/#abc"></iframe>

Correcto: codificación por porcentaje de un # literal en un valor

Si el fragmento en sí debe contener un # como datos (no como delimitador), codifícalo como porcentaje:

<iframe src="https://example.com/?secret=123#color=%23ff0000"></iframe>

Aquí, %23ff0000 representa la cadena literal #ff0000 dentro del valor del fragmento, lo cual es válido porque el # está codificado.

Incorrecto: enrutamiento basado en hash con # duplicado

Algunas URLs de embebido de aplicaciones de una sola página usan enrutamiento basado en hash, lo que puede llevar a hashes dobles accidentales:

<iframe src="https://app.example.com/#/dashboard#settings"></iframe>

Correcto: usa un solo fragmento para la ruta

Reestructura la URL para usar un solo # con una ruta combinada:

<iframe src="https://app.example.com/#/dashboard/settings"></iframe>

O, si la aplicación lo soporta, usa enrutamiento estándar basado en rutas en su lugar:

<iframe src="https://app.example.com/dashboard/settings"></iframe>

Más información:

MDN Reference

MDN - iframe element

→

MDN Reference

MDN - URL

→

WHATWG Spec

WHATWG HTML - iframe element

→