内容安全策略：“img-src 'self' data:”

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.

以及一堆其他错误。

原文由 Rafael de Castro 发布，翻译遵循 CC BY-SA 4.0 许可协议

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' *">

内容安全策略参考

原文由 manzapanza 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

img-src * 'self' data: https:; 不是一个好的解决方案，因为它会使您的应用容易受到 XSS 攻击。这里最好的解决方案应该是： img-src 'self' data:image/svg+xml 。如果它不起作用，请尝试： img-src 'self' data: 如果你的指令仍然是—，请考虑更改它 img-src * 'self' data: https:;

原文由 Donald Shahini 发布，翻译遵循 CC BY-SA 4.0 许可协议