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

Question

对于 maps.googleapis.com 的 common.js 文件，我在 chrome 开发者工具的控制台中多次出现以下错误-

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 策略，不允许使用内联样式和脚本。而且似乎在 common.js 的 google map api 中使用了内联样式，因此我收到了上述错误。

有什么建议吗？

Answer 1

有什么建议吗？

在

'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 地图 API 脚本将此

nonce='base64value'

重新分配到所有子外部脚本和内联样式块中。你可以在'nonce'的演示中用谷歌地图查看它，只需选择'nonce'复选框。

编辑 24-07-2021：

我可以确认：

• GMap 进行了一些更改，不会将

  nonce

  从脚本标签重新分配到样式中。
• Max Visser 的解决方法现在不再有效。

因此，不幸的是答案是：使用'unsafe-inline'并等待谷歌为样式实现'nonce'。

Answer 2

目前，谷歌地图要求您在 CSP 中为

unsafe-inline

提供

style-src

。对于

script-src

，它仍然有效。~~

提到的CSPlite.com granty测试已经调整；在写这个答案时测试说

2021 年 4 月末，Google 地图脚本停止将

'nonce-value'

从父脚本传递到子样式块

<style>...</style>

我找到的临时解决方案是将 Google Maps 中的所有样式添加到我们的第三方 CSS 代码中。这样你仍然会得到你在控制台中遇到的错误，但是由于

style-src

阻止谷歌地图的内联样式而导致的视觉错误将会消失。我们使用的方法是复制谷歌地图添加的所有内联样式。

如果您找到这个答案并且还希望谷歌地图再次支持将随机数值分发到他们的内联样式块，请在这里发表评论。

编辑 22-06-2021：

GMap 还没有正式支持随机数。最近进行了一项更改，改进了 Maps JS 处理脚本和样式的单独随机数的能力。现在，如果一个站点在

<style>

或

<link rel="stylesheet">

上没有随机数，这将导致没有随机数应用于 Maps JS 样式表。

作为一种变通方法，您的站点可以包含一个空的

<style>

并提供随机数，GMaps JS 将拾取它。

Answer 3

对我来说，解决方案在这里：https://csplite.com/csp/test42/#styles_nonce_workaround

添加

<style nonce='base64value'></style>

完成了工作。

Answer 4

我已经实施了上述解决方法

<style nonce='base64value'></style>

或者

<link rel='stylesheet' href='' nonce="base64value">

但似乎没有任何效果......我仍然被 CSP 阻止。如果这仍然有效，有什么想法吗？谢谢！