Content Security Policy (CSP)

Qué es CSP

Content Security Policy (CSP) es un header HTTP que define qué fuentes de scripts, estilos, imágenes, fuentes y datos puede cargar tu web. Es la defensa más efectiva contra ataques XSS (Cross-Site Scripting) e inyección de código.

Por qué importa

Sin CSP, un atacante que logre inyectar código en tu web (ej: vía comentario sin sanitizar) puede:

• Robar cookies de sesión
• Hacer redirects maliciosos
• Cargar scripts de minería de criptomonedas
• Suplantar formularios

Con CSP bien configurado, el navegador bloquea cualquier código que venga de fuente no autorizada.

Sintaxis básica

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://www.googletagmanager.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self' data:;

Significado:

• default-src 'self': por defecto, solo recursos del mismo dominio
• script-src 'self' https://...: scripts solo del propio dominio + GTM
• img-src 'self' data: https:: imágenes propias + data URIs + cualquier HTTPS
• font-src 'self' data:: fuentes propias

Directivas comunes

• default-src: regla por defecto
• script-src: scripts JavaScript
• style-src: hojas de estilo CSS
• img-src: imágenes
• font-src: fuentes web
• connect-src: fetch, XHR, WebSocket
• frame-src: iframes
• media-src: audio/vídeo
• object-src: plugins (Flash, etc.)
• base-uri: tag <base>
• form-action: action de formularios
• frame-ancestors: dónde puede embeberse tu página (alternativa a X-Frame-Options)

Cómo implementar de forma segura

CSP es delicado: una regla mal puesta rompe tu web. Estrategia recomendada:

Paso 1: Report-Only

Empieza con Content-Security-Policy-Report-Only que avisa pero no bloquea:

Content-Security-Policy-Report-Only:
  default-src 'self';
  script-src 'self' 'unsafe-inline';
  report-uri /csp-report

Recoges violaciones durante 1-2 semanas y ajustas.

Paso 2: Pasar a enforcement

Cuando no haya falsos positivos, cambia a Content-Security-Policy (sin Report-Only).

CSP típico de pyme

default-src 'self';
script-src 'self' 'unsafe-inline' https://www.googletagmanager.com https://www.google-analytics.com;
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;
font-src 'self' data:;
connect-src 'self' https://www.google-analytics.com;
frame-ancestors 'self';
base-uri 'self';
form-action 'self';
object-src 'none';

Trade-offs

• 'unsafe-inline' debilita CSP pero a veces es necesario para scripts inline
• 'unsafe-eval' debilita aún más, evitar si posible
• Nonce o hash para scripts inline es lo más seguro pero requiere generación dinámica

Cómo verificar

securityheaders.com muestra tu CSP actual y posibles mejoras.