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.

CSP 生成器

为您的网站生成 Content Security Policy (CSP) 标头。使用安全级别预设配置指令，添加自定义来源，并复制完整的标头值。

安全预设

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

额外选项

upgrade-insecure-requestsblock-all-mixed-content

report-uri:

生成的 CSP 标头

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'

什么是 CSP？

Content Security Policy 是一个 HTTP 响应标头，有助于防止 XSS 和数据注入攻击。以 Content-Security-Policy: [值] 的形式添加到响应标头中。

使用方法

为您的网站生成 Content Security Policy (CSP) 标头。使用安全级别预设配置指令，添加自定义来源，并复制完整的标头值。

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.

主要功能

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

常见问题

了解更多

CSP Generator — Build Content Security Policy Headers