Content-Security-Policy (CSP) is a relatively new HTTP header for eliminating potential XSS vulnerabilities from your website. This article will give a brief intro to CSP, and then shows some newer tools related to CSP, and how to use them to generate a policy for a website.
Here's an example policy:
Content-Security-Policy: default-src 'self'; script-src www.google.com; img-src https:; style-src 'unsafe-inline'; report-uri https://caspr.io/endpoint/abc123
This is an example policy you might see on a simple website. Lets break it down by resource:
default-src 'self'; By default, the website will accept all assets that come from the same domain. So for this website, c0nrad.io/js/bootstrap.js would be an acceptable asset to execute, since it's from the same domain.
img-src https:; Any image loaded over https (from any domain) is allowed.
style-src 'unsafe-inline'; Normally inline scripts are not allowed (js/css). This allows inline CSS to be executed (for example anything in between <style> tags).
report-uri https://caspr.io/endpoint/abc123 If a violation occurs on the page, send a violation report to this URL (via HTTP post).
Unless the asset is listed in the policy, it will not be loaded. And for some reason, customers don't like it when only half of your website shows up. So it's important to make sure that the policy accurately reflects what assets the website is using.
But if your website has any size to it, it may be difficult to correctly build that policy without missing something.
By using two new tools (Caspr and Enforcer), we won't have to write a single line of code while we're generating and testing our new policy.
To install CSP we're going to use a pretty basic approach. You can specify a report-uri on your CSP header, so that whenever there's a violation of the policy, your browser sends an HTTP post request to that endpoint. By specifying a very restrictive policy, we can collect a bunch of reports and see exactly what we need to include in our final policy.
Using these tools, we can test/build/validate a CSP policy without touching a line of code.
Caspr is three things:
The tool we're going to use to test different policies is a chrome extension called Enforcer.
Enforcer grabs your web requests and inserts a Content-Security-Policy header into each of the pages. This makes testing much faster and easier (and you can test CSP on websites you don't own).
Next create a project on caspr. Copy the report-uri for the new project.
Next load the Enforcer chrome extension. Set the policy and report uri to the newly created caspr project, and visit every unique webpage on the website.
What we're trying to do is get a good mapping of all the assets used on the website.
Go back to caspr project and look at some reports. The analyze page gives a quick overview of the different types of reports the website has.
Then go to the Builder page, this is where we'll start building the policy. Click all the assets you want to be allowed on the page. Once you're satisfied, copy that new policy and try it out on Enforcer.
This step is important because we will be denying all inline scripts from executing (and hence stopping XSS attacks).
This really depends on what backend you're using. I'm thinking of putting a github page together with the different ways of installing CSP on each framework. Message me if you're interested? (email@example.com).
Questions or comments? firstname.lastname@example.org Or comment at Hacker News