Construir Content Security Policy

Genera encabezados CSP interactivamente con todas las directivas, presets y salida para HTTP, meta tags, Nginx, Apache y Express.

Construye y configura encabezados Content Security Policy (CSP) visualmente con un editor interactivo de directivas. Agrega fuentes por directiva, previsualiza tu politica en vivo y exporta como encabezados HTTP, meta tags HTML, o configuraciones de Nginx, Apache o Express.js. Todo se procesa en tu navegador.

Loading...
Tus datos no salen de tu navegador
¿Te ha sido útil esta herramienta?
Tutorial

Como Construir un Encabezado CSP

1
1

Elige Directivas

Comienza con default-src y agrega mas directivas como script-src, style-src o img-src para un control mas granular.

2
2

Agrega Fuentes Permitidas

Haz clic en valores predefinidos como 'self' o 'none', o escribe dominios personalizados para autorizar origenes especificos.

3
3

Exporta la Politica

Cambia entre pestanas de salida para copiar el CSP como encabezado HTTP, meta tag o fragmento de configuracion del servidor.

Guide

Guia Completa de Content Security Policy

Por Que CSP es Importante para la Seguridad Web

Content Security Policy es una de las defensas mas efectivas contra ataques de cross-site scripting (XSS). Al declarar exactamente que fuentes pueden cargar scripts, estilos, imagenes y otros recursos, creas una lista blanca que los navegadores aplican automaticamente. Incluso si un atacante inyecta codigo malicioso en tu pagina, el navegador se niega a ejecutarlo porque la fuente no esta en tu politica.

Entendiendo las Directivas CSP

Cada directiva controla un tipo especifico de recurso. La directiva default-src actua como respaldo para cualquier tipo no especificado. La directiva script-src gobierna las fuentes de JavaScript, style-src maneja CSS e img-src controla imagenes. Directivas mas especializadas como connect-src restringen fetch y XMLHttpRequest, mientras que frame-ancestors determina que sitios pueden embeber el tuyo.

Valores de Fuente Comunes Explicados

El valor 'self' permite contenido de tu propio origen. El valor 'none' bloquea todo para esa directiva. Para scripts en linea, 'unsafe-inline' los permite pero debilita la seguridad; prefiere enfoques basados en nonce o hash. El valor 'strict-dynamic' confia en scripts cargados por scripts ya confiables, simplificando el uso de CDN manteniendo la proteccion.

Desplegando CSP en Produccion

Comienza con Content-Security-Policy-Report-Only para recopilar reportes de violaciones sin romper funcionalidad. Analiza los reportes, ajusta tu politica y luego cambia al encabezado de aplicacion. Usa las directivas report-uri o report-to para enviar violaciones a un endpoint de logging. Monitorea regularmente porque nuevas integraciones pueden provocar bloqueos inesperados.

Examples

Ejemplos de Configuracion CSP

Sitio Web Basico Seguro

Un sitio web que solo carga sus propios recursos y usa Google Fonts.

1

Establecer default-src en 'self'

2

Establecer font-src en 'self' fonts.gstatic.com

3

Establecer style-src en 'self' fonts.googleapis.com

default-src 'self'; font-src 'self' fonts.gstatic.com; style-src 'self' fonts.googleapis.com

E-commerce con Analytics

Una tienda online usando Google Analytics, pagos Stripe y un CDN para imagenes.

1

Establecer default-src en 'self'

2

Establecer script-src en 'self' www.googletagmanager.com js.stripe.com

3

Establecer connect-src en 'self' www.google-analytics.com api.stripe.com

4

Establecer img-src en 'self' cdn.example.com data:

5

Establecer frame-src en js.stripe.com

default-src 'self'; script-src 'self' www.googletagmanager.com js.stripe.com; connect-src 'self' www.google-analytics.com api.stripe.com; img-src 'self' cdn.example.com data:; frame-src js.stripe.com

Casos de uso

Casos de Uso de CSP

Bloquear Contenido Mixto

Establece default-src en 'self' y upgrade-insecure-requests para forzar HTTPS en todos los recursos. Esto evita que los navegadores carguen recursos HTTP en paginas HTTPS, eliminando advertencias de contenido mixto y mejorando la seguridad.

Restringir Scripts de Terceros

Configura script-src para permitir solo 'self' y dominios CDN especificos como cdn.jsdelivr.net. Esto bloquea scripts en linea y codigo de terceros desconocido, reduciendo significativamente la superficie de ataque para vulnerabilidades XSS.

Bloquear Iframes

Usa frame-ancestors 'none' para evitar que tu sitio sea embebido en iframes de otros dominios. Esto proporciona proteccion contra clickjacking similar a X-Frame-Options DENY pero con mas flexibilidad para autorizar origenes de confianza.

Preguntas Frecuentes

?Que es una Content Security Policy?

CSP es un encabezado HTTP que indica a los navegadores que fuentes de contenido estan permitidas en tu pagina, previniendo ataques XSS e inyeccion de datos.

?Que controla default-src?

Actua como respaldo para todos los tipos de recursos. Si una directiva especifica como script-src no esta definida, el navegador usa default-src.

?Deberia usar 'unsafe-inline' en script-src?

Evitalo cuando sea posible porque permite scripts en linea, lo que debilita la proteccion XSS. Usa nonces o hashes como alternativas mas seguras.

?Puedo probar mi CSP antes de desplegarlo?

Si. Usa el encabezado Content-Security-Policy-Report-Only primero. Registra violaciones sin bloquear recursos, permitiendote ajustar tu politica de forma segura.

?Cual es la diferencia entre encabezado HTTP y meta tag?

Ambos entregan la misma politica. El encabezado HTTP es preferido porque los meta tags no soportan las directivas frame-ancestors y report-uri.

?Mis datos son privados?

Si. Todo se ejecuta localmente en tu navegador. No se envia ningun dato a ningun servidor. Tu configuracion CSP nunca sale de tu maquina.

?Es gratuita esta herramienta?

Si. Completamente gratuita sin limites ni registro requerido. Construye tantas politicas como necesites sin ninguna restriccion.

Ayúdanos a mejorar

¿Qué te parece esta herramienta?

Cada herramienta de Kitmul se construye a partir de peticiones reales de usuarios. Tu valoración y tus sugerencias nos ayudan a arreglar bugs, añadir funciones que faltan y construir las herramientas que realmente necesitas.

Valora esta herramienta

Pulsa una estrella para contarnos lo útil que te ha resultado.

Sugiere una mejora o reporta un bug

¿Te falta alguna función? ¿Has encontrado un fallo? ¿Tienes una idea? Cuéntanoslo y lo revisaremos.

Herramientas relacionadas

Lectura Recomendada

Libros Recomendados sobre Seguridad Web y CSP

Como asociado de Amazon, ganamos con las compras que califican.

Potencia tus Capacidades

Herramientas de Seguridad para Desarrolladores Web

Como asociado de Amazon, ganamos con las compras que califican.

Boletín

Recibe Consejos de Productividad y Nuevas Herramientas Primero

Únete a creadores y desarrolladores que valoran la privacidad. En cada edición: nuevas herramientas, trucos de productividad y novedades — sin spam.

Acceso prioritario a nuevas herramientas
Cancela en cualquier momento, sin preguntas