Valor inválido X para o atributo “src” no elemento “iframe”: Caráter ilegal no fragmento: “#” não é permitido.

Um URL segue uma estrutura específica definida pela RFC 3986. O formato geral é:

scheme://host/path?query#fragment

O caráter # serve como delimitador que introduz a porção do fragmento do URL. Pode aparecer apenas uma vez nesta função. Uma vez que o parser encontra o primeiro #, tudo após ele é tratado como o identificador de fragmento. Um segundo # dentro desse fragmento é um caráter ilegal porque a produção de fragmento na especificação de URL não permite carateres # não escapados.

Este erro de validação surge comumente de:

• Carateres # duplicados — por exemplo, incluir acidentalmente duas marcas hash como /#?param=value#section.
• Strings de consulta mal colocadas — colocar ?key=value após o # em vez de antes dele. Embora isto possa funcionar nalguns roteadores de aplicações de página única, resulta na consulta ser parte do fragmento, e adicionar outro # depois disso cria um URL inválido.
• Erros de copiar-colar — montar URLs de múltiplas partes e inadvertidamente introduzir um # extra.

Isto é importante por várias razões. Os navegadores podem lidar com URLs malformados de forma inconsistente — alguns podem truncar silenciosamente ou ignorar parte do URL, enquanto outros podem falhar completamente ao carregar o recurso. O validador W3C assinala isto porque viola o requisito da especificação HTML de que o atributo src contenha um URL válido. URLs inválidos também podem causar problemas com tecnologias assistivas, partilha de links e ferramentas automatizadas que analisam o seu HTML.

Como corrigir

1. Localize todos os carateres # no URL e determine qual é o delimitador de fragmento pretendido.
2. Remova qualquer # duplicado que tenha sido adicionado por engano.
3. Mova os parâmetros de consulta antes do fragmento — a porção ?query deve vir antes do #fragment num URL bem formado.
4. Codifique em percentagem se necessário — se um # literal deve aparecer como dados dentro do fragmento ou valor de consulta (não como delimitador), codifique-o como %23.

Exemplos

Incorreto: múltiplos carateres #

O segundo # dentro do fragmento é ilegal:

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

Correto: consulta antes do fragmento

Mova a string de consulta antes do # para que o URL tenha uma estrutura adequada:

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

Correto: fragmento único, sem consulta

Se apenas precisar de um identificador de fragmento, use um único #:

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

Correto: codificação em percentagem de um # literal num valor

Se o próprio fragmento deve conter um # como dados (não como delimitador), codifique-o em percentagem:

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

Aqui, %23ff0000 representa a string literal #ff0000 dentro do valor do fragmento, que é válida porque o # está codificado.

Incorreto: roteamento baseado em hash com # duplicado

Alguns URLs de incorporação de aplicações de página única usam roteamento baseado em hash, que pode levar a hashes duplos acidentais:

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

Correto: use um fragmento único para a rota

Reestruture o URL para usar um único # com um caminho combinado:

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

Ou, se a aplicação o suportar, use roteamento baseado em caminho padrão:

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

Saiba mais:

MDN Reference

MDN - iframe element

→

MDN Reference

MDN - URL

→

WHATWG Spec

WHATWG HTML - iframe element

→