Security by Design no Frontend React

O frontend não é “só interface” — é a primeira camada exposta a usuários, bots e ataques. Em projetos com LGPD, dados sensíveis e integrações enterprise, segurança começa no JSX, não depois do deploy.

Estas práticas vêm de dashboards de conformidade, portais de telecom e produtos com autenticação e scraping.

---

1. XSS: não confie em HTML dinâmico

dangerouslySetInnerHTML só com sanitização rigorosa (DOMPurify ou equivalente). Para conteúdo de usuário, prefira renderização estruturada:

tsxCopiar
// ❌ risco alto
<div dangerouslySetInnerHTML={{ __html: userBio }} />

// ✅ markdown sanitizado ou texto puro
<ReactMarkdown>{sanitizedContent}</ReactMarkdown>

Valide também URLs em href e src — javascript: ainda aparece em payloads maliciosos.

---

2. Tokens: memória vs. storage

Evite localStorage para access tokens em SPAs expostas a XSS. Padrões mais seguros:

• Cookies HttpOnly para refresh tokens (backend define Secure e SameSite)
• Access token de curta duração em memória (state/context)
• Rotação e revogação no servidor

Se o produto exige localStorage, documente o trade-off e combine com CSP restritiva.

---

3. Validação em camadas

O frontend valida para UX; o backend valida para segurança. Nunca inverta essa ordem:

tsCopiar
const emailSchema = z.string().email().max(254)
const parsed = emailSchema.safeParse(input)
if (!parsed.success) {
  setFieldError('email', 'E-mail inválido')
  return
}

Em formulários LGPD, valide também consentimento, finalidade e campos opcionais — dados pessoais mal formatados podem virar incidente.

---

4. Dependências e superfície de ataque

npm audit não basta. Revise também:

• Dependências com scripts postinstall suspeitos
• Scripts de terceiros via tag manager sem CSP
• Variáveis VITE_* — tudo isso fica exposto no client

Nunca coloque secrets em variáveis prefixadas com VITE_.

---

5. Headers e políticas no edge

Mesmo em SPAs estáticas, configure no CDN ou nginx:

• Content-Security-Policy (comece em report-only)
• X-Frame-Options ou frame-ancestors
• Referrer-Policy: strict-origin-when-cross-origin
• Permissions-Policy restritiva

O React não protege contra clickjacking — o edge sim.

---

Conclusão

Segurança no frontend React combina renderização segura, gestão consciente de tokens, validação em camadas e políticas no edge.

Trate cada input como potencialmente malicioso, cada token como temporário e cada dependência como um ponto de risco. Produtos mais seguros também passam em auditorias com menos surpresas.