Adding Content Security Headers is necessary to protect a website from external attacks. The Theft Resource Center’s 2020 Data Breach Report reported 11,762 recorded breaches between January 1st, 2005 and May 31st, 2020. Of those attacks, 39% were Cross-Site Scripting attacks. Any website, including Netlify, needs protection from these attacks to prevent serious repercussions for users (i.e. identity theft, data leak). Follow this tutorial on adding Content Security Headers to your Netlify website, and protect yourself from these issues.
Why Should I add Content Security Headers to My Website
Content Security Policy (CSP), is a security standard that protects against Cross-Site Scripting (XSS). XSS is a client-side injection attack whose goal is to execute malicious scripts in the user’s browser in a trusted web page. Adding Content Security Headers to your website and allowing only trusted scripts to access a website prevent XSS’s from occurring.
But what is a Content Security Header? Content Security Headers are meta tags. They let the browser know which source it’s allowed to download data from, in the form of scripts, images, videos, etc. Implementing Security Headers in the <head> tag of a website prevents XSS from injecting their own data, which can lead to serious consequences, like a data breach.
Without a Content Security Policy, the browser doesn’t know if a script can be trusted. The browser will just grant access to the end user’s cookies. Other sensitive information, such as personal data, will be accessible to whichever source is coming from a trusted website. This could be a malicious XSS injected by an attacker taking advantage of the absence of Security meta tags.
How to add Content Security Headers to Netlify
To add Security Headers, first head over to your netlify.toml file (create one in your root folder if it’s missing), and copy and paste the following code (source: Netlify):
[headers]]
for = "/*"
[headers.values]
Content-Security-Policy = "default-src 'self';"Next, customize the file according to your needs. Here is an example of a more complex netlify.toml file:
Content-Security-Policy = "default-src 'self' 'unsafe-inline' https://www.google-analytics.com;
img-src 'self' 'unsafe-inline' https://www.google.com;
media-src 'self' https://www.youtube.com;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
script-src 'self' 'unsafe-inline' https://www.googletagmanager.com connect.facebook.net https://www.google-analytics.com;
script-src-elem 'self' 'unsafe-inline' 'unsafe-eval' https://www.google-analytics.com;
frame-src 'self' https://app.frame.io https://www.youtube.com/ https://vimeo.com"
X-Frame-Options: SAMEORIGINLike all the Content Security Headers, the attribute is first defined (in the example above are “Content-Security-Policy” and “X-Frame-Options”), followed by categories (style-src, img-src), and a space-separated list of everything allowed, where safe sources are specified ( YouTube, Google, Google fonts, etc). In this case, the trusted sources can be a website (i.e. a trusted API source or a company website).
If you don’t add a proper Security Header for a specific source included on a website, you’ll get an error like this:
Refused to load the script because it violates the following Content Security Policy directiveFinally, adding Content Security Headers to your Netlify website protects the website, and the end user, from external attacks. In addition, adding Content Security Headers also gives more control over the website by allowing you to whitelist sources and check their trustworthiness one by one, preventing external attacks. It is a relatively quick addition that benefits every website.
