What does default-src do?

default-src is the fallback directive for any resource type that does not have its own explicit directive. Setting default-src 'self' means only same-origin resources are allowed unless a more specific directive overrides it.

Is 'unsafe-inline' safe to use?

No — 'unsafe-inline' disables inline script protection and is the main target CSP is designed to prevent. If you need inline scripts, use a nonce or hash instead of 'unsafe-inline'.

guide

How to Create a Content Security Policy Online — Free (2026)

By Rui Barreira · Last updated: 18 June 2026

The brevio Content Security Policy Builder generates a CSP header value or meta tag through a point-and-click interface. Toggle directives, add domains, and copy the header or meta tag — entirely in your browser, no server required.

What Is a Content Security Policy?

A Content Security Policy (CSP) is an HTTP response header that tells the browser which sources of content — scripts, styles, images, fonts, frames — are allowed to load on a page. It is the most effective defense against Cross-Site Scripting (XSS) and data injection attacks.

CSP Directive Reference

Directive	Controls	Common value
default-src	Fallback for all other directives not explicitly set	`'self'`
script-src	JavaScript sources	`'self'`
style-src	CSS sources	`'self' 'unsafe-inline'`
img-src	Image sources	`'self' data: https:`
connect-src	fetch/XHR/WebSocket endpoints	`'self'`
font-src	Font files	`'self' https://fonts.gstatic.com`
frame-src	Iframes and frames	`'none'`
worker-src	Web Workers and Service Workers	`'self'`

CSP Source Keywords

Keyword	Meaning
`'self'`	Same origin (protocol + domain + port)
`'none'`	Block all sources for this directive
`'unsafe-inline'`	Allow inline scripts/styles (weakens XSS protection)
`'unsafe-eval'`	Allow eval() and similar dynamic code execution
`https:`	Any HTTPS URL
`data:`	data: URI scheme (base64 images etc.)

How to Build a CSP Step by Step

Open the CSP Builder.
Start with default-src 'self'. This locks down everything to same-origin by default. Every other directive either inherits this or overrides it.
Add exceptions for each resource type. If you load scripts from a CDN, add the CDN domain to script-src. If you use Google Fonts, add https://fonts.googleapis.com to style-src and https://fonts.gstatic.com to font-src.
Avoid 'unsafe-inline' for scripts if possible. Inline scripts are the most common XSS vector. Use nonces or hashes instead. If you cannot avoid it (e.g. legacy code), add it but document the reason.
Set frame-src 'none' if you do not embed any iframes — this prevents your site from loading any external content in a frame.
Copy and deploy. Prefer the HTTP header form over the meta tag — the header is evaluated before the page parses, providing stronger protection. Add it to your server or CDN configuration.

Deploying CSP with Report-Only Mode First

Before enforcing a CSP, deploy it in report-only mode to catch violations without breaking anything:

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report

Violations are logged to the report endpoint without blocking anything. Review the reports for a week, add missing domains to your policy, then switch to the enforcing Content-Security-Policy header.

CSP for Next.js and React Applications

React/Next.js apps with inline styles (emotion, styled-components) require 'unsafe-inline' in style-src, or use nonces. Next.js 13+ supports CSP nonces via middleware:

// middleware.ts
import { NextResponse } from 'next/server'
import crypto from 'crypto'

export function middleware() {
  const nonce = crypto.randomBytes(16).toString('base64')
  const csp = `script-src 'self' 'nonce-${nonce}'`
  const headers = new Headers()
  headers.set('Content-Security-Policy', csp)
  headers.set('x-nonce', nonce)
  return NextResponse.next({ headers })
}

Frequently Asked Questions

What is the difference between CSP header and CSP meta tag?

The HTTP header is processed by the browser before the page parses, so it is stricter and more reliable. The meta tag is parsed when the browser encounters it in the HTML, which means some resources loaded before it (in the <head>) may escape enforcement. Use the header for security-critical deployments.

Does CSP break third-party scripts?

Yes — any script not in your allowlist will be blocked. Common culprits: Google Tag Manager, Intercom, HubSpot, analytics pixels. Add each third-party domain to script-src, connect-src, and img-src as needed. This is intentional — you decide what runs on your page.

What is a CSP nonce?

A nonce (number used once) is a random value generated per request and added to both the CSP header and a nonce attribute on script/style tags. This allows specific inline scripts while blocking all others — a much stronger approach than 'unsafe-inline'.

Frequently Asked Questions

What is a Content Security Policy?: A Content Security Policy (CSP) is an HTTP response header that tells the browser which sources are allowed to load scripts, styles, images, and other resources. It is the primary defence against cross-site scripting (XSS) attacks.
What does default-src do?: default-src is the fallback directive for any resource type that does not have its own explicit directive. Setting default-src 'self' means only same-origin resources are allowed unless a more specific directive overrides it.
Is 'unsafe-inline' safe to use?: No — 'unsafe-inline' disables inline script protection and is the main target CSP is designed to prevent. If you need inline scripts, use a nonce or hash instead of 'unsafe-inline'.