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>.
Stop writing basic prompts. Unlock the exact 360-degree analysis frameworks used by top AI engineers.
A complete, production-ready workflow for extracting structured JSON data from unstructured research papers.
Are you building your own prompt workflows, custom GPTs, or automation scripts? Package them into a listing and start monetizing your expertise on the AIMD marketplace today.
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 Content Security Policy (CSP) is an added layer of security that helps detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. It works by restricting the origins that active and passive content can be loaded from.
The HTTP response header (Content-Security-Policy) is preferred because it covers the entire document immediately and supports all CSP directives. The HTML <meta> tag is a good fallback for static sites where you cannot control the server headers, but it does not support features like frame-ancestors or report-uri.
'unsafe-inline' allows the execution of inline <script> blocks and inline event handlers. It is generally considered a security risk and defeats much of the purpose of a CSP. It is highly recommended to use nonces or hashes instead of allowing unsafe-inline.
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 Account