CSP Directives Guide
A comprehensive reference for every Content Security Policy directive. Understand what each directive controls, see practical examples, and learn which directives you need for your site.
CSP Header Builder
Build Content Security Policy headers visually with framework presets, security analysis, and multi-format output.
Directives
Fetch Directives
Document Directives
Navigation Directives
Output Format
Generated Policy
Content-Security-Policy: upgrade-insecure-requests
Security Analysis
Policy Stats
What are CSP directives?
CSP directives are rules that tell the browser which resources are allowed to load and execute on your page. Each directive controls a specific resource type: script-src controls JavaScript, style-src controls CSS, img-src controls images, and so on. The default-src directive acts as a fallback for any directive you don't explicitly set.
Fetch directives vs document directives
Fetch directives (script-src, style-src, img-src, connect-src, font-src, media-src, object-src, frame-src, worker-src, manifest-src) control where resources can be loaded from. Document directives (base-uri, sandbox) control properties of the document itself. Navigation directives (form-action, frame-ancestors, navigate-to) control where the document can navigate or be embedded.
Source values explained
'self' allows resources from the same origin. 'none' blocks all resources. 'unsafe-inline' allows inline scripts and styles (weakens CSP significantly). 'unsafe-eval' allows eval() and similar dynamic code execution. 'strict-dynamic' trusts scripts loaded by already-trusted scripts — used with nonces for modern CSP. Specific domains like https://cdn.example.com whitelist individual origins.
Frequently Asked Questions
What is the most important CSP directive?
script-src is the most important for security — it controls which JavaScript can execute, directly preventing XSS attacks. Always set default-src as a fallback, then override with specific directives like script-src, style-src, and img-src.
Do I need to set every directive?
No. Any directive not explicitly set falls back to default-src. Set default-src to 'self', then only override directives where you need different rules (e.g., img-src for CDN images, connect-src for API endpoints).
What does 'strict-dynamic' do?
'strict-dynamic' tells the browser to trust scripts loaded by already-trusted scripts (those matching a nonce or hash). It ignores host-based allowlists, making your CSP resilient to bypass techniques. It's the recommended approach for modern SPAs.
Related Generate Tools
CSS Gradient Generator
Create beautiful CSS gradients visually with live preview
QR Code Generator
Generate customizable QR codes from text or URLs
Color Palette Generator
Generate harmonious color palettes using color theory algorithms
Box Shadow Generator
Design CSS box shadows visually with multiple layers, presets, and live preview