You're going to need to specify at least two CSP directives to get CSP working with Google Maps, the
script-src and the
maps.googleapi.com 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 https://maps.googleapis.com/maps/api/js?key=... ("script-src")
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:
maps.gstatic.com- loads various img assets for the map such as cross hair curors, 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 satalite images for the map. We will use
*.googleapis.comin 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.comin 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'".
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.
Want to learn the ins and outs CSP? 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
Advisory Week is a weekly roundup of all the security advisories published by the major software vendors.