Skip to main content

What is a Content Security Policy?

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft, to site defacement, to malware distribution.

Generally, to enable CSP, you need to configure your web server to return the Content-Security-Policy HTTP header or HTML meta tag. For more details, refer to MDN and OWASP.

On this page, you can find guides on creating Content Security Policies that match your specific needs.

Create a Content Security Policy​

In this guide you'll create a simple Content Security Policy template that allows you to generate policies that are ready to be applied to any web application:

1
[object Object]

Navigate to Web Security → CSP → Policies and click Create policy.

2
[object Object]

Enter the policy name, configure directives, and click Save to save the policy.

Name
secutils.dev
Default source (default-src)
'self', api.secutils.dev
Style source (style-src)
'self', fonts.googleapis.com

3
The new policy appears in the grid.

The new policy appears in the grid.

4
[object Object]

Use the Copy context menu button to get different policy representations.

Import a Content Security Policy from URL​

In this guide you'll import a Content Security Policy from an external URL:

1
[object Object]

Navigate to Web Security → CSP → Policies and click Import policy.

2
[object Object]

Pick URL tab, enter the policy name, target URL, select the policy source, and click Import.

Policy name
Google CSP
URL
https://google.com
Policy source
HTTP header (report only)

3
The new policy appears in the grid.

The new policy appears in the grid.

Import a Content Security Policy from a string​

In this guide you'll import a Content Security Policy from a string (serialized policy text):

1
[object Object]

Navigate to Web Security → CSP → Policies and click Import policy.

2
[object Object]

Pick Serialized policy tab, enter the policy name, policy string, and click Import.

Policy name
Custom CSP
Serialized policy
default-src 'self' api.secutils.dev; style-src 'self' fonts.googleapis.com

3
The new policy appears in the grid.

The new policy appears in the grid.

Share a Content Security Policy​

This guide will walk you through sharing a Content Security Policy template publicly, allowing anyone on the internet to view it:

  1. Navigate to Web Security → CSP → Policies and pick the policy you'd like to share
  2. Click the policy's Share policy button and toggle Share policy switch to on position
  3. Once the policy is shared, the dialog will show a Copy link button
  4. Click the Copy link button to copy a unique shared policy link to your clipboard
  5. To stop sharing the policy, click the Share policy button again, and switch the Share policy toggle to the off position.
1
[object Object]

Navigate to Web Security → CSP → Policies, pick the policy you'd like to share, and click Share.

2
[object Object]

Toggle the Share policy switch to on position, and then click the Copy link button to copy a unique shared policy link to your clipboard.

3
[object Object]

To stop sharing the policy, click the Share policy button again, and switch the Share policy toggle to the off position.

Test a Content Security Policy​

In this guide, you will create a Content Security Policy and test it using a custom HTML responder:

1
[object Object]

Navigate to Webhooks → Responders, click Create responder, and configure it with a simple HTML page that uses eval(). Click Save.

Name
CSP Test
Path
/csp-test
Method
GET
Body
<!DOCTYPE html>
<html lang="en">
<head>
<title>Evaluate CSP</title>
</head>
<body>
<label for="eval-input">Expression to evaluate:</label>
<input id="eval-input" type="text" value="alert('xss')"/>
<button id="eval-test">Eval</button>
<script type="text/javascript" defer>
(async function main() {
  const evalTestBtn = document.getElementById('eval-test');
  evalTestBtn.addEventListener('click', () => {
    const evalExpression = document.getElementById('eval-input');
    window.eval(evalExpression.value);
  });
})();
</script>
</body>
</html>

2
The responder appears in the grid with its unique URL.

The responder appears in the grid with its unique URL.

3
Click the URL to open the test page and verify that the Eval button works without restrictions.

Click the URL to open the test page and verify that the Eval button works without restrictions.

4
[object Object]

Navigate to Web Security → CSP → Policies, click Create policy, and configure it to forbid eval(). Click Save.

Name
CSP Test
Script source (script-src)
'self', 'unsafe-inline'

5
The policy appears in the grid.

The policy appears in the grid.

6
[object Object]

Use the Copy context menu button, switch Policy source to HTML meta tag, and copy the generated <meta> tag.

7
[object Object]

Navigate back to Webhooks → Responders, edit the CSP Test responder, and paste the <meta> tag inside the <head> of the body. Save and navigate to the responder's URL again - this time, clicking Eval does nothing and a CSP error appears in the browser console.

Name
CSP Test
Path
/csp-test
Body (updated)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Security-Policy"
      content="script-src 'self' 'unsafe-inline'">
<title>Evaluate CSP</title>
</head>
<body>
<label for="eval-input">Expression to evaluate:</label>
<input id="eval-input" type="text" value="alert('xss')"/>
<button id="eval-test">Eval</button>
<script type="text/javascript" defer>
(async function main() {
  const evalTestBtn = document.getElementById('eval-test');
  evalTestBtn.addEventListener('click', () => {
    const evalExpression = document.getElementById('eval-input');
    window.eval(evalExpression.value);
  });
})();
</script>
</body>
</html>

Report Content Security Policy violations​

In this guide, you will create a Content Security Policy and collect its violation reports using a custom tracking responder:

1
[object Object]

Navigate to Webhooks → Responders, click Create responder, enable Advanced mode, and configure a responder to collect CSP violation reports. Click Save.

Name
CSP Reporting
Path
/csp-reporting
Method
POST
Tracking
10

2
Step 2

The reporting responder appears in the grid. Copy its URL - you will use it as the report-uri value in the next step.

3
[object Object]

Navigate to Web Security → CSP → Policies, click Create policy, and configure it with the report-uri directive pointing to the reporting responder URL. Click Save.

Name
CSP Reporting
Script source (script-src)
'self', 'unsafe-inline', 'report-sample'
Report URI (report-uri)
[CSP Reporting responder URL]

4
The policy appears in the grid.

The policy appears in the grid.

5
[object Object]

Use the Copy context menu button to view the policy as an HTTP header (enforcing). The generated header includes the report-uri directive with the reporting responder URL.

6
[object Object]

Navigate back to Webhooks → Responders, click Create responder, and configure a responder that serves an HTML page with eval(). Set its Content-Security-Policy response header to include the policy with the report-uri directive. Click Save.

Name
CSP Eval Test
Path
/csp-eval-test
Headers
Content-Security-Policy: script-src 'self' 'unsafe-inline' 'report-sample'; report-uri [CSP Reporting responder URL]
Body
<!DOCTYPE html>
<html lang="en">
<head>
<title>Evaluate CSP</title>
</head>
<body>
<label for="eval-input">Expression to evaluate:</label>
<input id="eval-input" type="text" value="alert('xss')"/>
<button id="eval-test">Eval</button>
<script type="text/javascript" defer>
(async function main() {
  const evalTestBtn = document.getElementById('eval-test');
  evalTestBtn.addEventListener('click', () => {
    const evalExpression = document.getElementById('eval-input');
    window.eval(evalExpression.value);
  });
})();
</script>
</body>
</html>

7
Step 7

Both responders appear in the grid. The CSP Eval Test responder has a unique URL.

8
[object Object]

Click the CSP Eval Test responder URL to open the test page. Click Eval - nothing happens because the Content Security Policy blocks eval(). The browser automatically sends a violation report to the report-uri endpoint.

9
[object Object]

Go back to the responders grid and expand the CSP Reporting responder. The violation report sent by the browser is now visible in the requests list.