Google Maps error on Content Security Policy

Question

I have the following line on the layout loading the google maps script:

<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY" async defer></script>

On the web.config, Content Security Policy is enabled allowing only self scripts and the *.googleapis.com

<content-Security-Policy enabled="true">
      <script-src self="true">
        <add source="*.googleapis.com"/>            
      </script-src>
    </content-Security-Policy>

When I open the page, google maps plugin is working fine. But I'm getting this error on the JavaScript console:

js?key=MY_KEY:318 Refused to connect to 'https://maps.googleapis.com/maps/api/mapsjs/gen_204?csp_test=true' because it violates the following Content Security Policy directive: "connect-src 'self'".

It seems like the google script is loading a second call to that other script. (And what's that csp_test=true means??) Even though the gmaps is working, I would like to get rid of that exception, and I'm not able to... Any help?

Thanks in advance!

Answer 1

The script attempts to send data to maps.googleapis.com, but that is not allowed as you have restricted connect-src to 'self' only. You would likely need to add modify your configuration to this:

<content-Security-Policy enabled="true">
  <script-src self="true">
    <add source="*.googleapis.com"/>            
  </script-src>
  <connect-src self="true">
    <add source="*.googleapis.com"/>            
  </connect-src>
</content-Security-Policy>

You could also be more restrictive on the subdomain (maps.googleapis.com) or use the default-src directive instead.