DS & II

Capítulo 07 - Cross-Site Scripting

Leitura de 4 min

🚀 Capítulo 07: Cross-Site Scripting (XSS) (Tema: Naruto)

NOTE

Este capítulo utiliza a temática de Naruto para explicar o XSS. Injetar clones de código malicioso na página faz os navegadores dos outros usuários trabalharem para o hacker!

1. 🎯 Objetivo da Aula

Compreender como funciona o ataque de Cross-Site Scripting (XSS), diferenciando XSS Refletido de Armazenado, e aprender a se proteger sanitizando as saídas de dados.

2. 🏢 O Cenário Prático (Seu Desafio)

No anime Naruto, o herói usa o Jutsu Clones das Sombras para criar cópias de si mesmo e atacar por vários lados.

  • No ataque de XSS, o hacker cria um “clone” de código malicioso (geralmente em JavaScript).
  • Ele injeta esse clone dentro de uma página web legítima (como um comentário em um blog).
  • Quando outros usuários entram na página para ler o comentário, o clone do hacker executa no navegador deles!
  • O clone pode roubar a senha do usuário, ler seus cookies ou fingir ser a página real para roubar dados.

Seu desafio é impedir que os Clones das Sombras do código malicioso se multipliquem nas telas dos seus usuários!

3. 🧠 Fundamentos: A Teoria Traduzida

O XSS ocorre quando uma aplicação web inclui dados fornecidos pelo usuário em uma página enviada ao navegador, sem a devida validação ou codificação (escape).

👥 Os Dois Tipos Principais:

  1. XSS Armazenado (Stored XSS):
    • Como funciona: O código malicioso é salvo no banco de dados do site (Ex: O hacker posta um comentário contendo <script>...</script>). Toda vez que alguém abrir aquele post, o script executa. É o mais perigoso!
  2. XSS Refletido (Reflected XSS):
    • Como funciona: O código malicioso vem junto com o link (URL). O hacker envia o link falso para a vítima. Quando ela clica, o site “reflete” o código de volta na tela e ele executa.

4. 📖 Exemplo Guiado: O Clone do Roubo de Cookies

Imagine um campo de comentários onde o usuário digita seu texto.

O que o hacker digita no comentário:

Olá! <script>alert('Fui hackeado!');</script>

Se o programador apenas mostrar o comentário na tela sem limpar, a página HTML final ficará assim:

<div>
  Olá! <script>alert('Fui hackeado!');</script>
</div>

O navegador vai ler a tag <script> e vai executar o comando JavaScript, mostrando o alerta na tela de todo mundo que abrir a página!

5. 🛠️ Prática Obrigatória 1: Armazenado ou Refletido?

Diga se a situação descreve um XSS Armazenado ou Refletido:

  1. O hacker enviou um e-mail para a vítima dizendo: “Veja sua foto aqui: site.com/busca?q=<script>...”. A vítima clicou e o script rodou na hora.
  2. O hacker preencheu o campo de endereço no perfil dele com um script. Três dias depois, o administrador do site abriu a página de clientes e o script rodou no computador do administrador.

6. 🛠️ Prática Obrigatória 2: Como se defender?

A melhor defesa contra XSS é o Escape de Caracteres (ou Encoding). Significa transformar caracteres especiais do HTML em códigos inofensivos. Pesquise o que os caracteres < e > viram quando fazemos o escape para HTML (Dica: Eles começam com & e terminam com ;).

7. 📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo 07 Seguranca) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.

8. 📂 Estrutura de Pastas

mod_12_desenvolvimento_seguro/
├── capitulos/
│   ├── capitulo_07_xss.md
│   └── codigos/
│       └── cap07/
│           └── xss_exemplo.html

💡 Checkpoint de Lógica

Muitos frameworks modernos de Frontend (como React, Vue e Angular) já fazem o escape de caracteres automaticamente por padrão! O perigo maior está quando usamos JavaScript puro ou geramos HTML direto no Backend sem cuidado.

10. 🔥 Desafio de Fixação

Pesquise sobre o que é a CSP (Content Security Policy) e como ela ajuda a bloquear a execução de scripts não autorizados na sua página.

🔑 Gabarito de Código/Fórmulas

Gabarito da Prática 1:

  1. Refletido (Veio pela URL e não ficou salvo).
  2. Armazenado (Ficou guardado no banco de dados e atacou o administrador dias depois). Gabarito da Prática 2: O < vira &lt; (Less Than) e o > vira &gt; (Greater Than).

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks