Manipulação Segura do DOM

Embora o React e o Vue gerenciem o DOM para nós, às vezes precisamos interagir diretamente com ele (via refs ou document). Fazer isso de forma insegura pode abrir brechas para ataques XSS.

Por que evitar a manipulação direta?

A manipulação direta do DOM contorna as proteções de escape e gerenciamento de estado do framework, tornando o código mais difícil de manter e mais propenso a falhas de segurança.

---

Como fazer vs Como não fazer

✅ Como fazer

• Utilize textContent em vez de innerHTML ao alterar o texto de um elemento via ref:

  // Seguro: o navegador trata o valor como texto puro
  myRef.current.textContent = userProvidedString;

• Prefira usar o estado (useState) e o JSX do framework para realizar mudanças na interface.
• Se precisar ler valores do DOM, valide e sanitize esses valores antes de usá-los em outras partes da aplicação.

❌ Como não fazer

• Nunca use innerHTML para injetar dados que venham de fontes externas.
• Não use seletores globais (ex: document.getElementById) dentro de componentes React; utilize refs.
• Evite o uso de jQuery ou outras bibliotecas de manipulação de DOM que tenham um histórico de facilitar o uso inseguro de injeção de HTML.