1. Requisitos previos
Acceso al .htaccess y una copia de seguridad.
La lista de servicios externos que usa tu web (Google Fonts, YouTube, CDN, pasarela de pago...).
Lee antes los riesgos de las cabeceras.
2. Instrucciones paso a paso
2.1. Abre el .htaccess de tu web.
2.2. Añade la cabecera en una sola línea, adaptando los dominios (ver tabla). Ejemplo:
Header always set Content-Security-Policy "
default-src 'self';
script-src 'self' https://listablogs.com 'nonce-r4nd0mStr1ng' 'strict- dynamic';
style-src 'self' https://fonts.googleapis.com 'unsafe-inline';
img-src 'self' data: https://listablogs.com https://cdn.example.com;
font-src 'self' https://fonts.gstatic.com;
frame-src 'self' https://www.youtube.com;
object-src 'none'; media-src 'self' https://cdn.example.com;
base-uri 'self';
form-action 'self';
upgrade-insecure-requests;"
2.3. Guarda, borra la caché y revisa la consola del navegador (F12) por si hay recursos bloqueados.
💡 Consejo: Puedes probar primero con Content-Security-Policy-Report-Only: avisa de lo que bloquearía sin bloquearlo.
📌 ¿Qué es Content-Security-Policy (CSP)?
CSP es una cabecera HTTP que controla desde dónde se pueden cargar recursos en una página web. Su objetivo es prevenir ataques de inyección de código malicioso como XSS, inyección de scripts de terceros y otros ataques.
Cuando un navegador recibe una respuesta con esta cabecera, sigue las reglas definidas y bloquea cualquier recurso que no esté en la lista de orígenes permitidos.
🔹 Explicación de cada parámetro
1️⃣ default-src → Fuente predeterminada
Define la fuente por defecto para todos los recursos (scripts, imágenes, estilos, etc.), si no se especifica en otra directiva.
✅ Configuración segura:
default-src 'self';
'self'→ Solo permite recursos cargados desde el mismo dominio.
🚫 Ejemplo no recomendado:
default-src *;
Permite cargar recursos desde cualquier origen → Muy inseguro.
2️⃣ script-src → Orígenes permitidos para JavaScript
Controla desde dónde se pueden cargar archivos JavaScript.
✅ Configuración segura:
script-src 'self' https://listablogs.com 'nonce-r4nd0mStr1ng' 'strict-dynamic';
'self'→ Solo permite scripts desde el mismo dominio.https://listablogs.com→ Permite scripts desde tu propio dominio.'nonce-r4nd0mStr1ng'→ Permite solo scripts con estenonce(código aleatorio que se genera en cada carga de página).'strict-dynamic'→ Permite scripts agregados dinámicamente por scripts autorizados.
🚫 No recomendado:
script-src 'unsafe-inline';
Permite scripts en línea (
<script>...</script>) → Riesgo de XSS.
3️⃣ style-src → Hojas de estilo permitidas
Controla desde dónde se pueden cargar archivos CSS.
✅ Configuración segura para WordPress:
style-src 'self' https://fonts.googleapis.com 'unsafe-inline';
'self'→ Solo carga CSS del mismo dominio.https://fonts.googleapis.com→ Permite fuentes de Google Fonts.'unsafe-inline'→ Necesario si WordPress usa estilos en línea (style="..."), pero menos seguro.
🚫 No recomendado:
style-src 'unsafe-inline';
Permite estilos en línea sin restricciones → Riesgo de inyección de código.
4️⃣ img-src → Imágenes permitidas
Define desde dónde se pueden cargar imágenes.
✅ Configuración segura:
img-src 'self' data: https://tudominio.com https://cdn.example.com;
'self'→ Solo imágenes del mismo dominio.data:→ Permite imágenes en formatodata:image/png;base64(usado en algunas optimizaciones).https://cdn.example.com→ Permite imágenes desde una CDN.
🚫 No recomendado:
img-src *;
Permite imágenes de cualquier sitio → Puede mostrar contenido malicioso.
5️⃣ font-src → Fuentes permitidas
Controla desde dónde se pueden cargar fuentes (@font-face en CSS).
✅ Configuración segura:
font-src 'self' https://fonts.gstatic.com;
'self'→ Solo fuentes del mismo dominio.https://fonts.gstatic.com→ Permite fuentes de Google Fonts.
6️⃣ frame-src → Controla los <iframe>
Permite o bloquea iframes en tu sitio.
✅ Ejemplo seguro:
frame-src *;
'self'→ Solo permite iframes de tu dominio.https://www.youtube.com→ Permite videos de YouTube.
🚫 No recomendado:
object-src 'none';
Permite iframes de cualquier sitio → Riesgo de clickjacking.
7️⃣ object-src → Bloquea Flash y plugins inseguros
Controla desde dónde se pueden cargar objetos <object>, <embed>, <applet>.
✅ Configuración recomendada:
object-src 'none';
Bloquea Flash, Java y otros objetos inseguros.
🚫 No recomendado:
object-src *;
Permite objetos de cualquier origen → Riesgo de ataques.
8️⃣ media-src → Controla archivos de audio y video
Define desde dónde se pueden cargar archivos de audio y video.
✅ Ejemplo seguro:
media-src 'self' https://cdn.example.com;
'self'→ Solo videos alojados en tu dominio.https://cdn.example.com→ Permite videos desde una CDN.
9️⃣ base-uri → Protege contra ataques de inyección
Define qué URLs pueden usarse como base (<base> en HTML).
✅ Configuración recomendada:
base-uri 'self';
Bloquea intentos de inyección de redirecciones maliciosas.
🔟 form-action → Protege formularios contra ataques de phishing
Controla desde dónde pueden enviarse formularios.
✅ Ejemplo seguro:
form-action 'self';
Solo permite que los formularios se envíen a tu dominio.
🔥 Configuración final recomendada
Header always set Content-Security-Policy "
default-src 'self';
script-src 'self' https://listablogs.com 'nonce-r4nd0mStr1ng' 'strict-dynamic';
style-src 'self' https://fonts.googleapis.com 'unsafe-inline';
img-src 'self' data: https://listablogs.com https://cdn.example.com;
font-src 'self' https://fonts.gstatic.com;
frame-src 'self' https://www.youtube.com;
object-src 'none';
media-src 'self' https://cdn.example.com;
base-uri 'self';
form-action 'self';
upgrade-insecure-requests;"
3. Resultado esperado
Security Headers muestra la cabecera CSP y tu web funciona sin recursos bloqueados.
4. Solución de problemas
La web se ve rota.
Solución: Algún origen no está permitido. Mira en la consola del navegador qué se bloquea y añádelo a la directiva correspondiente.
5. Resumen y siguientes pasos
Has configurado la cabecera Content-Security-Policy.
Siguiente paso: Riesgos configuración cabeceras de seguridad