无法使用 Google 地图 API 实施严格的内容安全政策
Not able to implement strict Content Security Policy with Google maps APIs
对于 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 策略，不允许使用内联样式和脚本。而且似乎在 google 映射 api 的 common.js 中使用了内联样式，因此我收到了上述错误。
有什么建议吗？
Any suggestion?
在 script-src 中使用 'nonce-value' 个令牌，在 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' with Google map的demo中查看，只需select'nonce'复选框即可。
编辑 24-07-2021：
我可以确认：
- GMap 进行了一些更改，不会将
nonce 从脚本标签重新分配到样式中。
- Max Visser no longer works 目前的解决方法。
因此，不幸的是答案是：使用'unsafe-inline'并等待Google为样式实现'nonce'。
目前 google 地图要求您在 style-src 的 CSP 中有 unsafe-inline。对于script-src，它仍然有效。~~
提到的CSPlite.comgranty的测试已经调整；在撰写此答案时 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>
我找到的临时解决方案是将 Google 地图中的所有样式添加到我们的第三方 CSS 代码中。这样你仍然会得到你在控制台中遇到的错误，但是由于 style-src 阻止来自 Google 地图的内联样式而导致的视觉错误将会消失。我们使用的方法是复制 google 地图添加的所有内联样式。
如果您找到这个答案并且还希望 Google 地图再次支持将随机数值分发到其内联样式块，please leave a comment here.
编辑 22-06-2021：
GMap 尚未正式支持随机数。最近进行了一项更改，改进了 Maps JS 处理脚本和样式的单独随机数的能力。现在，如果站点在 <style> 或 <link rel="stylesheet"> 上没有随机数，这将导致没有随机数应用于 Maps JS 样式表。
作为解决方法，您的网站可以包含一个空的 <style> 和提供的随机数，GMaps JS 会选择它。
对于 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 策略，不允许使用内联样式和脚本。而且似乎在 google 映射 api 的 common.js 中使用了内联样式，因此我收到了上述错误。
有什么建议吗？
Any suggestion?
在 script-src 中使用 'nonce-value' 个令牌，在 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' with Google map的demo中查看，只需select'nonce'复选框即可。
编辑 24-07-2021：
我可以确认：
- GMap 进行了一些更改，不会将
nonce从脚本标签重新分配到样式中。 - Max Visser no longer works 目前的解决方法。
因此，不幸的是答案是：使用'unsafe-inline'并等待Google为样式实现'nonce'。
目前 google 地图要求您在 style-src 的 CSP 中有 unsafe-inline。对于script-src，它仍然有效。~~
提到的CSPlite.comgranty的测试已经调整；在撰写此答案时 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>
我找到的临时解决方案是将 Google 地图中的所有样式添加到我们的第三方 CSS 代码中。这样你仍然会得到你在控制台中遇到的错误，但是由于 style-src 阻止来自 Google 地图的内联样式而导致的视觉错误将会消失。我们使用的方法是复制 google 地图添加的所有内联样式。
如果您找到这个答案并且还希望 Google 地图再次支持将随机数值分发到其内联样式块，please leave a comment here.
编辑 22-06-2021：
GMap 尚未正式支持随机数。最近进行了一项更改，改进了 Maps JS 处理脚本和样式的单独随机数的能力。现在，如果站点在 <style> 或 <link rel="stylesheet"> 上没有随机数，这将导致没有随机数应用于 Maps JS 样式表。
作为解决方法，您的网站可以包含一个空的 <style> 和提供的随机数，GMaps JS 会选择它。