How It Works

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. Each directive targets a specific resource type: script-src controls JavaScript, style-src controls CSS, img-src controls images, and so on. The builder assembles only the directives you fill in, joins them with semicolons, and validates that no common insecure keywords ('unsafe-inline', 'unsafe-eval') appear in your script policy.

Use Cases

  • Setting up a strict CSP for a new web application
  • Auditing an existing policy to identify insecure directives
  • Generating the <meta http-equiv> equivalent for static sites that cannot set HTTP headers
  • Learning which directives exist and what they control
  • Creating a baseline policy to refine with browser DevTools

Example

Input: default-src 'self', object-src 'none', base-uri 'self', upgrade-insecure-requests checked

Output:

default-src 'self'; object-src 'none'; base-uri 'self'; upgrade-insecure-requests

Frequently asked

What is a Content Security Policy?

A Content Security Policy (CSP) is an HTTP response header that instructs the browser which sources of content (scripts, styles, images, fonts, etc.) are safe to load. It is one of the most effective defenses against cross-site scripting (XSS) attacks.

Why does the builder warn about 'unsafe-inline'?

'unsafe-inline' allows any inline <script> or <style> tag to execute, which completely defeats CSP's XSS protection for scripts. If you need inline scripts, use a nonce or hash instead: 'nonce-<random>' or 'sha256-<hash>'.

What is the difference between the header value and the meta tag output?

The header value is what your web server sends in the HTTP response header: Content-Security-Policy: <value>. The meta tag is an alternative for static sites or CDNs that cannot set HTTP headers: <meta http-equiv="Content-Security-Policy" content="<value>">. Both enforce the same policy, but the HTTP header is preferred.

What does 'self' mean in CSP?

'self' refers to the same origin as the page, the same scheme, host, and port. It is the most common and recommended default because it allows your own resources while blocking everything else.

Should I use upgrade-insecure-requests?

Yes, if your site serves HTTPS. This directive tells the browser to automatically upgrade any HTTP subresource requests to HTTPS, preventing mixed-content issues without having to update every URL in your HTML and CSS.

Is my data sent to a server?

No. The CSP header is assembled entirely in your browser using JavaScript. Nothing you type is transmitted anywhere.

What is object-src 'none' for?

object-src controls the sources allowed for <object>, <embed>, and <applet> elements (Flash, Java applets, etc.). Setting it to 'none' is a best practice because these plugin-based technologies are obsolete, frequently exploited, and should never be loaded.

Related tools