Segurança

Segurança no Frontend

XSS, CSRF, CSP, tokens JWT, e as vulnerabilidades que entrevistas senior sempre cobram.

Definição

Segurança frontend cobre as principais vulnerabilidades: XSS (Cross-Site Scripting), CSRF (Cross-Site Request Forgery), injeção de conteúdo, e vazamento de dados sensíveis. React já previne a maioria dos XSS por default (escapa HTML automaticamente), mas dangerouslySetInnerHTML, eval() e href dinâmico são vetores de ataque que exigem atenção.

Problema → Solução

Problema

dangerouslySetInnerHTML com input do usuário não sanitizado. JWT armazenado em localStorage (acessível por XSS). URLs dinâmicas sem validação de protocolo: href={user.website} permite javascript: URLs.

Solução

Nunca confiar em input do usuário. Sanitizar HTML com DOMPurify antes de dangerouslySetInnerHTML. Armazenar tokens sensíveis em httpOnly cookies (inacessíveis via JS). Validar URLs: só http/https. Content Security Policy para bloquear scripts inline.

Dica de entrevista

Tip

Regra de ouro: tudo que vem do servidor ou do usuário é dado não confiável até prova em contrário. React sanitiza {expression} mas não sanitiza dangerouslySetInnerHTML, atributos href/src dinâmicos, e código executado via eval/Function.

Código

// ❌ Vulnerável a XSS
<div dangerouslySetInnerHTML={{ __html: userComment }} />
<a href={user.website}>Visitar</a> // javascript: URL

// ✅ Sanitizar antes de renderizar HTML
import DOMPurify from 'dompurify'
<div dangerouslySetInnerHTML={{
  __html: DOMPurify.sanitize(userComment)
}} />

// ✅ Validar URLs
function isSafeUrl(url: string): boolean {
  try {
    const parsed = new URL(url)
    return ['http:', 'https:'].includes(parsed.protocol)
  } catch {
    return false
  }
}
<a href={isSafeUrl(user.website) ? user.website : '#'}>Visitar</a>

// ✅ Tokens em httpOnly cookie (não localStorage)
// No servidor:
res.cookie('token', jwt, {
  httpOnly: true,   // inacessível para JS
  secure: true,     // só HTTPS
  sameSite: 'strict' // proteção CSRF
})

// No cliente: o cookie é enviado automaticamente
// fetch('/api/data', { credentials: 'include' })

Perguntas de entrevista

Q.Por que não armazenar JWT em localStorage?▾

A.localStorage é acessível por qualquer JavaScript na página. Se houver qualquer XSS (mesmo em dependência de terceiro), o atacante lê o token e o usa em outro lugar. httpOnly cookies não são acessíveis por JS — mesmo com XSS o atacante não consegue ler o valor. Tradeoff: httpOnly cookies requerem proteção CSRF (SameSite=Strict ou token CSRF).

Q.O que é Content Security Policy?▾

A.CSP é um header HTTP que define de onde recursos podem ser carregados e se scripts inline são permitidos. `Content-Security-Policy: default-src 'self'; script-src 'self' cdn.example.com` bloqueia scripts de outros domínios e inline. Previne XSS porque mesmo que o atacante injete <script>, o browser bloqueia a execução.

Q.Como React previne XSS por default?▾

A.Todo {expression} em JSX é escapado automaticamente: <div>{userInput}</div> transforma < em < e > em >. Nunca executa como HTML. A exceção é dangerouslySetInnerHTML={{__html: content}} — aí é responsabilidade do dev sanitizar com DOMPurify antes. Outro vetor: <a href={url}> — validar que url começa com http:// ou https://, nunca javascript:.

Termos relacionados

79/122← →