Fundamentos & Web

29/07/2026

5 min read

MÓDULO 0 — Fundamentos de HTTP e Web: Tópico 0.3 — DOM, JavaScript e Renderização

Team Hacking78

Especialistas em Red Teaming

Resumo Executivo (TL;DR)

Compreenda o funcionamento do DOM, como o JavaScript interage com o navegador, a diferença entre SSR e CSR, e como a SOP e o CORS protegem as aplicações contra requisições maliciosas entre origens.

MÓDULO 0 — Fundamentos de HTTP e Web: Tópico 0.3 — DOM, JavaScript e Renderização

Para compreender ataques modernos como Cross-Site Scripting (XSS) e entender como ferramentas de segurança interagem com aplicações web, é fundamental dominar a estrutura do navegador, como o JavaScript é executado e o papel da SOP e do CORS.

1. O que é o DOM (Document Object Model)?

O DOM é a representação em árvore de objetos do documento HTML que o navegador cria na memória. Ele traduz as tags e textos em nós manipuláveis que podem ser lidos e alterados programmaticamente.

Exemplo de Estrutura em Árvore:

text

Hacking78 Snippet

         [ Document ]
              |
           [ <html> ]
         /          \
    [ <head> ]     [ <body> ]
        |              |
    [ <title> ]    [ <h1> ]
                       |
               [ "Bem-vindo" ]

2. Como o JavaScript Interage com o DOM

O JavaScript acessa e modifica o DOM usando APIs nativas fornecidas pelo navegador. Ele pode alterar estilos, capturar eventos de usuário e modificar o conteúdo da página em tempo real.

Exemplo Prático de Manipulação:

javascript

Hacking78 Snippet

// 1. Seleciona um elemento na árvore DOM
const elementoTitulo = document.getElementById("titulo-principal");

// 2. Modifica o conteúdo de forma insegura (pode gerar DOM XSS)
elementoTitulo.innerHTML = "<span>Novo Título</span>";

// 3. Modifica o conteúdo de forma segura (trata a entrada como texto puro)
elementoTitulo.textContent = "Novo Título Seguro";

3. Processamento de HTML, Execução de Scripts e AJAX/Fetch

O fluxo básico do navegador para renderizar uma página e enviar requisições sem recarregar a tela segue as seguintes fases:

text

Hacking78 Snippet

[ HTML Recebido ] ──> [ Parse do HTML ] ──> [ Montagem do DOM Tree ]
                             │
                             ├──> Encontra <script> ──> Pausa Parse / Executa JS
                             │
                             └──> Executa código Fetch/AJAX ──> Requisição em background

Requisições Assíncronas (AJAX vs Fetch)

Permitem que o cliente interaja com o servidor sem recarregar a página HTML.

API Fetch (Padrão moderno em JavaScript):

javascript

Hacking78 Snippet

// Envia dados JSON via POST sem recarregar a página
fetch("https://api.exemplo.com/v1/dados", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer token_exemplo_123"
  },
  body: JSON.stringify({ item: "Notebook", quantidade: 1 })
})
.then(response => response.json())
.then(data => console.log("Resposta do servidor:", data))
.catch(error => console.error("Erro na requisição:", error));

4. SSR (Server-Side Rendering) vs CSR (Client-Side Rendering)

A forma como o conteúdo da aplicação é montado afeta diretamente o fluxo de análise e varredura de vulnerabilidades:

Característica	Server-Side Rendering (SSR)	Client-Side Rendering (CSR)
Onde o HTML é gerado?	No servidor backend (ex: PHP, Node.js + EJS, Django).	No navegador do cliente via JavaScript (ex: React, Vue, Angular).
Resposta inicial do servidor	HTML completo com dados renderizados.	HTML mínimo/quase vazio com arquivos .js anexados.
Processamento	Servidor processa a página a cada navegação.	Navegador baixa o bundle de JS e constrói o DOM via APIs.
Desafio em Pentests	Fácil visualização do código-fonte original no HTML.	Exige análise detalhada dos arquivos JS e mapeamento de APIs REST/GraphQL.

