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. Navigate to Web Security → CSP → Policies and click Create policy button
  2. Configure a new policy with the following values:
Name
secutils.dev
Default source (default-src)
'self', api.secutils.dev
Style source (style-src)
'self', fonts.googleapis.com
  1. Click the Save button to save the policy
  2. Once the policy is set up, it will appear in the policies grid
  3. Click the policy's Copy policy button and use Policy source dropdown to switch between different policy representations:
HTTP header (enforcing)
Content-Security-Policy: default-src 'self' api.secutils.dev; style-src 'self' fonts.googleapis.com
HTML meta tag
<meta http-equiv="Content-Security-Policy" content="default-src 'self' api.secutils.dev; style-src 'self' fonts.googleapis.com">

Watch the video demo below to see all the steps mentioned earlier in action:

Import a Content Security Policy from URL​

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

  1. Navigate to Web Security → CSP → Policies and click Import policy button
  2. Pick URL tab and use the following values for import:
Policy name
Google CSP
URL
https://google.com
Policy source
HTTP header (report only)
  1. Click the Import button to import the policy
  2. Once the policy is imported, it will appear in the policies grid
  3. Refer to the Policy grid column or policy edit flyout to view the content of the imported policy

Watch the video demo below to see all the steps mentioned earlier in action:

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. Navigate to Web Security → CSP → Policies and click Import policy button
  2. Pick Serialized policy tab and use the following values for import:
Policy name
Custom CSP
Serialized policy
default-src 'self' api.secutils.dev; style-src 'self' fonts.googleapis.com
  1. Click the Import button to import the policy
  2. Once the policy is imported, it will appear in the policies grid
  3. Refer to the Policy grid column or policy edit flyout to view the content of the imported policy

Watch the video demo below to see all the steps mentioned earlier in action:

Test a Content Security Policy​

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

  1. First, navigate to Webhooks → Responders and click Create responder button
  2. Configure a new responder with the following values to respond with a simple HTML page that uses eval() function to evaluate JavaScript code represented as a string:
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>
  1. Click the Save button to save the responder
  2. Once the responder is set up, it will appear in the responders grid along with its unique URL
  3. Click the responder's URL and use Eval button on the rendered page to see that nothing prevents you from using eval() function
  4. Now, navigate to Web Security → CSP → Policies and click Create policy button to create a Content Security Policy to forbid eval()
  5. Configure a new policy with the following values:
Name
CSP Test
Script source (script-src)
'self', 'unsafe-inline'
  1. Click the Save button to save the policy
  2. Once the policy is set up, it will appear in the policies grid
  3. Click the policy's Copy policy button and use Policy source dropdown to switch to HTML meta tag policy representation
  4. Copy <meta> HTML tag with the policy and navigate to Webhooks → Responders again
  5. Edit Body property of the previously created CSP Test responder to include <meta> HTML tag with the policy inside <head> HTML tag
  6. Click the Save button and navigate to the responder's URL again
  7. This time, when you click the Eval button, nothing happens and an error message is logged in the browser console meaning that you have successfully forbidden eval() with the Content Security Policy

Watch the video demo below to see all the steps mentioned earlier in action:

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. Navigate to Web Security → CSP → Policies and click Create policy button
  2. Configure a new policy with the following values:
Name
CSP Reporting
Script source (script-src)
'self', 'unsafe-inline', 'report-sample'
Report to (report-to)
default
  1. Click the Save button to save the policy
  2. Once the policy is set up, it will appear in the policies grid
  3. Click the policy's Copy policy button, switch Policy source to HTTP header (enforcing) and copy generated policy header
  4. Now, navigate to Webhooks → Responders and click Create responder button
  5. Configure a new responder with the following values to collect CSP violation reports:
Name
CSP Reporting
Path
/csp-reporting
Method
POST
Tracking
10
  1. Click the Save button and copy responder's URL
  2. Click Create responder button once again
  3. Configure another responder with the following values to respond with a simple HTML page that will try to use eval() function to evaluate JavaScript code represented as a string:
Name
CSP Eval Test
Path
/csp-eval-test
Method
GET
Headers
Reporting-Endpoints: default="[**REPLACE WITH `CSP Reporting` responder URL**]",
Content-Security-Policy: [*REPLACE WITH `CSP Reporting` policy content**],
Content-Type: text/html; charset=utf-8
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>
  1. Click the Save button to save the responder
  2. Once the responder is set up, it will appear in the responders grid along with its unique URL
  3. Click the responder's URL to navigate to the test page
  4. On the test page, click the Eval button and notice that nothing happens except that browser logs an error message in its console meaning that you have successfully forbidden eval() with the Content Security Policy
  5. Go back to the responder's grid and expand the CSP Reporting responder to view the CSP violation report that browser has sent when you tried to use eval()

Watch the video demo below to see all the steps mentioned earlier in action:

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.

Watch the video demo below to see all the steps mentioned earlier in action: