I been learning about web security in the last few days, and today I learned about CSP or Content Security Policy.
WHAT IS IT?
Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks.
MDN web docs
In simple words, it allows you to control the domain for your resources, including images, CSS and Javascript files, this means that you can protect your site from loading external scripts that might cause harm to your visitors.
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:
default-src 'self'
- 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/