I been learning about web security in the last few days, and today I learned about CSP or Content Security Policy.
WHAT IS IT?
How does it work?
You can set CSP with HTTP Header by returning Content-Security-Policy or you can add a meta tag to your HTML document.
How do I write a policy?
Let’s write a simple policy for my site:
- I will start by adding a meta tag to my header
<meta http-equiv="Content-Security-Policy" content="">
As you probably noticed, our content attribute is empty, this is where we’re adding our own rules, let’s add them.
- Initially I want to allow my site to load resources from my own domain, so our first rule is:
- Since my site is hosted on WordPress.com, I want to load resources form wp.com, gravatar.com and wordpress.com, let’s add the rules
default-src 'self' *.wp.com *.wordpress.com *.gravatar.com
- Now the browser will only load resources from those domains on my site, I can be more specific and choose from which domain the site can load scripts, media or images, let’s add gravatar.com only to our images rule
default-src 'self' *.wp.com *.wordpress.com; img-src *.gravatar.com
- My meta tag now looks something like this
<meta http-equiv="Content-Security-Policy" content="default-src 'self' *.wp.com *.wordpress.com *.gravatar.com">
You can read more about CSP in the MDN Docs https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP and if you have a WordPress site, you can use this plugin https://wordpress.org/plugins/wp-content-security-policy/