CSP Generator

Generate Strict Content Security Policy Headers to Prevent XSS

Directive Configuration

default-srcFallback for all other directives

script-srcJavaScript execution privileges

style-srcCSS stylesheets

img-srcImages and favicons

connect-srcFetch, XHR, WebSockets

upgrade-insecure-requestsForce HTTP to HTTPS

Generated Policy

Raw Header Value

default-src 'self';

HTML Meta Tag

<meta http-equiv="Content-Security-Policy" content="default-src 'self';">

Next.js (next.config.js)

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: "default-src 'self';"
          }
        ],
      },
    ]
  },
}

Nginx

add_header Content-Security-Policy "default-src 'self';" always;

or on-click handlers), which is exactly what XSS attacks exploit. 'unsafe-eval' allows the use of string-to-code execution functions like eval(), which can also be used to run malicious payloads. Avoiding these is critical for a strict and secure CSP."}},{"@type":"Question","name":"How does default-src work?","acceptedAnswer":{"@type":"Answer","text":"The default-src directive serves as a fallback for the other CSP fetch directives. If a specific directive like script-src or img-src is not explicitly defined in your policy, the browser will fall back to the rules defined in default-src. It is best practice to set default-src to 'self' or 'none' to enforce a default deny policy."}}]}

About CSP

What is a Content Security Policy (CSP)?

A Content Security Policy (CSP) is an added layer of security that helps detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. It works by restricting the domains that a browser should consider to be valid sources of executable scripts, stylesheets, and other resources.

Why shouldn't I use 'unsafe-inline' or 'unsafe-eval'?

Using 'unsafe-inline' allows the execution of inline scripts and styles (like <script>...</script> or on-click handlers), which is exactly what XSS attacks exploit. 'unsafe-eval' allows the use of string-to-code execution functions like eval(), which can also be used to run malicious payloads. Avoiding these is critical for a strict and secure CSP.

How does default-src work?

The default-src directive serves as a fallback for the other CSP fetch directives. If a specific directive like script-src or img-src is not explicitly defined in your policy, the browser will fall back to the rules defined in default-src. It is best practice to set default-src to 'self' or 'none' to enforce a default deny policy.

Engineering Guides

Master This Tool

Deep-dive guides and tutorials for advanced users.

Securing AI Agents: How to Detect & Prevent Prompt Injection

A Cybersecurity Architect's guide to prompt injection in 2026. Learn about Token to Shell vectors, RAG poisoning, and embedding-based anomaly detection.

Read Guide

The Death of LocalStorage: Why Enterprise Apps Use Cookies

LocalStorage is an architectural liability. Learn why modern Next.js apps use HttpOnly cookies to prevent XSS token theft and secure account takeovers.

Read Guide

CORS is Not a Security Feature: Mastering Headers in 2026

Stop treating CORS as a firewall. Learn the architectural difference between CORS and CSRF, the Reflecting Origin trap, and how to optimize API preflights.

Read Guide