Fix Guide

How to Add a Content-Security-Policy (CSP) Header

Add a CSP to block cross-site scripting (XSS) by controlling what resources can load.

Medium High Impact 40 min

Why It Matters

A Content-Security-Policy is the strongest defense against XSS — it tells the browser exactly which sources of scripts, styles and images to trust and blocks everything else. It is also a quality/trust signal.

How to Fix

Inventory your sources

List every domain you load scripts, styles, fonts, images and frames from (analytics, fonts, embeds).

Start in report-only

Ship Content-Security-Policy-Report-Only first to catch violations without breaking the site, then promote to enforcing.

Tighten over time

Remove unsafe-inline/unsafe-eval by moving to nonces/hashes once the basics work.

Code Fix

http

Before (broken)

# No Content-Security-Policy header

After (fixed)

Content-Security-Policy: default-src 'self'; script-src 'self' https://www.googletagmanager.com; img-src 'self' data: https:; style-src 'self' 'unsafe-inline'; frame-ancestors 'none'

Platform-Specific Instructions

WordPress

Set the header via a security plugin or .htaccess. Test in report-only first — plugins inject inline scripts that a strict CSP will block.

Next.js

Define CSP in headers() or middleware; use a nonce for inline scripts.

Check with our tool

CSP Header Generator

Want to find all issues at once?

Run a free audit and get a prioritized fix list with auto-generated code.

Run a free audit

How to Add a Content-Security-Policy (CSP) Header — Fix Guide | SlapMyWeb