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?

Maiduguri

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.

Postdate

At time of writing, this alone is not enough. You still get errors Max Visers answer below does however work. – Questor

No, Max Visers answer below doesn't work as for now. Take a look, for example, at Street View. – Postdate

It may not work for street view, it does however work for a basic map. At least for now! – Questor

Seems you are right. But I find it weird that this change at the end of april resulted in CSP violations (as it should only be a change on where it fetches the nonce from). For our application its atleast better then copying over all the CSS as we need to run a really restrictive CSP. – Dekker

I added your test results as comment on the issue tracker from the GMaps team. As of right now (July 2021) they don't seem to work on offically support CSP just yet. But atleast now they have more information on what to fix when they do start working on it. If someone finds more CSP violations probably wise to leave a comment on the issue tracker. issuetracker.google.com/issues/132600807 – Dekker

It also seemed strange to me, technically it doesn't matter where to get the nonce value from. But I didn't do full testing of nonce support for CSS, I just happened to notice that the GMaps script used its nonce for styles. Thank you for the comments to issue tracker, there is a hope that Google will fix it. – Postdate

This is maddening! May 2024, still the same issue. – Anthropometry

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

Dekker

The empty inline style seems like a hack. This hack still works even now. Is it a hack? I'm trying to find documentation that addresses this. – Anthropometry

It’s only a hack if you don’t already have a style or link stylesheet tag.. but yes adding an empty one is pretty hacky! – Dekker

Hmm, I already had linked style sheets: <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" nonce="${cspNonce}"> <link rel="stylesheet" type="text/css" href="/css/app.css" nonce="${cspNonce}"> ... It only started working once I created the empty inline style tag. <style nonce="${cspNonce}"></style> If I remove the empty inline style tag, it stops working. – Anthropometry

Answer 3

For me the solution was here: https://csplite.com/csp/test42/#styles_nonce_workaround

Adding <style nonce='base64value'></style> did the job.

Melanite