Websites have changed a great deal since the first one was launched in 1991. However, the basic building blocks of all websites have remained largely the same:
- HTML delivers the text based content
- images add visual interest
- CSS makes content look good and match a brand’s style
- JavaScript adds interactivity
What has changed is the complexity that is expected from both a user experience and business objective point of view. To meet these increasing needs, websites typically have to include more functionality from third party suppliers. This includes scripts to support special site features like forms, sliders or image galleries but also marketing integrations or analytics tools. These external resources offer huge value to your site but should you trust all code from all third parties? What if a third party resource you rely on becomes compromised and it starts to include additional resources from other locations you’re not aware of?
A Content Security Policy (CSP) is the web-standards approach to combating this issue. A CSP is an additional level of security added to your website that helps to detect and protect against a range of attacks. It tells the browser exactly where trusted scripts, styles, images, and other content can come from. Any content that doesn’t match the allowed list gets blocked, keeping your website secure.
What does a Content Security Policy protect against?
The main purpose of a CSP is to protect against a Cross-Site Scripting (XSS) attack. In a cross-site scripting attack, an attacker injects harmful code into a seemingly legitimate website. This code then gets run in the victim’s browser when they visit the website, potentially allowing the attacker to steal data, redirect the user to a fake site, or disrupt the website’s functionality.
Think of it like this: someone hides a tiny instruction manual in a trusted library. When you browse the library and follow the instructions, you might unknowingly do something harmful.
What can you control with a Content Security Policy?
A Content Security Policy allows you to define rules for various aspects of your website’s content. For each file type the CSP enables you to specify which domains you consider trustworthy and from where you will allow files to be loaded.
For example, you might want to allow scripts from your own domain but prevent anything from a third-party. You could also specifically control from which third-party domains you want to allow scripts to be loaded (e.g. allow from Google) for additional control.
Here are some examples of the sorts of sources that can be controlled:
- JavaScript
- CSS stylesheets
- Images
- Fonts
By setting these rules, you create a secure environment for your website and your visitors.
How do you actually add a CSP to your site?
The recommended way to add a CSP to your site is using the Content-Security-Policy HTTP header. The format for this header is easy to understand but can get quite long, for more information see the CSP implementation guide on MDN.
It’s also possible to use HTML meta tags in the <head> section of your website but this is less commonly used. This is a good option if you only have access to the frontend layer of your website.
Practical considerations when implementing a CSP
As we’ve discussed, a CSP is a great way to increase the security of your website. There are however some considerations when implementing one.
Firstly, it’s always easier to add one during the initial website development process. This is because not all frameworks or frontend libraries are compatible and so it might impact your choice of tooling. If you are adding a CSP to an existing website it’s crucial that you thoroughly test all parts of the site to make sure that you’re not accidentally blocking critical scripts/sources that would break existing site functionality.
Secondly, a CSP is not a one and done task. Just as your website’s needs evolve overtime, it’s important to constantly review and tweak your CSP to ensure that it is providing the right level of security. It can also be useful to monitor that your site continues to be served with a CSP. A monitor will automatically detect any code regressions that invalidate or accidentally remove the installed CSP.
Summary
By understanding and implementing a CSP, you take a big step towards securing your website and protecting your brand reputation online. If you would like to build a new website with a CSP in place, or discuss adding one to your existing website, please get in touch.
