What Is a Content Security Policy (CSP) and Why You Need One

A Content Security Policy (CSP) is an HTTP response header that tells the browser exactly which sources of content — scripts, styles, images, fonts — are allowed to load on your page. It's one of the most effective defenses against Cross-Site Scripting (XSS) attacks.

Why It Matters

Without a CSP, if an attacker manages to inject a malicious script into your page (through a comment field, a compromised third-party library, or any other injection point), that script runs with full access to your page — reading cookies, capturing keystrokes, or redirecting users. A properly configured CSP tells the browser to simply refuse to execute anything not on the allow-list, neutralizing the attack even if the injection succeeds.

The Basics of a CSP Header

A CSP is built from directives — each one controlling a different type of resource. 'script-src' controls JavaScript, 'style-src' controls CSS, 'img-src' controls images, and so on. A minimal, reasonably strict starting point looks like: default-src 'self'; script-src 'self'; style-src 'self'. This allows only same-origin resources — you'd add specific external domains as needed.

Common Mistakes

The most common mistake is adding 'unsafe-inline' or 'unsafe-eval' to script-src without a clear reason — these largely defeat the purpose of a CSP by allowing arbitrary inline scripts. If your app needs inline scripts, look into using nonces or hashes instead, which allow specific, verified inline scripts while still blocking injected ones.

Build Yours in Minutes

Writing a CSP by hand is tedious and easy to get wrong. Nexora Shield's CSP Generator lets you pick directives and allowed domains through a simple UI and copies out a ready-to-use header.