¿Qué es Content-Security-Policy?

Content-Security-Policy (CSP) es un encabezado de respuesta HTTP que ayuda a prevenir ataques de cross-site scripting (XSS), clickjacking e inyección de código. Funciona especificando qué fuentes de contenido pueden cargar en tu página web.

Sin CSP

Estado Vulnerable

Los navegadores cargan recursos desde cualquier origen
Sitio expuesto a inyección de scripts maliciosos
Sin control sobre las fuentes de contenido
Mayor riesgo de ataque XSS

Con CSP

Estado Protegido

Control estricto sobre dominios permitidos
Bloquea scripts no autorizados automáticamente
Permisos de recursos granulares
Capa de seguridad de defensa en profundidad

¿Por qué usar un encabezado CSP?

Protección XSS

Bloquea scripts no autorizados para que no se ejecuten en tus páginas, evitando que los atacantes inyecten código malicioso a través de vulnerabilidades.

Prevención de Robo de Datos

Controla dónde tu página puede enviar datos a través de conexiones fetch, XHR o WebSocket, previniendo la exfiltración de datos.

Defensa contra Clickjacking

Usa la directiva frame-ancestors para prevenir que tu sitio sea incrustado en iframes maliciosos para ataques de clickjacking.

Prevención de Contenido Mixto

Fuerza HTTPS para todos los recursos con upgrade-insecure-requests, eliminando vulnerabilidades de contenido mixto.

Cómo esta herramienta te ayuda

Escribir encabezados CSP manualmente es propenso a errores y requiere memorizar nombres de directivas y sintaxis de fuentes. Este constructor visual te permite alternar directivas, hacer clic en valores de fuentes e instantáneamente ver el encabezado generado en el formato que necesitas — ya sea HTTP sin formato, Apache, Nginx o PHP.

Beneficio de ahorro de tiempo: Configura políticas de seguridad complejas en minutos en lugar de horas, con validación en tiempo real y conversión de formato integradas.

Table of Contents

1. ¿Qué es Content-Security-Policy?
2. Cómo usar el Generador de Encabezados CSP
3. Características
4. Preguntas Frecuentes

Cómo usar el Generador de Encabezados CSP

Elige un Punto de Partida

Selecciona una plantilla preestablecida para comenzar con una configuración común, o comienza con En blanco para construir desde cero. Las plantillas disponibles incluyen Estricta, Sitio web básico, SPA + API, WordPress, Comercio electrónico y configuraciones con mucho CDN.

Configura Directivas

Alterna directivas activadas o desactivadas haciendo clic en su casilla de verificación o fila de encabezado. Cuando una directiva está habilitada, puedes:

Hacer clic en botones de fuentes rápidas ('self', 'none', 'unsafe-inline', etc.) para añadir valores comunes
Escribir un dominio personalizado (p. ej., cdn.example.com, *.googleapis.com) y hacer clic en Añadir
Hacer clic nuevamente en un botón de fuente para eliminarlo
Hacer clic en el botón × en etiquetas de dominio personalizado para eliminarlas

Revisa Advertencias

La herramienta analiza automáticamente tu política y muestra advertencias de seguridad. Las advertencias rojas indican riesgos de seguridad significativos, las advertencias amarillas sugieren mejoras, y los avisos azules proporcionan información útil.

Elige Formato de Salida

Selecciona el formato de salida que coincida con tu servidor web:

Sin formato - El valor del encabezado HTTP sin formato
Apache - Para archivos .htaccess o archivos de configuración de Apache
Nginx - Para bloques de servidor nginx.conf
Etiqueta Meta - Para etiquetas HTML <meta> (nota: Report-Only no es compatible)
PHP - Para llamadas de función header() de PHP

Copia e Implementa

Haz clic en el botón Copiar para copiar el encabezado generado a tu portapapeles. Considera activar primero el modo Report-Only para probar tu política sin bloquear ningún recurso.

Mejor práctica: Siempre prueba con el modo Report-Only en producción antes de aplicar la política para identificar posibles problemas sin romper la funcionalidad.

Características

Constructor Visual de Directivas

