Last updated
CSP Directive Reference
default-src: fallback for all content types not explicitly specifiedscript-src: JavaScript sources — most critical directive for XSS preventionstyle-src: CSS sourcesimg-src: image sourcesconnect-src: fetch, XHR, WebSocket connection targetsfont-src: web font sourcesframe-src: iframe sourcesframe-ancestors: who can embed this page in an iframeobject-src: plugin sources — set to 'none' to block Flash and pluginsbase-uri: restricts <base> tag URLs — set to 'self' to prevent base tag injection
The CSP Generator on TechConverter.me builds correctly formatted Content Security Policy headers for any web application. Configure your directives, add third-party service presets, and get a ready-to-deploy CSP header with explanations of each directive's security implications.
Examples
Example 1: Minimal Strict CSP for a Simple Website
A static website with no third-party scripts needs a strict CSP that only allows its own resources:
Content-Security-Policy:
default-src 'self';
script-src 'self';
style-src 'self';
img-src 'self' data:;
font-src 'self';
connect-src 'self';
frame-ancestors 'none';
base-uri 'self';
form-action 'self';
Nginx configuration:
add_header Content-Security-Policy
"default-src 'self'; script-src 'self'; style-src 'self';
img-src 'self' data:; font-src 'self'; connect-src 'self';
frame-ancestors 'none'; base-uri 'self'; form-action 'self';"
always;
This policy blocks all external resources, inline scripts, and inline styles. It is the most secure starting point and should be relaxed only as needed for specific integrations.
Example 2: CSP with Google Analytics and Fonts
A marketing website uses Google Analytics and Google Fonts. The CSP must allow these third-party resources:
Content-Security-Policy:
default-src 'self';
script-src 'self' https://www.googletagmanager.com
https://www.google-analytics.com;
style-src 'self' https://fonts.googleapis.com;
font-src 'self' https://fonts.gstatic.com;
img-src 'self' data: https://www.google-analytics.com
https://www.googletagmanager.com;
connect-src 'self' https://www.google-analytics.com
https://analytics.google.com
https://stats.g.doubleclick.net;
frame-ancestors 'none';
Example 3: CSP with Nonces for Inline Scripts
A web application has some necessary inline scripts. Using nonces is the secure way to allow them:
Server generates a random nonce per request:
nonce = crypto.randomBytes(16).toString('base64')
// e.g., "rAnd0mN0nc3Base64=="
CSP header (with nonce):
Content-Security-Policy:
script-src 'self' 'nonce-rAnd0mN0nc3Base64==';
style-src 'self' 'nonce-rAnd0mN0nc3Base64==';
HTML template (nonce injected server-side):
<script nonce="rAnd0mN0nc3Base64==">
// This inline script is allowed
const config = { apiUrl: '/api', debug: false };
</script>
<!-- Script without nonce is BLOCKED -->
<script>alert('XSS attempt')</script>
Node.js/Express example:
app.use((req, res, next) => {
res.locals.nonce = crypto.randomBytes(16).toString('base64');
res.setHeader('Content-Security-Policy',
`script-src 'self' 'nonce-${res.locals.nonce}'`);
next();
});