SecureStartKit
SecurityFeaturesPricingDocsBlogChangelog
Sign inBuy Now
Home/Glossary/CSP
Application Security

CSP(Content Security Policy)

Also known as: Content Security Policy, content-security-policy header

Definition

CSP (Content Security Policy) is an HTTP response header that tells the browser which sources of scripts, styles, images, and other resources are allowed to load on a page. A well-configured CSP blocks injected scripts even if an XSS vulnerability exists in the application code.

What is CSP?

Content Security Policy is set via the Content-Security-Policy response header. The header lists allowed origins per resource type: script-src 'self' 'nonce-abc123'; style-src 'self' 'unsafe-inline'; img-src 'self' data:. The browser refuses to load any resource that does not match the policy and logs the violation.

How does nonce-based CSP work in Next.js?

A Routing Middleware (or proxy) generates a random nonce per request and injects it into both the CSP header and the inline <script nonce="..."> tags rendered by the app. Inline scripts without the nonce are blocked, which stops attacker-injected scripts from running even if the HTML contains them.

Why is CSP a defense-in-depth layer for XSS?

XSS happens when attacker-controlled HTML reaches the page. Even with React's escaping and Server Components, a single use of React's raw-HTML escape-hatch prop can introduce injection. CSP blocks the injected script from executing, turning a code-execution bug into a console-warning bug. The XSS still exists, but the impact is contained.

Learn more

  • Next.js Security Hardening Checklist
  • CSRF, XSS, SQL Injection Prevention
  • Missing Security Headers and CSP: the fix

Related terms

  • CORSCORS (Cross-Origin Resource Sharing) is the browser mechanism that controls which origins can call which API endpoints. The server declares allowed origins via Access-Control-Allow-Origin headers, and the browser blocks cross-origin requests that fail the check.
  • XSSXSS (Cross-Site Scripting) is a vulnerability where attacker-controlled content reaches a page and executes as JavaScript in the victim's browser. React mitigates XSS by default through JSX escaping, but the raw-HTML escape-hatch prop, raw HTML in MDX, and trusted-data assumptions still create injection paths.
  • CSRFCSRF (Cross-Site Request Forgery) is an attack where a malicious site causes the victim's browser to send a request to a target site using the victim's existing session cookies. In Next.js App Router, Server Actions defend against CSRF by checking the Origin header against the Host on every POST.
← Back to full glossary
SecureStartKit

The security-first Next.js SaaS template. Auth, payments, and everything you need to launch - with backend-only data access, Zod validation on every input, and built-in optimization for AI coding agents.

Summarize with AI

Product

  • Security
  • Features
  • Pricing
  • FAQ
  • Docs
  • About

Use Cases

  • For Indie Hackers
  • For Solo Developers
  • Fintech SaaS
  • Internal Tools
  • Healthtech SaaS

Free Tools

  • All Tools
  • RLS Policy Generator
  • Security Checklist
  • Security Headers
  • JWT Decoder
  • JWT Generator
  • CORS Config Generator
  • JSON to Zod Converter
  • API Key Generator
  • Stripe Webhook Verifier
  • Stripe Fee Calculator
  • SaaS Pricing Calculator
  • Tech Stack Costs
  • OG Image Preview

Compare

  • All comparisons
  • vs ShipFast
  • vs Makerkit
  • vs Supastarter
  • vs Divjoy
  • vs Nextbase
  • One-time vs subscription

Resources

  • Blog
  • Glossary
  • Security Patterns
  • Changelog
  • Contact
  • Privacy
  • Terms

More from the same maker

  • AppScreenshotStudio
  • QueryScope
  • FrictionScope
  • MCP Hunter
  • BookIllustrationAI
  • MyCVCraft
  • StyleMyFade

© 2026 SecureStartKit. All rights reserved.

Built with SecureStartKit