Cada directiva CSP se muestra como una fila interactiva con un interruptor de alternancia. Activa una directiva para revelar su panel de configuración de fuentes con botones de añadir rápido e entrada de dominio personalizado. Las directivas se organizan en cuatro categorías: Fetch, Documento, Navegación y Otros.

Constructor de directivas interactivo con interruptores de alternancia y botones de fuentes de añadir rápido

16 Directivas Compatibles

Directivas Fetch

Controla desde dónde se pueden cargar diferentes tipos de recursos:

default-src - Alternativa para todas las directivas fetch
script-src - Fuentes de JavaScript
style-src - Hojas de estilo CSS
img-src - Imágenes y favicons
connect-src - Conexiones Fetch, XHR, WebSocket
font-src - Fuentes web
object-src - Complementos (Flash, applets Java)
media-src - Audio y vídeo
frame-src - Contextos de navegación anidados (iframes)
worker-src - Web Workers y Service Workers
manifest-src - Manifiestos de aplicaciones web

Directivas de Documento y Navegación

Controla el comportamiento del documento y la navegación:

base-uri - Restringe las URLs que pueden aparecer en el elemento <base>
form-action - Puntos finales válidos para envíos de formularios
frame-ancestors - Padres válidos que pueden incrustar esta página (protección contra clickjacking)

Importante: frame-ancestors no se puede establecer a través de etiqueta meta — requiere un encabezado HTTP.

Otras Directivas

Mejoras de seguridad adicionales:

upgrade-insecure-requests - Actualiza automáticamente HTTP a HTTPS
block-all-mixed-content - Bloquea todo el contenido mixto (obsoleto, usa upgrade-insecure-requests)
report-uri - Punto final para enviar reportes de violación (obsoleto, usa report-to)

Plantillas Preestablecidas

Estricta

Configuración de máxima seguridad con fuentes permitidas mínimas. Mejor para aplicaciones de alta seguridad.

Sitio Web Básico

Política equilibrada para sitios web estándar con recursos alojados localmente y CDNs comunes.

SPA + API

Optimizado para Aplicaciones de Página Única con backends de API y carga de módulos dinámica.

WordPress

Preconfigurado para sitios WordPress con requisitos comunes de complementos y temas.

Comercio Electrónico

Incluye integraciones de Stripe, PayPal y pasarelas de pago para tiendas en línea.

CDN Intensivo

Configurado para sitios que utilizan Google Analytics, fuentes y múltiples proveedores de CDN.

Gestión Inteligente de Fuentes

La herramienta maneja la lógica de valores de fuentes automáticamente para prevenir errores de configuración:

Exclusión Mutua

Seleccionar 'none' automáticamente borra todas las otras fuentes ya que son mutuamente excluyentes.

Reemplazo Automático

Añadir cualquier fuente cuando 'none' está activo automáticamente elimina 'none' primero.

Prevención de Duplicados

Los duplicados de fuentes se detectan automáticamente y se previene que se añadan.

Análisis de Seguridad

Las advertencias en tiempo real te alertan sobre posibles problemas de seguridad en tu configuración de CSP:

Advertencia crítica: Usar 'unsafe-inline' o 'unsafe-eval' en script-src debilita significativamente la protección XSS.

Recomendación de seguridad: Las directivas object-src o base-uri faltantes pueden dejar vulnerabilidades abiertas.

