Você já se deparou com a necessidade de exibir tags HTML no frontend a partir de dados vindos do cadastro do admin?
Esse cenário é mais comum do que parece, especialmente quando trabalhamos com CMS, campos customizados ou integrações externas.
Em alguns casos, tags como <img> acabam sendo tratadas apenas como texto, resultando em uma exibição incorreta da interface.
❌ O problema
Ao salvar conteúdos contendo HTML diretamente no banco, como por exemplo:
<img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="..." title="" data-src="http://..." class="lazyload" /><noscript><img decoding="async" src="..." alt="..." title="" data-eio="l" /></noscript>
O frontend pode interpretar esse valor apenas como uma string.
Como consequência, a aplicação exibe literalmente o conteúdo da tag, em vez de renderizar o elemento HTML.
Ou seja, em vez da imagem, o usuário vê o texto <img src="..." /> na tela.
✅ A solução
Para resolver esse problema no React, é possível utilizar o atributo dangerouslySetInnerHTML.
Esse recurso permite que o React interprete uma string como HTML válido, renderizando corretamente seus elementos.
Exemplo de uso:
<div dangerouslySetInnerHTML={{ __html: STRING_AQUI }} />
Dessa forma, a string contendo HTML passa a ser interpretada como markup, e a tag <img> é renderizada corretamente no frontend.
⚠️ Atenção: cuidado com segurança
Apesar de eficiente, o uso de dangerouslySetInnerHTML exige atenção.
Esse método ignora a proteção padrão do React contra XSS, portanto:
-
Nunca utilize dados sem validação
-
Sanitizar o conteúdo é essencial
-
Evite usar com dados vindos diretamente do usuário
Quando bem aplicado, esse recurso resolve o problema sem comprometer a segurança da aplicação.
Conclusão
Quando tags HTML são retornadas como string no frontend, o problema geralmente está na forma como o React interpreta o conteúdo.
Utilizar dangerouslySetInnerHTML é uma solução válida e eficaz, desde que aplicada com responsabilidade.
Com validação e sanitização adequadas, é possível manter a flexibilidade do conteúdo sem abrir brechas de segurança.
Quer se aprofundar em Front-end e VTEX IO?
Na DFreedom, trabalhamos com uma formação prática e orientada ao mercado. Por isso, nosso foco está no desenvolvimento web e no ecossistema da VTEX. Assim, atendemos desde quem está começando até profissionais em nível avançado.
