Content Security Policy (CSP)
Examples


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 maps.googleapi.com in our policy:

Your policy might look like this:

script-src maps.googleapis.com

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 https://maps.googleapis.com/maps/api/js?key=... ("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: maps.gstatic.com *.googleapis.com *.ggpht

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

Refused to load the img 'https://maps.googleapis.com/...' 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 maps.googleapis.com;img-src data: maps.gstatic.com *.googleapis.com *.ggpht