Guide to Content Security Policy
This guide to Content Security Policy is meant to get a webmaster familiar with this security concept. The core part of a Content Security Policy are server defined rule for a browser to follow on what are safe content sources. Browsers that follow the rules will ignore content from non-trusted sources and log warnings and errors to the browsers developer console.
Ideally the Content Security Policy is part of the server header and not part of the HTML code. This means you will need access to your Apache, IIS, NGINX configuration to implement the rule. A CSP defined in HTML is not as strong as the server header. Additionally some parts of the CSP spec are not implemented for HTML.
The rule is a single line and can get very long. Two very important rules about the CSP rule.
- You can not have multiple CSP rules defined.
- Multiple directives of the same directive are not allowed in the CSP rule
The Basics
The most basic Content Security Policy is one that that tells the browser to only allow the source domain as an authority.
Content-Security-Policy: default-src 'self';A more complicated Content Security Policy that supports Google Fonts
Content-Security-Policy: default-src 'self'; font-src fonts.gstatic.com; style-src 'self' fonts.googleapis.comThe same rule but also support for Google Analytics, Google Tag Manager and Google Advertising
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://tagmanager.google.com/ https://www.googletagmanager.com/ https://www.google-analytics.com; style-src 'self' 'unsafe-inline' https://tagmanager.google.com/ https://fonts.googleapis.com/; img-src 'self' https://ssl.gstatic.com/ https://www.google-analytics.com www.google-analytics.com https://stats.g.doubleclick.net; font-src 'self' fonts.gstatic.com; connect-src 'self' https://www.google-analytics.com www.google-analytics.com https://stats.g.doubleclick.net;As you can see this gets very complicated very quickly. It is important to note that when overriding the default-src directive that you add the value ‘self’ to new directives or your own web server will not be allowed. Directives are not additive, but replace the default-src value.
Server Header vs HTML
When using HTML you must place the code in your header as a meta tag. Browser will ignore the rule if found anywhere else. Additionally the rule will not be in effect until it is read so it should be the first tag in your header or as close to the top as possible.
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
</head>Content-Security-Policy-Report-Only header is not supported with the meta tag and the following directives do not work with a Content Security Policy based meta tag:
- frame-ancestors
- report-uri
- sandbox
Tools for Content Security Policy
Because CSP are on one line it can be tough to manipulate a complex rule. The folks at report-uri.com have a handy generator. You can import a CSP from a site and then change what you need or start with a blank slate and walk through each step.
To see what level of the CSP standard your browser supports you can use this tool: https://content-security-policy.com/browser-test/.
Increasing security for Google Tag Manager and Google Analytics
Check back later