V3 · Seguridad de Frontend Web#

# browser-security-requirements.yaml

caracteristicas_requeridas:
  - nombre: HTTPS
    nivel: obligatorio
    si_no_disponible: "bloquear acceso, redirigir a página de error"

  - nombre: HSTS
    nivel: obligatorio
    si_no_disponible: "mostrar advertencia, registrar en logs"

  - nombre: Content Security Policy (CSP)
    nivel: obligatorio (L2+)
    si_no_disponible: "registrar violaciones, informar al equipo de seguridad"

  - nombre: SameSite cookies
    nivel: obligatorio
    si_no_disponible: "considerar al usuario en riesgo de CSRF"

comportamiento_navegador_inseguro:
  accion: "mostrar banner de advertencia al usuario"
  mensaje: "Tu navegador no cumple los requisitos mínimos de seguridad."
  bloquear_acceso_en_nivel: L3

// ❌ MAL: innerHTML interpreta el string como HTML, ejecuta scripts
function mostrarComentario(comentario) {
    document.getElementById('comentarios').innerHTML = comentario;
    // Si comentario = "<img src=x onerror=alert(1)>", se ejecuta el JS
}

// ✅ BIEN: textContent trata el string como texto plano, nunca ejecuta nada
function mostrarComentario(comentario) {
    document.getElementById('comentarios').textContent = comentario;
    // El mismo string se muestra literalmente, sin ejecutarse
}

// ✅ BIEN: createTextNode, equivalente seguro
function mostrarComentario(comentario) {
    const nodo = document.createTextNode(comentario);
    document.getElementById('comentarios').appendChild(nodo);
}

# Flask: forzar descarga en lugar de renderizado del navegador

from flask import send_from_directory, abort
import os

EXTENSIONES_PERMITIDAS = {'pdf', 'png', 'jpg', 'csv', 'docx'}

@app.route('/descargar/<nombre_archivo>')
def descargar_archivo(nombre_archivo):
    extension = nombre_archivo.rsplit('.', 1)[-1].lower()

    if extension not in EXTENSIONES_PERMITIDAS:
        abort(403)

    # Content-Disposition: attachment fuerza la descarga
    # El navegador NO intentará renderizar el archivo
    return send_from_directory(
        '/ruta/uploads',
        nombre_archivo,
        as_attachment=True  # ← Esto genera el header Content-Disposition: attachment
    )

from flask import Flask, session
from datetime import timedelta

app = Flask(__name__)
app.secret_key = "clave_muy_segura_y_aleatoria"

# Configuración global de la cookie de sesión
app.config.update(
    SESSION_COOKIE_SECURE=True,       # Solo enviada por HTTPS
    SESSION_COOKIE_HTTPONLY=True,     # Inaccesible desde JavaScript
    SESSION_COOKIE_SAMESITE='Lax',    # Protección CSRF: no se envía en requests cross-site
    SESSION_COOKIE_NAME='__Host-session',  # Prefijo __Host-: máxima protección
    PERMANENT_SESSION_LIFETIME=timedelta(hours=2)
)

# ¿Cuándo usar qué valor de SameSite?
# 'Strict' → La cookie NUNCA se envía en requests cross-site (máxima protección CSRF)
#            Problema: si el usuario llega a tu app desde un link externo, no tiene sesión
# 'Lax'    → La cookie se envía en navegación top-level (clicks en links) pero no en
#            requests de fondo como imágenes o iframes. Balance recomendado.
# 'None'   → La cookie se envía siempre. SOLO para casos de terceros (ej: OAuth).
#            REQUIERE también Secure=True.

# El nombre de la cookie actúa como una "firma" del servidor

# ❌ MAL: cookie sin prefijo, puede ser sobreescrita por subdominios
response.set_cookie('session', value=token)

# ✅ BIEN: prefijo __Secure-
# Garantiza: la cookie solo fue establecida via HTTPS
# Permite: cualquier Path y Domain
response.set_cookie('__Secure-session', value=token, secure=True)

# ✅ MEJOR: prefijo __Host-
# Garantiza: establecida via HTTPS, desde el host exacto (no subdominio),
#            con Path=/, sin Domain explícito
# Es la opción más segura para cookies de sesión en apps sin subdominios.
response.set_cookie(
    '__Host-session',
    value=token,
    secure=True,
    httponly=True,
    samesite='Lax',
    path='/'
    # NO incluir domain= cuando se usa __Host-
)

from flask import Flask

app = Flask(__name__)

@app.after_request
def agregar_cabeceras_seguridad(response):

    # Forzar HTTPS por al menos 1 año, incluyendo subdominios
    response.headers['Strict-Transport-Security'] = (
        'max-age=31536000; includeSubDomains'
    )

    # Evitar que el navegador "adivine" el tipo de contenido
    response.headers['X-Content-Type-Options'] = 'nosniff'

    # No enviar el Referer completo a sitios externos
    response.headers['Referrer-Policy'] = 'strict-origin-when-cross-origin'

    # Prohibir embeber la app en iframes de otros dominios
    # (reemplaza al obsoleto X-Frame-Options)
    response.headers['Content-Security-Policy'] = (
        "default-src 'self'; "
        "object-src 'none'; "          # Bloquea Flash, plugins
        "base-uri 'none'; "            # Bloquea inyección de base URL
        "frame-ancestors 'none'; "     # Bloquea embebido en iframes
        "report-uri /csp-reporte"      # Enviar violaciones a este endpoint
    )

    # Proteger contra tabnabbing y frame counting
    response.headers['Cross-Origin-Opener-Policy'] = 'same-origin'

    return response

