拒绝加载图片'blob:...'，因为它违反了以下内容安全策略。

Question

拒绝加载图片'blob:...'，因为它违反了以下内容安全策略。

40

我收到了以下错误提示：

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

- Raz Buchnik

3

将“img-src blob:”添加到Content-Security-Policy值中。否则，将“blob:”添加到现有的“default-src”值中。 - sideshowbarker

5个回答

2

您需要在CSP值中添加img-src blob:。由于缺少img-src，因此它正在使用default-src。您也可以将img-src *设置为所有来源都可用。请查看https://content-security-policy.com/以了解如何为图像添加CSP。

- Trupti J

从链接中：* "允许任何URL，除了data: blob: filesystem: schemes." 这就是为什么在这种情况下它不起作用的原因，因为回退选项 default-src * 不包括blob。 - cmbuckley

1

添加内容安全策略 img-src 'self' 'unsafe-inline' blob: data: 'unsafe-eval';

- Bikash kumar

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

0

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

- Jake Zhang

如何在Tomcat中进行？ - Vladimir B

0

针对Ghost + Nginx

在设置通过Nginx代理的Ghost博客时，我遇到了同样的问题。为了解决这个问题，我不得不在nginx的服务器块中更新以下标头：

add_header Content-Security-Policy "img-src 'self' blob: data:; default-src * data: 'unsafe-eval' 'unsafe-inline'" always;

这个修复方法通常适用于通过Nginx提供的应用程序，而不仅仅局限于Ghost CMS。

- Abhijeet_IXR

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Raz Buchnik · Accepted Answer

这是图像和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:">