CSP Explained

Find your website's CSP

Your website sends its policy along with every page, usually out of sight. Pick one of these ways to get a copy. The snippet is the quickest; the terminal is for developers.

Copy it with a snippet

About a minute, in Chrome, Edge, Firefox or Safari. No technical knowledge needed.

  1. Open the page of your website you're interested in: the homepage, a product page, the checkout…
  2. Open the developer tools: F12 on Windows, ⌘ ⌥ J on Mac. In Safari, first turn on Settings › Advanced › Show features for web developers.
  3. Click the Console tab.
  4. Copy this snippet, paste it into the console and press Enter.
    Paste into the browser console
    (() => {
  // Runs in one go, without waiting: the console's copy() only works until the pasted code ends.
  // Reload this page's response headers, then look for <meta> CSP tags.
  const req = new XMLHttpRequest();
  req.open('GET', location.href, false);
  req.setRequestHeader('Cache-Control', 'no-cache');
  req.send();
  const found = [];
  for (const name of ['Content-Security-Policy', 'Content-Security-Policy-Report-Only']) {
    const value = req.getResponseHeader(name);
    if (value) found.push(name + ': ' + value);
  }
  for (const meta of document.querySelectorAll('meta[http-equiv]')) {
    if (/^content-security-policy/i.test(meta.httpEquiv)) found.push(meta.outerHTML);
  }
  const result = found.join('\n') || 'No Content-Security-Policy found on ' + location.href;
  console.log(result);
  try {
    copy(result);
    console.log('Copied to your clipboard.');
  } catch {
    console.log('Could not copy automatically: select the text above and copy it.');
  }
  return result;
})();
  5. The policy is now in your clipboard: paste it into the analyzer.

The snippet only reads: it loads the page you're on again, keeps its policy and copies it. It sends nothing anywhere.

Is it safe to paste code into the console?

Be careful with code from people you don't know: anything pasted into the console runs as you, on that website. That's why Chrome and Firefox may ask you to type allow pasting first. Every line of this snippet is shown above, so you can check what it does before running it.

I see a yellow warning about "synchronous XMLHttpRequest"

It's harmless. The snippet reads the page in one go, without waiting, because that's the only way the browser lets it copy the result for you.

I see an error such as "Refused to connect"

Your policy blocks the snippet itself. Use the Network tab instead.

Look in the Network tab

No code involved: you read the policy in the browser's developer tools.

Chrome & Edge

  1. Press F12 and click the Network tab.
  2. Reload the page: F5, or ⌘ R on Mac.
  3. Click the first line of the list. It has your page's address and the type document.
  4. In Headers, scroll to Response Headers.
  5. Find content-security-policy, right-click its value and choose Copy value.

Firefox

  1. Press F12 and click the Network tab.
  2. Reload the page.
  3. Click the first line (type html).
  4. In the Headers panel, open Response Headers.
  5. Find content-security-policy and copy its value.

Safari

  1. Turn on Settings › Advanced › Show features for web developers.
  2. Press ⌘ ⌥ I and open the Network tab.
  3. Reload the page and click the first resource.
  4. In Headers, find Content-Security-Policy under Response and copy its value.

No content-security-policy line? Look for content-security-policy-report-only, or search the page source: the policy may be inside the page.

Search the page source

Some sites write their policy inside the page instead of sending it separately.

  1. Right-click the page and choose View Page Source.
  2. Search (Ctrl F, or ⌘ F on Mac) for Content-Security-Policy.
  3. Copy the whole <meta http-equiv="Content-Security-Policy" …> tag. The analyzer reads it as is.

From a terminal

Shows the headers your server returns. Paste the whole output into the analyzer.

Run in a terminal, with your site's address
curl -sI https://www.example.com | grep -i content-security-policy
Where is the policy usually configured?
  • Web server: nginx (add_header), Apache (Header set), IIS (web.config).
  • CDN or edge: CloudFront response headers policies, Cloudflare Transform Rules, Fastly, Akamai.
  • Framework: helmet (Express), Next.js headers(), Django CSP, Spring Security, Rails content_security_policy.
  • Hosting: Netlify _headers, Vercel vercel.json.
  • HTML template or CMS plugin for <meta> policies.

From an error message

When a tool doesn't work, the console (F12, Console tab) often shows a red message like this:

Refused to load the script 'https://cdn.vendor.example/tag.js' because it violates the following
Content Security Policy directive: "script-src 'self' https://www.googletagmanager.com".
What was blocked
The address after Refused to load: a script from cdn.vendor.example.
Which rule blocked it
The name in quotes after directive: script-src.
What the rule allows today
The values after the rule name.

The message only shows one rule. To analyse the whole policy, use one of the other ways.

Before you analyse it

Pages can have different policies
The checkout, the login page or a blog on another platform often have their own. Check the page where your tool must run.
There can be more than one
Several headers, or a header and a <meta> tag. Something must be allowed by all of them, so paste them together.
Report-only policies block nothing
Content-Security-Policy-Report-Only only reports problems, often while a team tests a new policy.
It may come from somewhere unexpected
A CDN, a firewall or a security plugin can add or change the header. Ask your developers where it's configured.

Analyse my policy