拒绝加载图像“blob:...”，因为它违反了以下内容安全政策答案

【问题标题】：Refused to load the image 'blob:...' because it violates the following Content Security Policy拒绝加载图像“blob:...”，因为它违反了以下内容安全政策
【发布时间】：2020-04-16 10:45:09
【问题描述】：

我收到了这个错误：

Refused to load the image 'blob:file:///cf368042-bf23-42b6-b07c-54189d3b0e01' because it violates the following Content Security Policy directive: "default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

在尝试加载 mapboxGL 地图时。这是我的 CSP 标签：

<meta http-equiv="Content-Security-Policy" 
    content="
      worker-src blob:; 
      child-src blob: gap:;
      default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">

【问题讨论】：

将 'img-src blob:' 添加到 Content-Security-Policy 值。或者将 'blob:' 添加到现有的 'default-src' 值。

标签： html mapbox content-security-policy

【解决方案1】：

您需要在您的 CSP 值中添加 img-src blob:。由于 img-src 不存在，它使用的是 default-src。您也可以设置 img-src *。请查看https://content-security-policy.com/ 了解如何为图像添加 CSP。

【讨论】：

【解决方案2】：

这是对图像和 base64 的修复。

需要加img-src 'self' blob: data:;如下：

<meta http-equiv="Content-Security-Policy" 
    content="
      worker-src blob:; 
      child-src blob: gap:;
      img-src 'self' blob: data:;
      default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">

【讨论】：

这里data:有什么用？ img-src 'self' blob: 可以代替吗？

【解决方案3】：

通常，设置 img-src 策略会解决问题，但如果您仍然遇到相同的错误。注意，如果你同时使用“helmet”中间件，你的问题可能来自它，需要单独配置。

【讨论】：