---

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 depending on what type of google map you are using. You may see something like this in your network log:

• maps.gstatic.com - loads various img assets for the map such as cross hair cursors, a plain marker, the google logo, etc.
• maps.googleapis.com - loads tiles of the map
• data:image/svg+xml - several resources are loaded as SVG using data URIs
• khms0.googleapis.com - load satellite images for the map. We will use *.googleapis.com in our policy to allow all similar domains.
• geo0.ggpht.com - loads street view images, this could be from a few different similar subdomains so we will use *.ggpht.com in our content security policy.

img-src data: maps.gstatic.com *.googleapis.com *.ggpht.com

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.com

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.

---