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

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

Answer 2

找到了！ 这是对image和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:">

Answer 3

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

Answer 4

尝试使用以下代码替换您的元标记：

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />

或者除了您拥有的东西外，还应该同时向http://*和style-src中添加script-src，如上所示在“ self”之后添加

如果您的服务器包含Content-Security-Policy标头，则标头将覆盖元数据。

如果以上情况不适用于您的情况，请尝试以下一种方法：

script-src 'self' http://xxxx 'unsafe-inline' 'unsafe-eval';

帮助HERE

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

4 个答案: