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 to get CSP working with Google Maps, the script-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 google 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'".

A Minimal Google Maps CSP

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

That is the minimum to get CSP working with Google Maps. You will probably need to add in additional directives to all for the rest of your app to work.

CSP Developer Field Guide

CSP Developer Field Guide

Want to learn more about CSP on the double? Grab a copy of the CSP Developer Field Guide. It's a short and sweet guide to help developers get up to speed quickly.

Grab a Copy