What is CSP
Content Security Policy (CSP) is an HTTP security header that lets a website tell the browser which sources are allowed to provide resources such as scripts, stylesheets, images, fonts, and frames.
CSP is a primary defense against XSS (Cross-Site Scripting) attacks, one of the most common vulnerabilities in web applications. If an attacker injects a malicious script through a form or comment, CSP prevents the browser from executing it.
CSP is supported by all modern browsers. It was introduced as a W3C standard.
Why CSP is needed
XSS protection: CSP blocks inline scripts and scripts from unauthorized domains.
Clickjacking protection: The frame-ancestors directive prevents the site from being embedded in an iframe on other domains.
Resource loading control: It prevents data from being sent to third-party servers.
Reporting: CSP can send reports about policy violations to your server.
SEO: Google considers website security when ranking sites. CSP is part of overall security.
How to configure CSP
Basic policy
Content-Security-Policy: default-src 'self'; script-src 'self' cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:;
Main directives
default-src — the default source for all resources:
default-src 'self'
script-src — JavaScript sources:
script-src 'self' https://cdn.example.com 'nonce-abc123'
style-src — CSS sources:
style-src 'self' https://fonts.googleapis.com 'unsafe-inline'
img-src — image sources:
img-src 'self' data: https://cdn.example.com
font-src — font sources:
font-src 'self' https://fonts.gstatic.com
frame-ancestors — who can embed the site in an iframe:
frame-ancestors 'none'
connect-src — sources for XHR, WebSocket, and Fetch:
connect-src 'self' https://api.example.com
Source values
| Value | Description |
|---|---|
'self' | Current domain only |
'none' | Completely blocked |
'unsafe-inline' | Allow inline scripts/styles |
'unsafe-eval' | Allow eval() |
https: | Any HTTPS source |
https://example.com | Specific domain |
Nginx configuration
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'nonce-$request_id'; style-src 'self' 'unsafe-inline';" always;Report-only mode (without blocking)
To test a policy without blocking resources:
Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report
Check CSP with reChecker
Use CSP Analyzer to analyze your security policy. The tool will show:
- Whether a CSP header is present
- A list of all directives and their values
- Potentially dangerous settings (unsafe-inline, unsafe-eval)
- Recommendations for tightening the policy
FAQ
CSP is breaking my site — what should I do?
Use Content-Security-Policy-Report-Only mode to test without blocking. Check for errors in the browser console and gradually add the required sources to the policy.
Is CSP needed for a static website? Yes, especially if the site accepts user input. Even static sites using a CDN can be attacked through compromised third-party scripts.
Is unsafe-inline bad? It weakens CSP protection because it allows inline scripts. The best practice is to use a nonce (a one-time token) or a hash for specific inline blocks instead of global unsafe-inline.