NginxHow-ToBeginner · 4 min read

How to Configure Content Security Policy in Nginx

To configure Content Security Policy in nginx, add the add_header Content-Security-Policy directive inside your server or location block with your desired policy rules. This header tells browsers which sources are allowed for scripts, styles, images, and other resources, improving security by preventing unwanted content loading.

📐

Syntax

The add_header directive in Nginx is used to add HTTP headers to responses. For Content Security Policy, the syntax is:

add_header Content-Security-Policy "policy-rules";

Here, policy-rules is a string defining allowed sources for different content types like scripts, styles, images, etc.

nginx

add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline'; img-src *;";

💻

Example

This example shows how to add a Content Security Policy header in an Nginx server block to allow resources only from the same origin and a trusted CDN for scripts, while allowing inline styles and images from any source.

nginx

server {
    listen 80;
    server_name example.com;

    location / {
        root /var/www/html;
        index index.html;

        add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline'; img-src *;" always;
    }
}

Output

When a browser requests a page, the response headers include: Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline'; img-src *;

⚠️

Common Pitfalls

Common mistakes when configuring CSP in Nginx include:

Forgetting to include add_header inside the correct block (server or location).
Not quoting the policy string properly, causing syntax errors.
Using add_header without always keyword, which may skip headers on some error responses.
Overly restrictive policies that block needed resources, breaking site functionality.

To ensure headers are always sent, use add_header Content-Security-Policy "policy" always;

nginx

## Wrong way (header may not be sent on errors):
add_header Content-Security-Policy "default-src 'self'";

## Right way (header always sent):
add_header Content-Security-Policy "default-src 'self'" always;

📊

Quick Reference

Directive	Description	Example Value
default-src	Fallback for all resource types	'self'
script-src	Allowed sources for JavaScript	'self' https://cdn.example.com
style-src	Allowed sources for CSS	'self' 'unsafe-inline'
img-src	Allowed sources for images	*
font-src	Allowed sources for fonts	'self' https://fonts.gstatic.com
connect-src	Allowed sources for AJAX/WebSocket	'self' https://api.example.com

✅

Key Takeaways

Use the add_header directive in Nginx to set Content Security Policy headers.

Always quote the policy string and consider using the 'always' flag to send headers on all responses.

Test your CSP to avoid blocking needed resources and breaking your site.

Start with a simple policy like default-src 'self' and expand as needed.

Place the add_header directive inside the appropriate server or location block.