How to Implement Content Security Policy
Content Security Policy is the most effective defense against XSS attacks. It provides granular control over which resources the browser can load and execute. This guide covers building, testing, and deploying a CSP for production applications.
Find security issues automatically before attackers do.
Follow These Steps
Start with a basic restrictive policy
Begin with default-src self and expand as needed.
Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'Monitor violations in report-only mode
Deploy as report-only first and collect violation reports.
// Create a report endpoint
export async function POST(req: Request) {
const report = await req.json()
console.log('CSP violation:', report['csp-report'] || report)
return new Response(null, { status: 204 })
}Add exceptions for your dependencies
Based on violation reports, add necessary domains for third-party resources.
// Common additions:
// Google Analytics
script-src 'self' https://www.googletagmanager.com
connect-src 'self' https://www.google-analytics.com
// Stripe
script-src 'self' https://js.stripe.com
frame-src https://js.stripe.com
// Google Fonts
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com
font-src 'self' https://fonts.gstatic.comImplement nonce-based script loading
Use nonces instead of unsafe-inline for script-src.
// Generate nonce per request
const nonce = crypto.randomUUID()
const csp = `script-src 'self' 'nonce-${nonce}'`
// Apply nonce to script tags
<script nonce={nonce}>/* inline script */</script>Switch to enforcing mode
After monitoring shows no legitimate violations, switch from report-only to enforcing.
// Change header name from:
Content-Security-Policy-Report-Only: ...
// To:
Content-Security-Policy: ...What You'll Achieve
Your application has an enforced Content Security Policy that blocks XSS attacks, restricts resource loading to trusted sources, and continues to report violations for monitoring.
Common Mistakes to Avoid
Mistake
Deploying CSP in enforcing mode without testing
Fix
Always start with report-only mode. Monitor for at least a week before enforcing to avoid breaking legitimate functionality.
Mistake
Using unsafe-inline and unsafe-eval
Fix
These weaken CSP significantly. Use nonces for inline scripts and refactor code to avoid eval().
Frequently Asked Questions
Is CSP worth the effort?
Yes. CSP is the single most effective defense against XSS, which is the most common web vulnerability. The initial setup effort pays off in significantly reduced attack surface.
Can CSP break my website?
Yes, if deployed without testing. Always start with report-only mode to identify what would be blocked before enforcing.
Ready to Secure Your App?
VAS automatically scans your deployed app for the security issues covered in this guide. Get actionable results in minutes.
Start Security Scan