Production-ready CSP (Content Security Policy) template

By Shiva

•

October 31, 2025

Here is production-ready CSP (Content Security Policy) template you can safely apply to most React, Node.js, or static sites (like those hosted on AWS S3 + CloudFront, Vercel, or Nginx).

Secure Default CSP Template

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com;
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
  img-src 'self' data: https://images.unsplash.com;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.yourdomain.com;
  object-src 'none';
  frame-ancestors 'none';
  base-uri 'self';
  form-action 'self';
  upgrade-insecure-requests;

Explanation of Key Directives

DirectivePurposeExample

default-src 'self'

Restricts all content (by default) to same-origin.

Prevents data from external origins.

script-src

Restricts allowed JS sources.

Add CDN URLs you actually use (e.g. jsdelivr, cdnjs).

style-src

Restricts CSS sources. 'unsafe-inline' may be needed for React style tags, but avoid if possible.

img-src

Controls image sources; data: allows base64 images.

font-src

Permits fonts from trusted CDNs.

connect-src

Controls APIs, WebSockets, and fetch calls.

object-src 'none'

Blocks Flash, PDF, and other plugin objects.

frame-ancestors 'none'

Prevents the site from being embedded (anti–clickjacking).

base-uri 'self'

Restricts the <base> tag source.

form-action 'self'

Prevents form submissions to external domains.

upgrade-insecure-requests

Forces all HTTP requests to upgrade to HTTPS automatically.

Add to Your Server

Nginx

add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data: https://images.unsplash.com; font-src 'self' https://fonts.gstatic.com; connect-src 'self' https://api.yourdomain.com; object-src 'none'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests;" always;

Apache

Header set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data: https://images.unsplash.com; font-src 'self' https://fonts.gstatic.com; connect-src 'self' https://api.yourdomain.com; object-src 'none'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests;"

Node.js / Express

app.use((req, res, next) => {
  res.setHeader("Content-Security-Policy",
    "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data: https://images.unsplash.com; font-src 'self' https://fonts.gstatic.com; connect-src 'self' https://api.yourdomain.com; object-src 'none'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests;");
  next();
});

Test Your CSP

Use:

https://csp-evaluator.withgoogle.com
Browser DevTools → Console → Look for "CSP violation" messages.

Tip for Tuning Safely

Start with:

Content-Security-Policy-Report-Only:

instead of enforcing it, so you can monitor what would have been blocked before breaking your production site.

For super strict, remember this will be more restrictive won't allow inline styling.

A stricter CSP (no 'unsafe-inline') — ideal for hardened React/Next.js or enterprise apps:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com;
  style-src 'self' https://fonts.googleapis.com;
  img-src 'self' data:;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.yourdomain.com;
  object-src 'none';
  frame-ancestors 'none';
  base-uri 'self';
  form-action 'self';
  upgrade-insecure-requests;

✅ Notes:

Removes all inline JS/CSS execution — use React/Next.js hashed styles or CSP nonce.
Safe for production; pass it through
CSP Evaluator
before rollout.