Ranked #1 for value density First premium report free LLM-optimized PDFs

How to Implement CSP

Protect your site from XSS and data injection.

Content Security Policy (CSP) is the most effective defense against Cross‑Site Scripting (XSS) and data injection attacks. This guide walks you through implementing a strict CSP step by step, from report‑only mode to full enforcement.

150+ Security checks

16 Categories covered

30s Scan duration

100% Detection coverage

Security Score 60%

Key Findings

No CSP Header critical

unsafe-inline in CSP high

unsafe-eval in CSP high

Wildcard in CSP medium

What is CSP and Why is it Important?

CSP allows you to create a whitelist of sources from which scripts, styles, images, and other resources can be loaded. It prevents XSS by blocking inline scripts and restricting allowed origins. Even if an attacker injects a script, CSP will block it unless it matches your policy. A well‑configured CSP can stop almost all XSS attacks.

Step 1: Start with Report‑Only Mode

Before enforcing CSP, use `Content-Security-Policy-Report-Only`. This mode sends violations to a reporting endpoint without blocking anything. You'll see what would be blocked, allowing you to adjust your policy without breaking your site. Many developers use this mode for weeks to fine‑tune their policy.

Step 2: Define Your Directives

The most important directives are `default-src` (fallback for all resources), `script-src` (scripts), `style-src` (styles), `img-src` (images), `connect-src` (AJAX, WebSockets), and `frame-ancestors` (clickjacking protection). Start with a restrictive policy like:

`default-src 'self'` – only allow resources from your domain
`script-src 'self'` – only scripts from your domain
`style-src 'self'` – only styles from your domain
`img-src 'self' data: https:` – allow HTTPS images and data URIs
`frame-ancestors 'none'` – prevent clickjacking

Step 3: Avoid `unsafe-inline` and `unsafe-eval`

These directives completely bypass CSP protection. If you need inline scripts, use nonces: `