Saltar al contenido principal

Security Headers

Floutic implementa un conjunto completo de security headers siguiendo las mejores prácticas de OWASP y estándares de la industria.

Headers Implementados​

X-Content-Type-Options​

X-Content-Type-Options: nosniff

Propósito: Previene MIME type sniffing, forzando al navegador a respetar el Content-Type declarado.

Beneficio: Previene ataques donde archivos maliciosos se sirven como diferentes tipos de contenido.

X-Frame-Options​

X-Frame-Options: DENY

Propósito: Previene que la página sea embebida en iframes.

Beneficio: Previene clickjacking attacks.

X-XSS-Protection​

X-XSS-Protection: 1; mode=block

Propósito: Habilita el filtro XSS del navegador (legacy, pero útil para navegadores antiguos).

Nota: Aunque los navegadores modernos tienen protección XSS integrada, este header proporciona compatibilidad con navegadores antiguos.

Referrer-Policy​

Referrer-Policy: strict-origin-when-cross-origin

Propósito: Controla qué información del referrer se envía en requests.

Comportamiento:

  • Mismo origen: Envía URL completa
  • Cross-origin HTTPS: Envía solo origen
  • Cross-origin HTTP: No envía referrer

Beneficio: Protege privacidad del usuario y previene fuga de información sensible.

X-Permitted-Cross-Domain-Policies​

X-Permitted-Cross-Domain-Policies: none

Propósito: Previene uso de políticas cross-domain (Flash, Silverlight).

Beneficio: Reduce superficie de ataque.

Permissions-Policy​

Permissions-Policy: geolocation=(), microphone=(), camera=()

Propósito: Controla qué APIs del navegador pueden ser usadas.

Configuración en Floutic:

PERMISSIONS_POLICY = (
    "geolocation=(), "
    "microphone=(), "
    "camera=(), "
    "payment=(), "
    "usb=(), "
    "magnetometer=(), "
    "gyroscope=(), "
    "accelerometer=()"
)

Beneficio: Previene uso no autorizado de APIs sensibles.

Cross-Origin-Embedder-Policy (COEP)​

Cross-Origin-Embedder-Policy: require-corp

Propósito: Requiere que recursos cross-origin declaren explícitamente que pueden ser embebidos.

Beneficio: Previene ataques de espectador (Spectre).

Cross-Origin-Opener-Policy (COOP)​

Cross-Origin-Opener-Policy: same-origin

Propósito: Aísla el contexto de navegación de otros orígenes.

Beneficio: Previene ataques de espectador y fuga de información entre ventanas.

Cross-Origin-Resource-Policy (CORP)​

Cross-Origin-Resource-Policy: same-origin

Propósito: Previene que recursos sean cargados desde otros orígenes.

Beneficio: Previene fuga de información a través de recursos.

Strict-Transport-Security (HSTS)​

Strict-Transport-Security: max-age=31536000; includeSubDomains

Propósito: Fuerza conexiones HTTPS en navegadores.

Configuración por Entorno:

Producción:

max-age=31536000; includeSubDomains  # 1 año

Desarrollo HTTPS:

max-age=300; includeSubDomains  # 5 minutos

Desarrollo HTTP:

max-age=60  # 1 minuto (sin includeSubDomains)

Beneficio: Previene downgrade attacks y man-in-the-middle attacks.

Content Security Policy (CSP)​

Producción​

CSP = (
    "default-src 'self'; "
    "script-src 'self' 'nonce-{nonce}'; "
    "style-src 'self' 'unsafe-inline' 'nonce-{nonce}'; "
    "img-src 'self' data: https:; "
    "connect-src 'self' https://api.floutic.com; "
    "frame-ancestors 'none'; "
    "base-uri 'self'; "
    "form-action 'self'"
)

Desarrollo​

DEV_CSP = (
    "default-src 'self'; "
    "script-src 'self' 'unsafe-eval' 'unsafe-inline' 'nonce-{nonce}'; "
    "style-src 'self' 'unsafe-inline' 'nonce-{nonce}'; "
    "img-src 'self' data: https:; "
    "connect-src 'self' http://localhost:* https://api.floutic.com; "
    "frame-ancestors 'none'"
)

Nonce​

CSP utiliza nonces para permitir scripts y estilos inline de forma segura:

nonce = secrets.token_urlsafe(16)
request.state.csp_nonce = nonce

El nonce se pasa al frontend y se usa en scripts/estilos inline.

Implementación​

Middleware​

Los security headers se aplican mediante SecurityHeadersMiddleware:

class SecurityHeadersMiddleware(BaseHTTPMiddleware):
    async def dispatch(self, request: Request, call_next):
        if not settings.SECURITY_HEADERS:
            return await call_next(request)

        nonce = secrets.token_urlsafe(16)
        request.state.csp_nonce = nonce

        response = await call_next(request)

        # Aplicar headers de seguridad
        response.headers["X-Content-Type-Options"] = "nosniff"
        response.headers["X-Frame-Options"] = "DENY"
        # ... más headers ...

        return response

Configuración​

Los headers se pueden habilitar/deshabilitar mediante variable de entorno:

SECURITY_HEADERS=true  # Habilitar (default: true)

Verificación​

Tests E2E​

Floutic incluye tests E2E que verifican la presencia de security headers:

test('should include security headers', async ({ page }) => {
  const response = await page.goto('/');
  
  expect(response.headers()['x-content-type-options']).toBe('nosniff');
  expect(response.headers()['x-frame-options']).toBe('DENY');
  expect(response.headers()['strict-transport-security']).toContain('max-age');
});

Herramientas Externas​

Puedes verificar los headers usando:

Mejores Prácticas​

Recomendaciones​

  1. Siempre usar HTTPS en producción

    • HSTS solo funciona con HTTPS
    • Cookies seguras requieren HTTPS

  2. Configurar CSP correctamente

    • Usar nonces en lugar de 'unsafe-inline'
    • Restringir connect-src a dominios necesarios

  3. Revisar headers regularmente

    • Usar herramientas de verificación
    • Mantener headers actualizados

  4. Testing continuo

    • Incluir verificación de headers en tests
    • Verificar en diferentes entornos

Más Información​