内容安全策略：“img-src'self'数据：”

Question

我有一个应用程序，用户可以在其中复制图像 URL，将其粘贴到输入中，然后图像将加载到框中。

但是我的应用程序不断触发此消息：

拒绝加载图像“LOREM_IPSUM_URL”，因为它违反了以下内容安全策略指令：“img-src 'self' data：”。

这是我的元标签：

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

我在应用程序中使用 html2Canvas，当我删除它时：“img-src 'self' data:”

它会引发此错误：

html2canvas.js:3025 Refused to load the image 'data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg'></svg>' because it violates
the following Content Security Policy directive: "default-src *". 
Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

还有一堆其他错误。

Answer 1

尝试更换此部件：

img-src * 'self' data: https:;

所以完整的标签：

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

内容安全策略参考

Answer 2

img-src * 'self' data: https:;

不是一个好的解决方案，因为它会使您的应用程序容易受到 XSS 攻击。这里最好的解决方案应该是：

img-src 'self' data:image/svg+xml

。如果它不起作用，请尝试：

img-src 'self' data:

如果您的指令仍然是

img-src * 'self' data: https:;

，请考虑更改它

Answer 3

对于头盔使用者。 更好的做法是不要将 contentSecurityPolicy 设置为 false，这应该是最后一个选项。我在我的应用程序中使用了这个，它很好地解决了这个问题。我的应用程序托管在here。查看我的源代码这里。

app.use(
  helmet.contentSecurityPolicy({
    useDefaults: true,
    directives: {
      "img-src": ["'self'", "https: data:"]
    }
  })
)

Answer 4

除了 @manzapanza 上面贡献的内容之外，您还需要确保应用程序的 Web 配置文件中是否尚未配置 CSP，因为如果该设置存在，它将覆盖索引文件中的元标记设置，如下所示下面的例子：

索引元标记：

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

被 Web 配置文件中的 CSP 设置覆盖。

网页配置设置：

<add name="Content-Security-Policy" value="default-src https: http: 'unsafe-inline'; img-src * 'self' data: https:;" />

在这种情况下，请考虑在系统的 Web 配置文件中设置一组。

Answer 5

我的 jspdf 和 html2canvas 也面临同样的问题。我也使用过 nginx，并在我的“conf/nginx-template.conf”文件中配置了“Content-Security-Policy”。以下更改为我解决了这个问题：

add_header Content-Security-Policy <...>; img-src 'self' data: https:; frame-src 'self' data:;

Answer 6

如果

img-src 'self' data:

不适合您，因为您使用 JavaScript 操作图像，请尝试使用

img-src * 'self' data: blob: ;

添加 blob 对象

Answer 7

就我而言，我正在加载 Firebase 存储链接，但它不起作用。

img-src 'self' data: https://storage.googleapis.com

因为我的链接有存储桶名称和文件夹，然后到达文件，然后查询参数，因为它是签名的网址。有什么办法解决这个问题吗？

一直在寻找答案。帮助。

Answer 8

这简单地解决了问题：

img-src 'self' data:

但请确保使用分号 (;) 分隔多个指令