reactjs - Google Map React Throwing“拒绝应用内联样式错误”

Question

CSP 问题：

我们的项目有严格的内容安全问题，即我们正在使用style-src *并且无法在unsafe-inline此处添加选项。我收到“拒绝应用内联样式错误”，并且由于上述严格的内容安全政策，CSS 未应用于谷歌地图。

重现步骤

1）克隆创建反应应用

2)安装google-map-reactv2.1.9

public/index.html3）在文件内部添加内容安全策略标头

 <script> 
    var cspScriptPolicy = "default-src 'none'; connect-src * 'self'; font-src *;img-src * data:; script-src * 'self' maps.googleapis.com; style-src *; manifest-src 'self';"; 
        // Inject a tag to disable inline scripts 
        var cspMetaTag = document.createElement('meta'); 
        cspMetaTag.setAttribute('http-equiv', 'Content-Security-Policy'); cspMetaTag.setAttribute('content', cspScriptPolicy); 
document.getElementsByTagName('head')[0].appendChild(cspMetaTag); </script>

4. 使用来自谷歌地图反应库的内联样式道具
5. 创建构建并在 localhost 上提供它。

预期行为:: 谷歌地图不应该抛出内联样式错误并且应该应用样式。

Answer 1

谷歌地图本身使用内联<style>，因此它需要'unsafe-inline'在 'style-src' 指令中。

官方 GMAP 不支持 nonce，但是使用 'nonce-value'可以解决内联样式的问题，但是 StreetView 不起作用。