Content Security Policy error on @googlemaps/js-api-loader-CodePudding

I've been struggling with this issue for few weeks now. No matter what changes I make to my CSP - I still get the same error. I'm not sure if it has anything to do with my CSP headers or not. Set up: I have an angular 13 SPA with a NodeJS back end.

I used NPM to install

"@angular/google-maps": "^13.3.2", 
"@googlemaps/js-api-loader": "^1.14.3",

I import the methods in my dashboard.ts file:

import { Loader } from "@googlemaps/js-api-loader";

I used to following code snip it in my ngOnInit():

let loader = new Loader({
  apiKey: '--------------------------',
});

loader.load().then(() => {
  console.log('loaded gmaps')

  const location = { lat: 51.233334, lng:   6.783333 }

  this.map = new google.maps.Map(document.getElementById("map"), {
    center: location,
    zoom: 6
  })

  const marker = new google.maps.Marker({
    position: location,
    map: this.map,
  });
})

I modified my Content Security Header to be:

<meta http-equiv="Content-Security-Policy"
 content="script-src 'self' maps.googleapis.com;
          img-src 'self'  data: maps.gstatic.com *.googleapis.com *.ggpht.com;
          font-src https://fonts.gstatic.com/  'unsafe-inline';
          style-src 'self' https://fonts.googleapis.com  'unsafe-inline';  
          style-src-elem 'self' https://fonts.googleapis.com  'unsafe-inline';  
        />

No matter what I do - I always get the same error:

74.6f64f0c92cc7c0a0.js:346 Refused to load the script 'https://maps.googleapis.com/maps/api/js?callback=__googleMapsCallback&key=---------------' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Any insight would be greatly appreciated!

CodePudding user response：

The CSP in the error message has script-src "script-src 'self'" while the one you have defined has "'self' maps.googleapis.com". Most likely there are two CSPs defined, and all content has to pass all policies. Your policy is defined as a meta tag. Look for CSP defined in a response header as well. You will need to determine why and where the other CSP is set and then change or remove it.

CodePudding user response：

Figured it out. Basically, my Angular APP was being served by my NodeJS application. My NodeJS application is using Helmet and it seems that the default CSP from Helmet was over riding the Angular CSP set up in the index.html.