Aula 101 — Segurança no JavaScript (XSS)

Chegamos a um dos temas mais importantes de qualquer aplicação web:

segurança.

Nesta aula, vamos entender um dos ataques mais comuns da web:

Cross-Site Scripting (XSS).

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Entender o que é XSS
• Reconhecer como ele acontece
• Identificar pontos vulneráveis no código
• Aplicar boas práticas de prevenção
• Escrever JavaScript mais seguro

O que é XSS?

XSS (Cross-Site Scripting) é um tipo de ataque onde:

código JavaScript malicioso é executado dentro do navegador do usuário.

Isso acontece quando uma aplicação:

• confia em dados vindos do usuário
• insere esses dados no HTML sem validação

Por que XSS é tão perigoso?

Um ataque XSS pode:

• roubar cookies e tokens
• capturar dados digitados
• redirecionar o usuário
• alterar o comportamento da página

Tudo isso acontece:

sem que o usuário perceba.

Como o XSS acontece (conceito)

Imagine um campo de comentário que exibe exatamente o que o usuário digitou:

 <div id="comentarios"></div> 

 const comentario = entradaUsuario; // dado externo

document.getElementById("comentarios").innerHTML = comentario;

Se esse valor não for tratado, qualquer coisa digitada será interpretada como HTML.

Tipos comuns de XSS

• XSS Refletido — vem da URL ou formulário
• XSS Armazenado — salvo no banco de dados
• XSS DOM-based — acontece apenas no JavaScript

Nesta aula, focamos principalmente no XSS baseado em DOM.

Erro comum: usar innerHTML sem necessidade

❌ Evite:

 element.innerHTML = textoDoUsuario; 

✅ Prefira:

 element.textContent = textoDoUsuario; 

Criando elementos de forma segura

Outra prática segura é criar elementos manualmente:

 const p = document.createElement("p"); p.textContent = textoDoUsuario;

container.appendChild(p);

Assim, o navegador nunca interpreta o conteúdo como código.

Nunca confie em dados externos

Dados externos incluem:

• inputs de formulário
• parâmetros de URL
• dados de APIs
• conteúdo vindo do backend

Validação vs sanitização

São coisas diferentes:

• Validação → verifica se o dado é aceitável
• Sanitização → remove ou neutraliza conteúdo perigoso

Idealmente:

• valide no frontend
• valide e sanitize no backend

Boas práticas essenciais contra XSS

• use textContent em vez de innerHTML
• evite montar HTML com strings
• crie elementos via DOM API
• nunca confie em dados externos
• escape conteúdo quando necessário

E o backend?

Mesmo com JavaScript seguro:

• o backend deve validar tudo
• cabeçalhos de segurança ajudam
• tokens devem ser protegidos

XSS não é teoria

XSS está entre as vulnerabilidades mais comuns da web há anos.

Evitar XSS não é opcional — é obrigação.

Na próxima aula, começamos o encerramento técnico do curso com:

Introdução a testes em JavaScript.