# Front-End

## 🎨 O que é Front-End?

**Front-End** é a parte da aplicação web que o usuário **vê e interage diretamente** — tudo que acontece no navegador.

```
Usuário → Navegador → Front-End (HTML, CSS, JavaScript) → Back-End (servidor)
```

### Componentes básicos do Front-End

| Tecnologia     | Função                    | Exemplo                                      |
| -------------- | ------------------------- | -------------------------------------------- |
| **HTML**       | Estrutura da página       | títulos, parágrafos, botões                  |
| **CSS**        | Estilo e aparência        | cores, fontes, layout                        |
| **JavaScript** | Comportamento e interação | cliques, animações, comunicação com servidor |

### Onde roda?

* ✅ **No navegador do usuário** (Chrome, Firefox, Edge, Safari)
* ✅ **No dispositivo do cliente** (computador, celular, tablet)

{% hint style="info" %}
**Diferença crucial:** Front-End é **público** — todo o código (HTML, CSS, JS) pode ser visto, baixado e analisado por qualquer usuário.
{% endhint %}

***

## ⚠️ Por que o Front-End é vulnerável?

Diferente do back-end (que fica protegido em servidores controlados pela empresa), o front-end **roda na máquina do usuário**.

### Consequências

* 🔴 Qualquer pessoa pode ler seu código JavaScript
* 🔴 Qualquer pessoa pode modificar o HTML/CSS localmente
* 🔴 Qualquer pessoa pode interceptar e modificar requisições
* 🔴 Qualquer pessoa pode clicar onde você não espera

{% hint style="warning" %}
"Nunca confie no front-end para validações de segurança."
{% endhint %}

***

## 📋 Vulnerabilidades de Front-End (Neste Diretório)

Este diretório documenta as principais falhas que afetam o lado cliente (navegador) das aplicações web.

| Vulnerabilidade                     | Descrição Rápida                                                                                       |
| ----------------------------------- | ------------------------------------------------------------------------------------------------------ |
| **Clickjacking**                    | O atacante "esconde" botões legítimos sob camadas falsas, enganando o usuário para clicar sem perceber |
| **Client-side Prototype Pollution** | Manipulação do protótipo de objetos JavaScript para alterar comportamento da aplicação                 |
| **CSP Bypass**                      | Técnicas para contornar a política de segurança de conteúdo (Content Security Policy)                  |
| **CORS Misconfiguration**           | Configuração errada de compartilhamento de recursos entre origens diferentes                           |
| **CSS Injection**                   | Injeção de código CSS que pode alterar a aparência ou comportamento da página                          |
| **DOM-based Vulnerabilities**       | Falhas que exploram a manipulação do DOM (Document Object Model)                                       |
| **DOM-based XSS**                   | Execução de scripts maliciosos que manipulam o DOM do navegador                                        |
| **HTML Injection**                  | Inserção de código HTML arbitrário na página                                                           |
| **Malvertising**                    | Anúncios maliciosos que executam código ou redirecionam vítimas                                        |
| **Reflected XSS**                   | Script malicioso refletido na resposta do servidor e executado no navegador                            |
| **SRI Bypass**                      | Contorno da verificação de integridade de recursos (Subresource Integrity)                             |

***

## 🧠 Resumo Rápido por Categoria

### 🔐 Falhas de Confiança no Cliente

* **DOM-based Vulnerabilities**
* **Client-side Prototype Pollution**
* **HTML Injection**

> O código JavaScript é público. Qualquer validação de segurança feita no front-end pode ser ignorada.

### 🎭 Falhas de Interface (UI/UX)

* **Clickjacking**
* **Malvertising**
* **CSS Injection**

> O atacante manipula o que o usuário vê ou onde ele clica.

### 📡 Falhas de Comunicação

* **CORS Misconfiguration**
* **SRI Bypass**

> A comunicação entre front-end e back-end (ou entre origens diferentes) pode ser mal configurada.

### 💉 Falhas de Injeção

* **DOM-based XSS**
* **Reflected XSS**
* **CSS Injection**
* **HTML Injection**

> Código malicioso é inserido na página e executado no navegador da vítima.

### 🛡️ Falhas de Política de Segurança

* **CSP Bypass**
* **SRI Bypass**

> Mecanismos de proteção implementados no front-end podem ser contornados.

***

## 🎯 Exemplo Rápido (XSS Refletido)

```javascript
// URL maliciosa: https://site.com/search?q=<script>alert('XSS')</script>

// O servidor reflete o parâmetro sem sanitização:
<h1>Você buscou por: <script>alert('XSS')</script></h1>

// O script executa no navegador da vítima
```

***

## 🛡️ Recomendações Gerais para Front-End

| Problema              | Solução                                                                     |
| --------------------- | --------------------------------------------------------------------------- |
| Código público        | Validações críticas DEVEM estar no back-end                                 |
| Injeção de scripts    | Sanitizar entradas + CSP (Content Security Policy)                          |
| Clickjacking          | `X-Frame-Options: DENY` ou CSP `frame-ancestors`                            |
| CORS mal configurado  | Restringir origens específicas, nunca usar `Access-Control-Allow-Origin: *` |
| Dependências externas | SRI (Subresource Integrity) para CDNs                                       |
| Prototype pollution   | Congelar protótipos (`Object.freeze`)                                       |

***

## 🔗 Links Úteis (Introdução)

* [OWASP Top 10 – Front-End](https://owasp.org/www-project-top-ten/)
* [MDN Web Docs – Segurança no Front-End](https://developer.mozilla.org/pt-BR/docs/Web/Security)
* [CSP Evaluator](https://csp-evaluator.withgoogle.com/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://0xmorte.gitbook.io/bibliadopentestbr/tecnicas/web/front-end.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.