CSP Header Generator

This CSP header generator builds a Content-Security-Policy header visually, so you can lock down which scripts, styles, images, and other resources a browser is allowed to load. Toggle the directives you need, click the sources you trust, and the finished header appears instantly — ready to paste into your web server.

A Content-Security-Policy is your front line against cross-site scripting (XSS), clickjacking, and other injection attacks. Without it, browsers load resources from any origin; with a tuned policy, only the domains you allow can serve content. This builder turns that policy into a copy-ready header in the exact format your stack expects — raw HTTP, Apache, Nginx, an HTML meta tag, or a PHP header() call.

Private by design: the whole policy is assembled in your browser. Your directives, custom domains, and generated header are never uploaded to any server.

How to Use the CSP Header Generator

Choose a starting point

Pick a preset to load a common configuration — Strict, Basic Website, SPA + API, WordPress, E-commerce, or CDN — or start from Blank to build from scratch.

Configure directives

Toggle a directive on by clicking its switch or header row. Then click quick-source buttons like 'self', 'none', or 'unsafe-inline', or type a custom domain such as cdn.example.com and click Add. Click a source again to remove it.

Review the warnings

As you build, the tool analyzes your policy and flags issues — red errors for real risks like a missing object-src or a wildcard source, yellow warnings for weak spots, and blue notices with helpful context.

Pick a format and copy

Switch the output tab to Raw, Apache, Nginx, Meta Tag, or PHP to match your server, then click Copy. Enable Report-Only first to test the policy without blocking anything.

Features

Visual Directive Builder

Every directive is an interactive row with a toggle. Enable one to reveal its source panel with quick-add buttons and a custom-domain input.

17 CSP Directives

Covers all the common directives across Fetch, Document, Navigation, and Other categories — from default-src and script-src to frame-ancestors and report-uri.

Quick Source Buttons

One click adds common values: 'self', 'none', 'unsafe-inline', 'unsafe-eval', 'strict-dynamic', data:, blob:, and https:.

7 Preset Templates

Start fast with Blank, Strict, Basic Website, SPA + API, WordPress, E-commerce, and CDN configurations built for real stacks.

Real-Time Security Analysis

Live warnings flag 'unsafe-inline' and 'unsafe-eval' in scripts, a missing object-src or base-uri, and wildcard sources that weaken your policy.

5 Output Formats

Export as a raw HTTP header, Apache directive, Nginx add_header, HTML meta tag, or PHP header() call — whatever your server needs.

Report-Only Mode

Switch the header to Content-Security-Policy-Report-Only to monitor violations without blocking resources while you tune the policy.

Smart Source Logic

Selecting 'none' clears the other sources since they are mutually exclusive, adding any source removes 'none', and duplicates are prevented automatically.

One-Click Copy

Copy the generated header to your clipboard in a single click, then paste it straight into your server config.

Fully Client-Side

Everything runs in your browser with no server calls and no tracking, so your policy stays on your device.

Frequently Asked Questions

What is a Content-Security-Policy (CSP) header?

A Content-Security-Policy is an HTTP response header that tells the browser which sources are allowed to load scripts, styles, images, fonts, and other resources on your page. It is one of the most effective defenses against cross-site scripting (XSS) and other injection attacks, because anything from a source you did not allow is blocked.

How do I create a CSP header for my site?

Start from a preset such as Strict or Basic Website, or begin Blank. Enable the directives you need, click or type the sources you trust, and the header is generated as you go. Then choose the output format for your server and click Copy — no need to memorize directive syntax.

Should I use a CSP meta tag or a response header?

A response header is the more capable option. The HTML <meta> tag cannot use Report-Only mode, cannot set frame-ancestors, and cannot use report-uri. Use the meta tag only when you cannot set server headers; otherwise prefer the Apache, Nginx, or PHP output for full CSP functionality.

What do default-src and script-src mean?

default-src is the fallback for any fetch directive you do not set explicitly — so default-src 'self' restricts unspecified resource types to your own domain. script-src controls where JavaScript may load from, and any directive you set explicitly overrides default-src for that resource type.

How do I test CSP without breaking my site?

Enable Report-Only mode. The tool then emits a Content-Security-Policy-Report-Only header, which logs violations without blocking any resources. Watch the reports, refine your sources, and only switch to the enforcing Content-Security-Policy header once the policy is clean.

Is 'unsafe-inline' really that dangerous?

Yes. Allowing 'unsafe-inline' in script-src lets any inline script run — including scripts an attacker injects through an XSS hole — which largely defeats the protection CSP provides. The builder flags it for you. Prefer nonces or hashes, which allow specific inline scripts while still blocking injected ones.

Why should I always include object-src 'none'?

The object-src directive controls plugins like Flash and Java applets, which can run arbitrary code and bypass other CSP protections. Setting object-src 'none' blocks all plugin content, and since modern sites rarely need plugins, it is a safe, recommended default — the tool warns when it is missing.