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

Neha Singh
2020-12-25  
2510  
    
3  

我在 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

google-maps ,  security ,  google-maps-api-3 ,  content-security-policy ,  inline-styles
stack overflow Not able to implement strict Content Security Policy with Google maps APIs
原文答案
author avatar
granty
2020-12-26
4
     原文

接受的答案

有什么建议吗？

在 '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.


答案:

作者头像
Max Visser
2021-05-06    1      原文

~ 目前谷歌地图要求您在 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 会选择它。

相关问题

标签