What is Content Security Policy (CSP)?

Content Security Policy is an HTTP response header that allows web developers to control which resources a browser is allowed to load. It's a powerful security layer that helps prevent Cross-Site Scripting (XSS), clickjacking, and other code injection attacks by specifying trusted sources for scripts, styles, images, and other content.

How do I add a CSP header to my website?

For most web servers, add the header to your server configuration. In Nginx: add_header Content-Security-Policy "..."; In Apache: Header set Content-Security-Policy "..."; For Next.js, add it in next.config.js under headers(). For Cloudflare Pages, use _headers file. The generated value from this tool is the part after the colon.

What does 'self' mean in CSP directives?

'self' (always written with single quotes) means the same origin as the page — same protocol, hostname, and port. It's the safest common option as it only allows resources from your own domain. Without quotes, self would be interpreted as a hostname called 'self', which is incorrect.

Is 'unsafe-inline' dangerous?

Yes, 'unsafe-inline' for script-src allows inline JavaScript (like onclick handlers and tags without src), which significantly reduces XSS protection. If you need inline scripts, consider using nonces or hashes instead: script-src 'nonce-{random}'. For style-src, 'unsafe-inline' is more commonly accepted since CSS injection is less dangerous than JS injection.

How do I test my CSP without breaking my site?

Use Content-Security-Policy-Report-Only instead of Content-Security-Policy. This header instructs browsers to report violations but not block anything. Combine it with report-uri to collect violations and analyze which resources are blocked before switching to enforcement mode.

Generador CSP

Genera encabezados Content Security Policy (CSP) para tu sitio web. Configura directivas con niveles de seguridad predefinidos, añade fuentes personalizadas y copia el valor completo del encabezado.

Preajustes de seguridad

default-src

Fallback for other directives

script-src

JavaScript sources

style-src

Stylesheet sources

img-src

Image sources

font-src

Font sources

connect-src

AJAX, WebSocket, fetch

frame-src

Iframe sources

object-src

Plugin sources

media-src

Audio/video sources

worker-src

Web Worker sources

Opciones adicionales

upgrade-insecure-requestsblock-all-mixed-content

report-uri:

Encabezado CSP generado

Content-Security-Policy:

default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; frame-src 'none'; object-src 'none'

¿Qué es CSP?

Content Security Policy es un encabezado de respuesta HTTP que ayuda a prevenir ataques XSS e inyección de datos. Añádelo como encabezado de respuesta: Content-Security-Policy: [valor]

Cómo usar

Genera encabezados Content Security Policy (CSP) para tu sitio web. Configura directivas con niveles de seguridad predefinidos, añade fuentes personalizadas y copia el valor completo del encabezado.

1Choose a security preset — Strict, Moderate, or Open — based on your site's needs. Strict blocks nearly everything except your own domain; Moderate is good for most sites; Open allows more third-party resources.
2Configure directives by clicking the source chips to toggle them on/off. Add custom domains using the text input — useful for CDNs, analytics services, and payment processors.
3Enable extra options: upgrade-insecure-requests to automatically upgrade HTTP to HTTPS, and block-all-mixed-content to block HTTP resources on HTTPS pages. Add a report-uri to collect CSP violations.
4Click Copy to get the CSP value. Add it to your server as the Content-Security-Policy response header. Test in report-only mode first using Content-Security-Policy-Report-Only.

Características

Visual directive builder — toggle sources with clickable chips instead of typing raw strings
Security level presets — Strict, Moderate, and Open presets based on real-world security recommendations
Custom source support — add any domain, URL pattern, or CSP keyword for CDNs, fonts, and analytics
Extra security directives — one-click toggles for upgrade-insecure-requests, block-all-mixed-content, and report-uri

Preguntas frecuentes

Más información

CSP Generator — Build Content Security Policy Headers