Segurança

XSS + dangerouslySetInnerHTML

HTML externo DEVE ser sanitizado. Escapar só <script> não basta — XSS vem de dezenas de vetores.

Definição

XSS (Cross-Site Scripting) é a injeção de código JavaScript malicioso em uma página confiável. dangerouslySetInnerHTML é a API do React para inserir HTML cru — perigosa porque bypassa a proteção automática do JSX.

Problema → Solução

Problema

dangerouslySetInnerHTML sem sanitização permite injeção de scripts via onerror, onclick, href=javascript: etc.

Solução

Sanitizar com DOMPurify antes de renderizar. Limitar dangerouslySetInnerHTML a casos necessários.

Dica de entrevista

Tip

DOMPurify.sanitize() remove todos os vetores conhecidos de XSS. Sempre use antes de innerHTML.

Código

import DOMPurify from 'dompurify';

// ✅ SEGURO
function ConteudoSeguro({ html }) {
  const limpo = DOMPurify.sanitize(html);
  return <div dangerouslySetInnerHTML={{ __html: limpo }} />;
}

Perguntas de entrevista

Q.JSX é seguro contra XSS?▾

A.Sim, por padrão. {variavel} sempre escapa HTML automaticamente. <script> em string vira texto literal. Apenas dangerouslySetInnerHTML, eval(), e injeções via href/src bypassam isso.

Q.O que é CSP e como ajuda?▾

A.Content Security Policy é um header HTTP que restringe quais scripts/recursos podem executar. CSP bem configurada bloqueia XSS mesmo se a sanitização falhar — defesa em camadas.

Q.Quais são os 3 tipos de XSS?▾

A.1) Stored (script salvo no banco e renderizado para todos), 2) Reflected (script via URL params refletido), 3) DOM-based (manipulação client-side perigosa). DOMPurify protege contra todos.

Termos relacionados

7/122← →