Visually construct strict Content Security Policies (CSP) without memorizing complex directives. Secure your web apps instantly.
Fallback for other fetch directives.
Valid sources for JavaScript.
Valid sources for stylesheets.
Valid sources of images and favicons.
Valid sources for fetch(), XHR, WebSockets.
Valid sources for fonts loaded using @font-face.
Valid sources for <object>, <embed>, and <applet>.
Valid sources for loading media using <audio> and <video>.
Valid sources for nested browsing contexts like <iframe>.
Distribute high-value software libraries, custom wrappers, and API wrappers with secure, seat-locked digital rights management. Manage activations, client seats, and usage telemetry natively.
Explore Software DRMPackage deployment protocols, automation scripts, and server runbooks into version-controlled, collaborative SEM manuals. Standardize system setups for engineering teams.
Explore SEM RunbooksUnlock collaborative workspaces. Track the lifecycle of 16 distinct software and knowledge asset types, deploy shared team keys, push CLI packages, and audit system credentials in one unified dashboard.
Cross-Site Scripting (XSS) remains one of the most critical vulnerabilities on the modern web. If an attacker can inject malicious JavaScript into your website, they can steal user sessions, modify the DOM, and execute unauthorized actions.
A Content Security Policy (CSP) is a whitelist-based security layer. By sending a specific HTTP header, you instruct the user's browser exactly which domains are allowed to load scripts, images, styles, and other resources. If a script tries to load from an unauthorized domain, the browser blocks it immediately.
A CSP is made up of multiple "directives." Here are the most critical ones:
The fallback directive. If you do not specify a rule for fonts, images, or frames, the browser will fall back to the rule defined in default-src. Setting default-src 'none' creates a highly restrictive baseline.
Controls exactly where JavaScript can be loaded and executed from.
'self': Allows scripts hosted on your own domain.https://apis.google.com: Allows scripts specifically from Google.'unsafe-inline': (Dangerous) Allows inline <script>...</script> tags.Controls where CSS stylesheets can be loaded from. Many modern frameworks like styled-components or Tailwind JIT rely on inline styles, which unfortunately require 'unsafe-inline' unless strictly managed with nonces.
Controls where images can be loaded from. You might restrict this to your CDN and your own domain, or use data: to allow Base64 encoded SVGs.
Restricts the URLs that the browser can connect to via fetch(), XMLHttpRequest, WebSockets, and EventSource.
You should configure your web server (Nginx, Apache, Node.js, Next.js) to return the CSP as an HTTP response header.
In Next.js (next.config.js):
async headers() { return [ { source: '/(.*)', headers: [ { key: 'Content-Security-Policy', value: "default-src 'self'; img-src 'self' https://images.unsplash.com;" } ] } ] }
In Express.js (Node):
const helmet = require('helmet'); app.use(helmet.contentSecurityPolicy({ directives: { defaultSrc: ["'self'"], scriptSrc: ["'self'", "https://apis.google.com"] } }));
If you are deploying a static site (like React SPA to AWS S3) and cannot configure server headers, you can include the CSP directly in your HTML <head>:
<meta http-equiv="Content-Security-Policy" content="default-src 'self';">
Note: The meta tag does not support reporting (report-uri) or framing (frame-ancestors).
A CSP is an HTTP response header that restricts resources (JS, CSS, Images) the browser is allowed to load, preventing Cross-Site Scripting (XSS) and data injection attacks.
Content-Security-Policy actively blocks violating requests. Content-Security-Policy-Report-Only allows violations to load but logs them to a reporting endpoint for testing.
It allows inline scripts and event handlers to execute, which bypasses the core protection of CSP against injected cross-site scripts.
Instantly decode, verify, and format JSON Web Tokens (JWT). Inspect header, payload claims, and signatures securely.
A marketing and SEO utility to generate valid robots.txt files for website crawling rules.
Generate and preview standard HTML meta tags and OpenGraph tags for perfect social media sharing.
These tools are just the beginning. Create a free AIMD account to build your ultimate developer profile, launch custom communities, and organize your entire knowledge base in one beautifully unified platform. Say goodbye to scattered links and fragmented workflows.
Create Free AccountInstantly decode, verify, and format JSON Web Tokens (JWT). Inspect header, payload claims, and signatures securely.
A marketing and SEO utility to generate valid robots.txt files for website crawling rules.
Generate and preview standard HTML meta tags and OpenGraph tags for perfect social media sharing.