@app.route('/csp-reporte', methods=['POST'])
def recibir_reporte_csp():
    # Registrar violaciones de CSP para análisis
    import logging
    logging.warning(f"CSP Violation: {request.get_json()}")
    return '', 204

import secrets
from flask import g

@app.before_request
def generar_nonce():
    # Generar un nonce único por request
    g.csp_nonce = secrets.token_urlsafe(16)

@app.after_request
def csp_con_nonce(response):
    nonce = getattr(g, 'csp_nonce', '')
    response.headers['Content-Security-Policy'] = (
        f"default-src 'self'; "
        f"script-src 'nonce-{nonce}' 'strict-dynamic'; "
        f"object-src 'none'; "
        f"base-uri 'none';"
    )
    return response

# En la plantilla HTML: usar el nonce en cada <script>
# <script nonce="{{ g.csp_nonce }}">
#     // Solo este script es ejecutado — cualquier script inyectado no tiene el nonce
# </script>

# Flask-WTF maneja CSRF automáticamente con tokens, pero aquí la lógica manual:

import secrets
from flask import session, request, jsonify, abort

def generar_csrf_token():
    if 'csrf_token' not in session:
        session['csrf_token'] = secrets.token_hex(32)
    return session['csrf_token']

def validar_csrf_token():
    """Validar en todas las rutas que cambian estado (POST, PUT, DELETE)"""
    if request.method in ['POST', 'PUT', 'PATCH', 'DELETE']:
        token_enviado = request.headers.get('X-CSRF-Token') or \
                        request.form.get('csrf_token')
        token_esperado = session.get('csrf_token')

        if not token_enviado or not secrets.compare_digest(
            token_enviado, token_esperado or ''
        ):
            abort(403)  # Forbidden: posible ataque CSRF

@app.before_request
def csrf_protection():
    validar_csrf_token()

# En el HTML, incluir el token en formularios:
# <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
# O en peticiones AJAX: headers: {'X-CSRF-Token': csrfToken}

// ❌ MAL: aceptar mensajes de cualquier origen
window.addEventListener('message', function(event) {
    ejecutarAccion(event.data);  // Cualquier sitio puede enviar comandos arbitrarios
});

// ✅ BIEN: validar que el origen es uno de los esperados
const ORIGENES_PERMITIDOS = [
    'https://app.midominio.com',
    'https://panel.midominio.com'
];

window.addEventListener('message', function(event) {
    // Validar origen
    if (!ORIGENES_PERMITIDOS.includes(event.origin)) {
        console.warn(`postMessage rechazado de origen: ${event.origin}`);
        return;
    }

    // Validar estructura del mensaje
    const { tipo, payload } = event.data || {};
    if (typeof tipo !== 'string' || !payload) {
        console.warn('Mensaje con formato inválido');
        return;
    }

    // Solo entonces procesar
    ejecutarAccion(tipo, payload);
});

<!-- ❌ MAL: cargar desde CDN sin verificar integridad -->
<script src="https://cdn.ejemplo.com/libreria.min.js"></script>
<!-- Si el CDN es comprometido, este script malicioso corre en tus usuarios -->

<!-- ✅ BIEN: SRI con hash SHA-384 -->
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-YvpcrYf0tY3lHB60NNkmXc4s9bIOgUxi8T/jzmFnxhJt8EVjMgCn6pWxHfHqsHT6"
  crossorigin="anonymous">
</script>
<!-- Si el archivo no coincide con el hash, el navegador lo rechaza -->

<!--
  ¿Cómo generar el hash?
  $ curl -s https://cdn.example.com/lib.js | openssl dgst -sha384 -binary | openssl base64 -A

  O usar: https://www.srihash.org
-->

from urllib.parse import urlparse

DOMINIOS_PERMITIDOS = {
    'app.midominio.com',
    'panel.midominio.com',
    'docs.midominio.com'
}

def es_redireccion_segura(url: str) -> bool:
    """Verificar que una URL de redirección es a un destino permitido."""
    try:
        parsed = urlparse(url)
        # Debe tener esquema y hostname válidos
        if not parsed.scheme in ('http', 'https'):
            return False
        if parsed.hostname not in DOMINIOS_PERMITIDOS:
            return False
        return True
    except Exception:
        return False

@app.route('/redirigir')
def redirigir():
    destino = request.args.get('url', '')

    if not es_redireccion_segura(destino):
        # Redirigir a página de error o a inicio
        return redirect(url_for('inicio'))

    return redirect(destino)

# ❌ Nunca hacer esto:
# return redirect(request.args.get('url'))  # Open redirect — cualquiera puede redirigir a phishing