Content Security Policy Guide

This document provides recommendations for how to configure the website Content Security Policy (CSP) for the Maps JavaScript API. Since a wide variety of browser types and versions are used by end users, developers are encouraged to use this example as a reference, fine-tuning until no further CSP violations occur.

Learn more about Content Security Policy.

Strict CSP

We recommend using strict CSP over allowlist CSP to mitigate the possibility of security attacks. Maps JavaScript API supports the use of nonce-based strict CSP. Websites must populate both script and style elements with a nonce value. Internally, Maps JavaScript API will find the first such element, and apply its nonce value to style or script elements inserted by the API script respectively.

Example

The following example shows a sample CSP, along with an HTML page where it is embedded:

Sample Content Security Policy

script-src 'nonce-{script value}' 'strict-dynamic' https: 'unsafe-eval' blob:;
img-src 'self' https://*.googleapis.com https://*.gstatic.com *.google.com *.googleusercontent.com data:;
frame-src *.google.com;
connect-src 'self' https://*.googleapis.com *.google.com https://*.gstatic.com data: blob:;
font-src https://fonts.gstatic.com;
style-src 'nonce-{style value}' https://fonts.googleapis.com;
worker-src blob:;

Sample HTML page

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" nonce="{style value}">
    <style nonce="{style value}">...</style>
    ...
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap" async nonce="{script value}"></script>
    <script nonce="{script value}"> function initMap() { ... } </script>
  </body>
</html>

Allowlist CSP

If you have set up allowlist CSP, please consult the list of Google Maps Domains. We recommend consulting this document and the Maps JavaScript API release notes to stay up to date, and include any new service domain into the allowlist if needed.

Websites which load the Maps JavaScript API from a legacy Google APIs domain (for example maps.google.com) or a region-specific domain (for example maps.google.fr), must also include these domain names in their CSP script-src setting, as shown in the following example:

script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.googleapis.com https://*.gstatic.com *.google.com https://*.ggpht.com *.googleusercontent.com blob:;
img-src 'self' https://*.googleapis.com https://*.gstatic.com *.google.com  *.googleusercontent.com data:;
frame-src *.google.com;
connect-src 'self' https://*.googleapis.com *.google.com https://*.gstatic.com  data: blob:;
font-src https://fonts.gstatic.com;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
worker-src blob:;