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

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?

Solution 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.

Solution 2:

Currently google maps requires you to have unsafe-inline in your CSP for style-src. For script-src, it still works.~~

The test of CSPlite.com granty mentioned has been adjusted; As of writing this answer the test says

At the end of April 2021, the Google maps script stopped passing the 'nonce-value' from the parent script to the blocks of child styles <style>...</style>

The temporary solution I found is to add all the styles from Google Maps to our third-party CSS code. This way you still get the error you have in console but the visual bugs resulting from style-src blocking inline styles from Google maps will go away. Method we used for this is to just copy over all the inline styles added by google maps.

If you find this answer and also want Google Maps to support distribution of nonce values to their inline style blocks again, please leave a comment here.

Edit 22-06-2021:

GMap does not officially support nonces yet. Recently a change went in that improved Maps JS's ability to handle separate nonces for scripts and styles. Now, if a site has no nonce on a <style> or <link rel="stylesheet">, this results in no nonce being applied to Maps JS stylesheets.

As a workaround, your site can include an empty <style> with the nonce provided, and GMaps JS will pick it up.