Not able to implement strict Content Security Policy with Google maps APIs

Question

I am getting below error multiple times in the console of developer tool of chrome for common.js file of maps.googleapis.com-

common.js:15 
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://fonts.googleapis.com https://s3.amazonaws.com https://maxcdn.bootstrapcdn.com". Either the 'unsafe-inline' keyword, a hash ('sha256-mmA4m52ZWPKWAzDvKQbF7Qhx9VHCZ2pcEdC0f9Xn/Po='), or a nonce ('nonce-...') is required to enable inline execution.

I need to use strict CSP policy so can't use unsafe-inline or unsafe-eval to relax the policy. To support strict CSP policy, inline styling and scripting are not allowed. And it seems inline stylings have been used in the common.js of the google map api due to which I am getting the above error.

Any suggestion?

Answer 1

Any suggestion?

Use 'nonce-value' token in script-src and the same one in style-src. If you call the GMaps API with nonce='value' attribute:

<script async defer src='//maps.googleapis.com/maps/api/js?key=<api_key_here>&callback=initMap' nonce='base64value'></script>

The Google maps API script redistributes this nonce='base64value' into all child external scripts and inline styles blocks. You can check it in the demo of 'nonce' with Google map, just select 'nonce' checkbox.

Edit 24-07-2021:

I can confirm that:

• GMap made some changes and does not redistribute nonce from script tag into styles.
• A workaround by Max Visser no longer works as of now.

Therefore, unfortunately the answer is: Use 'unsafe-inline' and wait for Google to implement 'nonce' for styles.