Automatically Generating Content Security Policy

In this guide we will quickly generate a new content security policy for a website using Csper Builder (Chrome/Firefox), a browser extension/addon.

generate content security policy demo

Figure 1: Csper Builder Firefox Extension Demo

Background

The trick to quickly generating a content-security-policy is to let the content-security-policy report-uri directive do all the work.

The report-uri directive is a feature of content-security-policy that sends a violation report (in JSON) whenever there's something that doesn't match the policy. So what we do is stub a placeholder content-security-policy to generate a bunch of reports, and then merge all the reports to build a policy.

And now Csper and Csper Builder (Chrome/Firefox) will do the stubbing, merging, and building of the policy for us so building a new and correct policy only takes minutes.

If you'd prefer to see a video demo, here's a Youtube Demo: Csper Builder

Step 1: Install the Extension

The extension can be found here:

View on Chrome Extension Store

View on Firefox Addon Store

Step 2: Collect Reports

csper builder collecting report-uri reports

Figure 2: Collecting report-uri reports

The extension runs in the background of the page, but it needs help finding all the different content. To work bests the firefox addons needs to see all the different types of content that the website uses. This means all the different sources for images, fonts, videos, scripts, stylesheets, etc.

It's okay if not all the different types of content are found, right now we are just generating a starter policy. When rolling out a new policy it should always be run in "Report-Only" mode for a few weeks to capture the remaining missed content.

Step 3: Inline Violations

inline content security policy reports with report-uri

Figure 3: Content Security Policy inline reports

This is the hardest part of content-security-policy. Content-Security-Policy doesn't allow inline javascript (or stylesheets, but javascript is the one we're most concerned about). Trying to skip this is also why most people don't get any value out of their content-security-policy CSP is Dead, Long Live CSP.

Csper Builder will give you a list of all pieces of inline content that needs to be moved to their own separate files. These results will also be emailed to you/your team at the end for fixing later.

There's also a guide on removing inline content. If you're considering using 'unsafe-inline' for your javascript, please don't.

Step 4: Policy Created!

final policy

Figure 4: Generated Policy

On the last tab of Csper Builder is the final policy! Congrats!

At this point you can send the results to yourself or your team via email.

final policy email

Figure 4: Generated Policy Email

Next Steps: Rollout the policy in report-only mode

With the policy created, the next step is to roll the header out in report-only mode. (Guide on CSP Deployment). In report-only mode the browsers won't block the content, only report on it. We can use these reports to find the last missing pieces of content that might have been missed in the original generation.

To understand how your policy is doing, you should setup up a report-uri endpoint. Csper is the most advance CSP report-uri endpoint, and we have a free 14 trial.

csper report dashboard

Csper's Report URI Dashboard

Once you're comfortable with the policy you can make the switch to enforcing the policy on your website.