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はXSSやデータインジェクション攻撃を防ぐHTTPレスポンスヘッダーです。Content-Security-Policy: [値]としてレスポンスヘッダーに追加してください。

使い方

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