What is Content Security Policy?

CSP is an HTTP response header that tells browsers which sources are trusted for loading scripts, styles, images, and other resources. It prevents cross-site scripting (XSS) by blocking resources from untrusted origins.

Does CSP replace HTTPS?

No. CSP and HTTPS address different threats. HTTPS protects data in transit. CSP prevents malicious scripts from executing on your page. You need both.

Security Header

Content Security Policy (CSP)

Last updated: April 2026

Content Security Policy is an HTTP response header that tells browsers which sources are trusted for loading scripts, styles, images, fonts, and other resources. It is the primary browser-level control for reducing cross-site scripting (XSS) risk.

Basic CSP header

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

Key directives

default-src — fallback for all resource types not explicitly listed.

script-src — controls JavaScript sources. The most security-critical directive.

style-src — controls CSS sources.

img-src — controls image sources.

connect-src — controls fetch, XHR, and WebSocket destinations.

frame-ancestors — controls which pages can embed yours in an iframe. Replaces X-Frame-Options.

object-src — controls plugins. Set to 'none' to block Flash and other plugins.

Test without breaking — report-only mode

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

Inline scripts — nonce vs unsafe-inline

# Nonce (recommended) — generates a random value per request
Content-Security-Policy: script-src 'self' 'nonce-RANDOM_BASE64'
# In HTML: <script nonce="RANDOM_BASE64">...</script>

# Hash — for static inline scripts
Content-Security-Policy: script-src 'self' 'sha256-HASH_OF_SCRIPT_CONTENT'

# unsafe-inline — avoid, defeats XSS protection
Content-Security-Policy: script-src 'self' 'unsafe-inline'