Content Security Policy with Google Maps and Helmet

If you are using Helmet and Google Maps (or any other third party javascript library) in your app you will get Content Security Policy warnings.

The error looks something like this:

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).

Why do I get this error?

The helmet defaults only allow scripts to be loaded from "self" - i.e. the current page.

Setting a CSP to support Google Maps

In some file you should configure helmet to allow scripts from Google Maps.

const helmetForGoogleMaps = helmet({
  contentSecurityPolicy: {
    directives: {
      "script-src": ["'self'", "maps.googleapis.com"],
      "connect-src": ["'self'", "*.googleapis.com"],
      "img-src": [
        "'self'",
        "data:",
        "maps.gstatic.com",
        "*.googleapis.com",
        "*.ggpht.com",
      ],
    },
  },
});

Using in Express

In your application you should assign helmet to middleware

app.use(helmetForGoogleMaps);