内容安全政策:"img-src'自我'数据:"

Question

我有一个应用程序,用户可以复制图像URL,将其粘贴到输入,图像将被加载到一个盒子上.

但我的应用程序,继续触发此消息:

Refused to load the image 'LOREM_IPSUM_URL' because it violates 
the following Content Security Policy directive: "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'seld'数据:"

它触发了这个错误:

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，这应该是最后一个选项。我在我的应用程序中使用了这个，它很好地解决了这个问题。我的应用程序托管在这里。在这里查看我的源代码。

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