无法使用 Google 地图 API 实施严格的内容安全政策

我在 chrome 的开发者工具控制台中多次遇到错误,用于 maps.googleapis.com 的 common.js 文件-

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.

我需要使用严格的 CSP 政策,所以不能使用 unsafe-inline 或 unsafe-eval 来放松政策。为了支持严格的 CSP 策略,不允许使用内联样式和脚本。并且似乎在 google map api 的 common.js 中使用了内联样式,因此我收到了上述错误。

有什么建议吗? enter image description here

stack overflow Not able to implement strict Content Security Policy with Google maps APIs
原文答案
author avatar

接受的答案

有什么建议吗?

'nonce-value' 中使用 script-src 令牌,在 style-src 中使用相同的令牌。如果您使用 nonce='value' 属性调用 GMaps API:

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

Google maps API 脚本将此 nonce='base64value' 重新分配到所有子外部脚本和内联样式块中。您可以在 'nonce' with Google map 的演示中查看它,只需选中 'nonce' 复选框。

2021 年 7 月 24 日编辑:

我可以确认:

  • GMap 进行了一些更改,并且不会将 nonce 从脚本标签重新分配到样式中。
  • Max Visser no longer works 目前的解决方法。

因此,不幸的是答案是: Use 'unsafe-inline' and wait for Google to implement 'nonce' for styles.


答案:

作者头像

~ 目前谷歌地图要求您在 CSP 中为 unsafe-inline 提供 style-src 。对于 script-src ,它仍然有效。~~~

~

对上述CSPlite.com granty的测试进行了调整;在撰写此答案时 the test says

2021 年 4 月结束时,Google 地图脚本停止将 'nonce-value' 从父脚本传递到子样式块 <style>...</style>

我找到的临时解决方案是将 Google Maps 中的所有样式添加到我们的第三方 CSS 代码中。这样,您仍然会在控制台中遇到错误,但是由于 style-src 阻止来自 Google 地图的内联样式而导致的视觉错误将会消失。我们使用的方法是复制谷歌地图添加的所有内联样式。

~

~如果你找到了这个答案,并且还希望谷歌地图再次支持将 nonce 值分配到它们的内联样式块, please leave a comment here 。~

2021 年 6 月 22 日编辑:

GMap 还没有正式支持随机数。最近发生了一项更改,改进了 Maps JS 处理脚本和样式的单独随机数的能力。现在,如果一个站点在 <style><link rel="stylesheet"> 上没有随机数,这将导致没有随机数应用于 Maps JS 样式表。

作为一种解决方法,您的站点可以包含一个空的 <style> 和提供的随机数,GMaps JS 会选择它。