Riscos de HTML Dinâmico

O HTML dinâmico ocorre quando a aplicação renderiza strings de HTML diretamente no DOM, em vez de usar os componentes e elementos do framework.

Por que é perigoso?

Ao renderizar HTML dinâmico, você está contornando as proteções de escape automático do framework. Se a string de HTML contiver um script malicioso (XSS), o navegador o executará como se fosse parte do seu código legítimo.

Cenários Comuns

• Conteúdo de editores "What You See Is What You Get" (WYSIWYG).
• Mensagens ou artigos que permitem formatação básica (negrito, links).
• Renderização de documentos ou comunicados vindos de uma API.

---

Como fazer vs Como não fazer

✅ Como fazer

• Sempre que precisar renderizar HTML dinâmico, utilize uma biblioteca de sanitização (ex: DOMPurify) no momento da renderização.
• Se a formatação necessária for simples, considere usar Markdown em vez de HTML, renderizando com uma biblioteca que faça o escape automático de tags HTML.
• Utilize componentes que abstraem o HTML perigoso, como os do Design System.

❌ Como não fazer

• Jamais injete strings de dados de usuários diretamente no DOM sem tratamento.
• Não use dangerouslySetInnerHTML (React) ou v-html (Vue) sem passar o conteúdo por uma função de limpeza primeiro.
• Não confie que os dados "já vêm limpos do banco de dados"; a defesa em profundidade exige que o Front-end também faça sua parte.