Nota de mejor práctica: El uso de comodines (p. ej., https://*) anula la protección de CSP al permitir todos los dominios.

Múltiples Formatos de Salida

Formato	Caso de Uso	Compatibilidad con Report-Only
HTTP Sin Formato	Valor de encabezado sin formato para cualquier servidor	Sí
Apache	Archivos .htaccess o httpd.conf	Sí
Nginx	Bloques de servidor nginx.conf	Sí
Etiqueta Meta	Elemento HTML <meta>	No
PHP	Función header() de PHP	Sí

Limitación de etiqueta meta: Cuando se usa el formato Etiqueta Meta con el modo Report-Only activo, se muestra una nota ya que las etiquetas meta no pueden usar Content-Security-Policy-Report-Only.

Tus Datos Permanecen Privados

Todo el procesamiento ocurre en tu navegador sin comunicación con servidores:

Sin Solicitudes a Servidores

Tu configuración de política nunca abandona tu dispositivo. Toda la generación y validación ocurre localmente usando JavaScript.

Sin Seguimiento

No recopilamos ni almacenamos datos de uso, detalles de configuración o análisis sobre tus políticas de CSP.

Preguntas Frecuentes

¿Cuál es la diferencia entre Content-Security-Policy y Content-Security-Policy-Report-Only?

Content-Security-Policy aplica la política y bloquea recursos que la violen. Content-Security-Policy-Report-Only solo reporta violaciones sin bloquear nada.

Flujo de trabajo recomendado: Usa primero el modo Report-Only para probar tu política e identificar problemas antes de aplicarla en producción.

Este enfoque de dos fases previene romper accidentalmente la funcionalidad mientras te permite monitorear reportes de violación y refinar tu política de forma segura.

¿Por qué siempre debo incluir object-src 'none'?

La directiva object-src controla complementos como Flash y applets Java. Estos complementos pueden ejecutar código arbitrario y eludir otras protecciones de CSP.

Establecer object-src en 'none' bloquea todo el contenido de complementos, lo cual se recomienda porque:

Los sitios web modernos raramente necesitan complementos
Flash y los applets Java están obsoletos e inseguros
Los complementos pueden eludir restricciones de script-src de CSP
La mayoría de navegadores están eliminando gradualmente la compatibilidad con complementos

¿Es 'unsafe-inline' realmente tan peligroso?

Sí. Cuando permites 'unsafe-inline' en script-src, cualquier script en línea en tu página puede ejecutarse — incluyendo scripts inyectados por un atacante a través de vulnerabilidades XSS. Esto debilita significativamente la protección de CSP.

Con 'unsafe-inline'

Vulnerable

Todos los scripts en línea se ejecutan
Los scripts inyectados se ejecutan libremente
Protección XSS debilitada

Con nonces/hashes

Protegido

Solo se ejecutan scripts autorizados
Los scripts inyectados se bloquean
Protección XSS fuerte

Mejores alternativas: Usa nonces o hashes en su lugar, que permiten scripts en línea específicos mientras bloquean los inyectados.

¿Qué hace default-src?

default-src actúa como alternativa para todas las directivas fetch que no se establecen explícitamente. Por ejemplo, si estableces default-src 'self' pero no estableces img-src, las imágenes solo se cargarán desde tu propio dominio.

Principio clave: Cualquier directiva que establezca explícitamente anula default-src para ese tipo de recurso.

Ejemplo:

CSP con alternativa default-src

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' cdn.example.com;
  img-src *;

/* Result:
 * - Scripts: 'self' + cdn.example.com (explicit)
 * - Images: * (explicit)
 * - Styles: 'self' (falls back to default-src)
 * - Fonts: 'self' (falls back to default-src)
 */

¿Puedo usar el formato de etiqueta meta para todas las características de CSP?

No. El enfoque de etiqueta meta HTML tiene limitaciones significativas:

No puede usar el modo Report-Only
No puede establecer la directiva frame-ancestors
No puede usar report-uri o report-to
No puede usar la directiva sandbox

Recomendación: Para funcionalidad completa de CSP, usa encabezados HTTP configurados en tu servidor web (Apache, Nginx, etc.).

Las etiquetas meta son útiles para pruebas rápidas o cuando no tienes acceso a la configuración del servidor, pero los encabezados HTTP proporcionan capacidades completas de CSP.

¿Qué es 'strict-dynamic' y cuándo debo usarlo?

'strict-dynamic' le dice al navegador que confíe en scripts que son cargados por scripts ya confiables. Esto es útil para aplicaciones modernas que cargan dinámicamente módulos de JavaScript.

Beneficios

Simplifica CSP para aplicaciones dinámicas

Funciona con empaquetadores de módulos
Soporta importaciones dinámicas
Reduce la complejidad de la política

Cómo Funciona

Modelo de propagación de confianza

Se ignoran las listas de permitidos basadas en host
Funciona con políticas basadas en nonce
Los scripts cargan otros scripts confiables

Mejor para: Aplicaciones de Página Única (SPAs), aplicaciones React/Vue/Angular y sitios que usan Webpack o empaquetadores similares.