拒绝加载映像“blob:…”，因为它违反了以下内容安全策略

Question

我得到了这个错误：

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:">

Answer 1

通常情况下，set-img-src-policy会解决这个问题，但是如果仍然出现相同的错误。请注意，如果您同时使用“头盔”中间件，您的问题可能来自它，您需要单独配置它。

Answer 2

您需要在CSP值中添加img src blob:。因为img src不存在，所以它使用默认的src。您还可以设置img src*。请看一看https://content-security-policy.com/ 检查如何为映像添加CSP。

Answer 3

这是图像和bas64的修复程序。

需要添加img-src'自己'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:">