Content Security Policy with Google Maps and Helmet
![Photo by Silvia Brazzoduro on Unsplash](/_next/image?url=%2Fimages%2Frandom-blog-covers%2Fsilvia-brazzoduro-YSxcf6C_SEg-unsplash.jpg&w=1920&q=75)
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);