Frameworks, UI e Renderização

A escolha do framework e a forma como renderizamos conteúdo impactam diretamente a superfície de ataque da aplicação.

---

1. Sanitização e Escape de HTML

O React e o Vue possuem mecanismos nativos de escape de HTML para evitar XSS. Ao renderizar uma variável entre chaves {variable}, o framework converte automaticamente caracteres como < em <.

✅ Como fazer

• Confie no escape automático do framework para a grande maioria dos casos.
• Use a biblioteca DOMPurify se precisar renderizar HTML de terceiros.

---

2. Riscos de HTML Dinâmico

Existem situações onde é necessário renderizar HTML puro (ex: conteúdo de um editor rico).

❌ Como não fazer (React)

// PERIGOSO: XSS iminente se 'userContent' não for tratado
<div dangerouslySetInnerHTML={{ __html: userContent }} />

❌ Como não fazer (Vue)

<!-- PERIGOSO -->
<div v-html="userContent"></div>

✅ Como fazer (Sanitização)

import DOMPurify from 'dompurify';

function MyComponent({ userContent }) {
  const cleanHtml = DOMPurify.sanitize(userContent);
  return <div dangerouslySetInnerHTML={{ __html: cleanHtml }} />;
}

---

3. Template Injection

Ocorre quando a entrada do usuário é usada diretamente como parte de um template do framework (comum em aplicações que renderizam templates no lado do servidor com linguagens como Mustache ou Handlebars).

---

4. Manipulação Segura do DOM

A manipulação direta do DOM via refs ou document.querySelector deve ser evitada. Se for necessária, nunca use innerHTML.

✅ Como fazer

• Use textContent ou innerText para alterar textos.

---

5. Upload e Renderização de Arquivos

Arquivos enviados por usuários podem ser vetores de ataque.

• Imagens: Verifique o tipo de arquivo no servidor.
• SVG: Extremamente perigoso, pois pode conter JavaScript. Sempre sanitize SVGs antes de renderizá-los ou use tags <img> (que não executam scripts internos) em vez de injetar o XML no DOM.
• Vídeos: Podem explorar vulnerabilidades nos codecs dos navegadores. Use apenas players e formatos homologados.