In Depth: Content Security Policy
[InDepth#7] CSPs are an incredibly powerful security feature built into the browser.
Greetings Everyone! Sorry this one is a few days late1, COVID managed to rear it’s ugly head and knock me around for a few days. We’re all recovering now, although stuck in isolation for the next week.
This month we’re going to be diving into Content Security Policy (CSP), which is a topic I’ve wanted to cover since I started Laravel Security in Depth. (I’m not sure why I waited so long!) CSPs are an interesting beast: they sound incredibly complicated and tricky to set up on existing sites, but they also include what you need to make setting them up pretty easy.
I ended up covering so much in here that this is my first email to smash past the Gmail email truncation length. I’d recommend clicking on the title 👆 and reading it in your browser.
Just a reminder: I can hack your site to help you improve your security, check out my Laravel Security Audits and Penetration tests.
Content Security Policy
A Content Security Policy (CSP) is an incredibly powerful web application security feature built into modern web browsers. It adds an extra layer of security by blocking unexpected content from executing, preventing Cross-Site Scripting and other injection attacks from affecting your site.
You define a Content Security Policy on your site through the a response header or a meta tag. The browser checks for a CSP before rendering the page, and if it finds one, it will follow the policy and prevent any unexpected resources from loading.
HTML Meta Element:
<meta http-equiv="Content-Security-Policy" content="_policy_">
CSPs may sound quite daunting and complicated to set up (and like a great way to break your site!), but they are a lot simpler than they sound. Plus they include some features that make setting them up quite simple!
Writing a Basic CSP
Let’s get started with a simple example, to give you an overview of what a CSP is and how it works.
I’ll use a local copy of our demo site as an example, adding a basic CSP header. When I tell it to block everything through a CSP, you can see the page looks rather broken:
This is the CSP header I added to the page:
Content-Security-Policy: default-src 'none' ; form-action 'none' ; frame-ancestors 'none'
And the error message in the console is:
Refused to load the stylesheet 'https://larasec.valorin.dev/css/app.css?id=...' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
There are a few things going on here, so let’s bisect it.