Content Security Policy (CSP)

Example Using Google Maps with a Content-Security-Policy

How to create a content security policy (CSP) that works with Google Maps.

You're going to need to specify at least two CSP directives, the style-src and the img-src directive.

The script-src directive

In order for the Google Maps JavaScript to load we need to allow the domain in our policy:

Your policy might look like this:


Without such a policy, we would get an error in our browser, for example:

Content Security Policy: The page's settings blocked the loading of a resource at ("script-src")

The img-src directive

You will notice that the images loaded may differ depening on what type of map you are using. You may see something like this in your network log:

img-src data: * *.ggpht

Without this we might get an error in the console such as:

Refused to load the img '' because it violates the following Content Security Policy directive: "img-src 'self'".

Putting it all together

A minimal Content-Security-Policy header that works with Google Maps might look like this:

Content-Security-Policy: script-src;img-src data: * *.ggpht