5. O que é CORS e Por que Ele Existe?

Para entender o CORS (Cross-Origin Resource Sharing), precisamos primeiro entender a SOP (Same-Origin Policy ou Política de Mesma Origem).

A Política de Mesma Origem (SOP)

A SOP é uma regra de segurança fundamental implementada em todos os navegadores. Ela impede que scripts de uma origem (ex: site-malicioso.com) leiam dados ou façam requisições arbitrárias para outra origem (ex: seu-banco.com).

O que define uma Origem? A combinação exata de: Protocolo + Domínio + Porta.

Exemplo 1: https://exemplo.com:443 e http://exemplo.com:443 -> Origens Diferentes (protocolo).
Exemplo 2: https://api.exemplo.com e https://exemplo.com -> Origens Diferentes (subdomínio).

O que é o CORS?

O CORS é o mecanismo padrão da W3C que permite relaxar seletivamente a regra da SOP de forma controlada. Através de cabeçalhos HTTP adicionais, o servidor destino declara a quais origens externas ele concede permissão para ler suas respostas.

Exemplo de Funcionamento do CORS (Requisição Preflight):

Quando a aplicação faz uma requisição cruzada que pode alterar dados ou usa cabeçalhos customizados, o navegador envia automaticamente uma requisição preliminar chamada Preflight usando o método OPTIONS:

Navegador envia requisição Preflight (OPTIONS):

http

Hacking78 Snippet

OPTIONS /api/usuario HTTP/1.1
Host: api.servico-externo.com
Origin: https://meu-app-front.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Authorization, Content-Type

Servidor responde liberando a origem:

http

Hacking78 Snippet

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://meu-app-front.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Authorization, Content-Type
Access-Control-Allow-Credentials: true

Se o servidor responder com Access-Control-Allow-Origin: https://meu-app-front.com, o navegador prossegue e executa a requisição principal POST.

⚠️ Ponto de Atenção em Segurança: Configurações Inseguras de CORS (como Access-Control-Allow-Origin: * em conjunto com Access-Control-Allow-Credentials: true ou confiar cegamente no valor do cabeçalho Origin) podem permitir a vazamento de dados sensíveis do usuário.

📌

Resumo Prático: O DOM é a árvore que o JS manipula. Aplicações modernas em CSR dependem fortemente de APIs chamadas via Fetch/AJAX, enquanto o CORS e a SOP agem como os guardiões no navegador controlando a troca de dados entre domínios distintos.

Com isso, concluímos o MÓDULO 0 — Fundamentos de HTTP e Web! 🎉

Perguntas Frequentes (FAQ)

Qual a diferença crucial em segurança entre innerHTML e textContent?

O innerHTML interpreta e parseia a string fornecida como código HTML, o que pode permitir a execução de scripts maliciosos caso a entrada do usuário contenha tags ou atributos inseguros (DOM XSS). Já o textContent trata todo o conteúdo estritamente como texto puro, neutralizando tentativas de injeção de código.

Por que a análise de vulnerabilidades em aplicações CSR é diferente de SSR?

Em SSR o servidor entrega o HTML completo renderizado, permitindo visualizar facilmente o código de saída original. Em CSR a resposta inicial é um HTML mínimo com bundles JavaScript. O pentester/analista precisa inspecionar os arquivos JS, descompactar mapeamentos de API REST/GraphQL e analisar como o DOM é manipulado no cliente.

O que define se duas URLs pertencem à mesma origem perante a SOP?

Para pertencerem à mesma origem (Same-Origin), as URLs devem ter exatamente a mesma combinação de três elementos: Protocolo (ex: https), Domínio (ex: exemplo.com) e Porta (ex: 443). Se qualquer um desses três variar, são consideradas origens distintas.

O que acontece se um servidor responder com Access-Control-Allow-Origin: * em requisições com credenciais?

Os navegadores modernos bloqueiam essa combinação por padrão quando credentials: true é enviado. O uso de caractere curinga (*) com credenciais ativas é uma má configuração grave que viola os padrões de segurança do CORS para evitar vazamento de sessões e dados sensíveis.