Question

我的带有Google Maps javascript API对象的网站没有加载很多图像。

Chrome开发者工具删除了此内容：

Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src 'self' <URL> <URL> <URL> <URL>".

userone:1 Refused to load the image 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%20018%2018%22%3E%0A%20%20%3Cpath%20fill%3D%22%23666%22%20d%3D%22M0%2C0v2v4h2V2h4V0H2H0z%20M16%2C0h-4v2h4v4h2V2V0H16z%20M16%2C16h-4v2h4h2v-2v-4h-2V16z%20M2%2C12H0v4v2h2h4v-2H2V12z%22%2F%3E%0A%3C%2Fsvg%3E%0A' because it violates the following Content Security Policy directive: "img-src 'self' https://www.google-analytics.com https://maps.gstatic.com https://*.googleapis.com".

此消息一遍又一遍地重复出现在页面上的许多图像上。

Answer 1

通过在我的内容安全策略（CSP）中添加data:image/svg+xml来解决此问题：

'img-src': ["'self'",
  ...
  'data:',
  ...
]

请注意，data:是不安全的：

攻击者还可以注入任意data: URI。谨慎使用，绝对不要用于脚本。

来源：MDN: Content Security Policy: img-src

Answer 2

如果可能的话，您还可以通过删除默认的Google Map UI或删除所有使用图像的控件来解决此问题。

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    // remove all controls
    disableDefaultUI: true,
    // or just the ones that need images
    zoomControl: false,
    scaleControl: false,
    streetViewControl: false,
    rotateControl: false,
    fullscreenControl: false
});

https://developers.google.com/maps/documentation/javascript/controls#DefaultUI

在这种情况下：

双击手指仍可进行缩放
未使用街景视图/全屏[/其他导航]

但是，如果您确实确实想要所有默认功能，并且不想更改CSP，则可以添加使用您自己的图像的自定义控件。更多信息也可以在上面的链接中找到。我个人采取这种方法，总比后悔好。

由于内容安全政策，Google地图缩放按钮无法加载：“拒绝加载图像'data：image / svg + xml ...”

2 个答案: