security, protection, antivirus-265130.jpg

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.

  1. You can not have multiple CSP rules defined.
  2. Multiple directives of the same directive are not allowed in the CSP rule


It is possible to break your site with a Content Security Policy that is too restrictive. Test your site thoroughly before enabling. For testing methods see below.

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; style-src 'self'

The 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'; style-src 'self' 'unsafe-inline'; img-src 'self'; font-src 'self'; connect-src 'self';

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.


Google Tag Manger (GTM) requires two values “unsafe-inline” and “unsafe-eval” that normally should not be allowed in the “script-src” directive. GTM is a script injector framework and by allowing these two values you lower the security of your server. To understand how to make GTM more secure see below

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.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

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 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:

Increasing security for Google Tag Manager and Google Analytics

Check back later

Scroll to Top