Getting Started with Content Security Policy using NodeJS/Express and Csper

Overview

This article is going to walk through the process of installing Content-Security-Policy on a website using NodeJS/Express and Csper.

In this tutorial we're going to be setting up Content-Security-Policy my personal website (https://c0nrad.io), which uses NodeJS/Express.

If you're completely new to content-security-policy, I'd recommend checking out this article first: An Introduction to Content Security Policy

Setup a report-uri using csper.io

The trick to quickly setting up Content-Security-Policy is to let Content-Security-Policy do the work for you. Content-Security-Policy has a feature called report-uri where it will tell you what violations were caught on a web page.

So what you can do is use content-security-policy-report-only (meaning it won't actually block any content) with report-uri and let CSP tell you all the sources you need to include in your final policy.

Create a Project

Csper's report-uri has a free trial which is great for building out new policies. Once you have the policy, copy it, it's time to install the policy in report-only mode.

Install Content-Security-Policy-Report-Only

Next up we're going to install Content-Security-Policy in Report-Only mode. This means that when a browser views the web page, it'll execute content-security-policy in a safe mode that won't block anything. but will send out violation reports when it detects content that would of been blocked normally.

Csper will collect there, and then we can automatically build our policy.

Installing Content-Security-Policy in NodeJS/Express is super simple. You can just use middleware on every request:

app.use(function(req, res, next) '{'
  res.setHeader("content-security-policy-report-only", "default-src 'self'; script-src 'self' 'report-sample'; style-src 'self' 'report-sample'; base-uri 'none'; object-src 'none'; report-uri https://5e52f4c893efcda6a7d40460.endpoint.csper.io")
  next();
});

Since the policy is in report-only mode, you can feel safe deploying this with no change to your website.

Gather reports

Next up we want to gather a bunch of reports! We can to crawl our website for every type of content that our website supports. Anywhere the website has different styles, scripts, fonts, iframes, etc.

To make sure everything is working correctly, I like to open up the Realtime Panel in Csper on one side of my screen, and my website on the other side. Then I just click on different links and make sure Csper is receiving the reports.

You can also check the developer console for warnings if something is going right:

Build a policy

Next up is where the magic begins, Csper will automatically group reports together, and give recommendations on how to build a policy.

Click on the "Report Builder" tab, and get started building!

Once the policy is built, you can deploy it back on your website (still as report-only). For me:

app.use(function(req, res, next) {
  res.setHeader("content-security-policy-report-only", "default-src 'self'; font-src 'self' data: https://maxcdn.bootstrapcdn.com; img-src 'self' http://c0nrad.io; object-src 'none'; script-src 'report-sample' 'self'; style-src 'report-sample' 'self' https://maxcdn.bootstrapcdn.com; base-uri 'none'; report-uri https://5e52f4c893efdeaaa7d40460.endpoint.csper.io;")
  next();
});

Move Inline Assets

Next up we need to start moving the inline scripts/styles to their own file. This is the most painful part of Content-Security-Policy, but it is a necessary part.

The 'Inline' tab in Csper will identify everywhere there is inline content.

If need be, you can use 'unsafe-inline' with style-src, but do not use 'unsafe-inline' with script-src. While it may make the warnings go away, it defeats the purpose of Content-Security-Policy. (More Info).

For my personal website, I need to move some inline css to a separate file (mostly some width:100% stuff I used for images).

If there's no way you can move all the inline javascript, it's better to leave the policy in report-only mode, and use a tool like Csper to collect reports and monitor for suspicious reports, and alert you, so you can fix the underlying issue. There is no benefit if you are running with 'unsafe-inline' in your script-src.

Publish a final policy

Once you're all done moving the inline assets, click through your website and make sure there's no more reports being generated.

At this point I'd recommend letting your policy sit for a few days in production to make sure you've captured all the possible sources for your policy.

When you're ready you can make the switch to "enforce mode" (meaning go from "content-security-policy-report-only" to just "content-security-policy").

Conclusion

At this point you should feel pretty proud. You've greatly increased the security for all your users. Congrats.

You can also use Csper to continuously watch for suspicious behavior and have it email you when it finds a new type of report. At the end of the day Content-Security-Policy is a defense in depth tool, it's best to be notified and fix the underlying issues. (For some organizations it may even be appropriate to leave the policy in report-only mode and just monitor for suspicious behavior, and respond quickly).