Content Security Policy (CSP) Generator for Nginx & Apache

Technical Standard Reviewed · Last review: August 29, 2026Official sources: W3C· MDN Web Docs

default-src

script-src (Javascript Scripts)

style-src (CSS Styles)

img-src (Images)

font-src (Fonts)

Complete Security Guide to Content Security Policy (CSP), HTTP Headers and XSS Mitigation

Content Security Policy (CSP) is one of the most effective browser-enforced security mechanisms for modern web applications. By specifying trusted source domains for scripts, styles, images, and fonts, CSP neutralizes Cross-Site Scripting (XSS), data injection, and malicious iframe embedding (clickjacking).

This generator structures compliant W3C Level 2 & Level 3 CSP directives ready for deployment in Nginx server blocks, Apache .htaccess files, PHP response headers, or HTML <meta> tags.

Anatomy of Key CSP Directives

Configure precise resource boundaries across critical directives:

default-src: The global fallback origin applied when specific resource directives are omitted.
script-src: Defines authorized JavaScript origins, protecting application state against injected third-party payloads.
style-src & font-src: Permits trusted typography and CSS CDNs (such as Google Fonts or Cloudflare CDNJS).
img-src: Governs image loading, inline SVG schemas, and data: URIs.

Server Headers (Nginx) vs HTML <meta> Implementation

Delivering CSP via HTTP response headers directly from your Nginx or Apache web server provides optimal protection across the entire document lifecycle. When server header access is constrained, HTML <meta http-equiv="Content-Security-Policy"> tags provide client-level security for static single-page apps.

Eliminating 'unsafe-inline' with Nonces and Hashes

While temporary prototyping frequently uses 'unsafe-inline', production security hardening replaces inline permissions with cryptographic nonces (random one-time tokens generated per HTTP request) or SHA-256 script integrity hashes.

Practical Example

Example 1: Standard Modern Web Application Policy

Input: Default: 'self' | Scripts: 'self' cdnjs.cloudflare.com | Styles: 'self' fonts.googleapis.com | Fonts: fonts.gstatic.com

Output / Result:

default-src 'self'; script-src 'self' https://cdnjs.cloudflare.com; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;

Restricts all assets to same-origin while whitelisting designated typography and JavaScript CDNs.

Example 2: Nginx Server Block Header Integration

Input: add_header Content-Security-Policy directive in /etc/nginx/sites-available/

Output / Result: add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self';" always;

Injects the policy header into all HTTP 200/300 responses automatically at the web server level.

How to Generate and Deploy a CSP Header in 4 Steps

Define Default & Script Sources

Set default-src fallback and declare all trusted domains hosting your JavaScript files.

Add Style, Font & Image Origins

Include trusted CDNs for CSS stylesheets (style-src), web fonts (font-src), and image assets (img-src).

Click "Generate CSP Headers"

Generate formatted syntax strings for Nginx configuration and HTML <meta> tags.

Deploy to Web Server or HTML Head

Paste the generated add_header line into your Nginx/Apache configuration or into your HTML <head>.

Frequently Asked Questions about Content Security Policy (CSP)

What is a Content Security Policy (CSP) and why is it essential for web security?

Content Security Policy (CSP) is an HTTP header security layer (W3C standard) that instructs the browser which source origins (domains, schemes, CDNs) are trusted for loading executable scripts, CSS stylesheets, images, fonts, and API requests, mitigating XSS and clickjacking vulnerabilities.

How does a CSP header defend against Cross-Site Scripting (XSS) and data exfiltration?

By declaring strict source allowlists (e.g. script-src 'self' https://trusted-cdn.com), the browser will refuse to execute malicious inline scripts, unauthorized third-party JavaScript injected by attackers, or illegitimate tracking beacons, shutting down XSS payloads.

What is the difference between implementing CSP via HTTP headers vs an HTML <meta> tag?

Deploying CSP via web server HTTP headers (in Nginx or Apache) is the most robust implementation because it supports all directives (including frame-ancestors, sandbox, and report-to). An HTML <meta http-equiv="Content-Security-Policy"> tag works well for static hosting but cannot enforce frame-ancestors or reporting.

Why should developers minimize or eliminate 'unsafe-inline' and 'unsafe-eval'?

The 'unsafe-inline' keyword allows unhashed inline <script> tags and onclick handlers to execute, which partially weakens XSS protection. The 'unsafe-eval' keyword permits eval() string execution. For maximum hardening, use cryptographic nonces ('nonce-...') or SHA-256 hashes instead.

What are the most critical CSP directives every web application should define?

Key directives include default-src (the global fallback), script-src (JavaScript sources), style-src (CSS stylesheets), img-src (image origins), font-src (web typography), connect-src (Fetch/AJAX/WebSocket endpoints), and frame-ancestors (clickjacking prevention).

Content Security Policy (CSP) Generator

Nginx Configuration:

HTML <meta> tag:

Complete Security Guide to Content Security Policy (CSP), HTTP Headers and XSS Mitigation

Anatomy of Key CSP Directives

Server Headers (Nginx) vs HTML <meta> Implementation

Eliminating 'unsafe-inline' with Nonces and Hashes

Practical Example

How to Generate and Deploy a CSP Header in 4 Steps

Define Default & Script Sources

Add Style, Font & Image Origins

Click "Generate CSP Headers"

Deploy to Web Server or HTML Head

Frequently Asked Questions about Content Security Policy (CSP)

What is a Content Security Policy (CSP) and why is it essential for web security?

How does a CSP header defend against Cross-Site Scripting (XSS) and data exfiltration?

What is the difference between implementing CSP via HTTP headers vs an HTML <meta> tag?

Why should developers minimize or eliminate 'unsafe-inline' and 'unsafe-eval'?

What are the most critical CSP directives every web application should define?

Content Security Policy (CSP) Generator

Nginx Configuration:

HTML <meta> tag:

Complete Security Guide to Content Security Policy (CSP), HTTP Headers and XSS Mitigation

Anatomy of Key CSP Directives

Server Headers (Nginx) vs HTML &lt;meta&gt; Implementation

Eliminating 'unsafe-inline' with Nonces and Hashes

Practical Example

How to Generate and Deploy a CSP Header in 4 Steps

Define Default & Script Sources

Add Style, Font & Image Origins

Click "Generate CSP Headers"

Deploy to Web Server or HTML Head

Frequently Asked Questions about Content Security Policy (CSP)

What is a Content Security Policy (CSP) and why is it essential for web security?

How does a CSP header defend against Cross-Site Scripting (XSS) and data exfiltration?

What is the difference between implementing CSP via HTTP headers vs an HTML &lt;meta&gt; tag?

Why should developers minimize or eliminate 'unsafe-inline' and 'unsafe-eval'?

What are the most critical CSP directives every web application should define?

Related Tools & Calculators

HTTP Security Headers Checker & Audit Tool

CORS Headers Inspector & Cross-Origin AJAX Debugger

security.txt (RFC 9116) Generator & Validator

Server Headers (Nginx) vs HTML <meta> Implementation

What is the difference between implementing CSP via HTTP headers vs an HTML <meta> tag?