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

【问题标题】：Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src 'self' data:"拒绝加载图像“<URL>”，因为它违反了以下内容安全策略指令：“img-src 'self' data:”
【发布时间】：2021-05-29 23:42:09
【问题描述】：

在我在 herokuy 上上传我的网站后，图像无法正常工作，它给了我这个错误

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

我尝试过类似的东西

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src data:" />

但它也不起作用

【问题讨论】：

Https://res.clodinary.com/image/upload/…
facebook-clones.herokuapp.com之类的网站
Content-Security-Policy: default-src 'self'; img-src 'self' clodinary.com *.clodinary.com
顺便说一句，你有一个错字 - 它是多云的而不是 clodinary。
是的，正如@granty 所说，problelm 在节点 js 中带有头盔 stackoverflow.com/questions/66421706/…

标签： node.js vue.js mongoose content-security-policy cloudinary

【解决方案1】：

这将禁用 contentSecurityPolicy 中间件，但保留其余的：

app.use(
  helmet({
    contentSecurityPolicy: false,
  })
);

【讨论】：

【解决方案2】：

最好的做法是不要将 contentSecurityPolicy 设置为 false，这应该是最后一个选项。使用Helmet documentation 有很大帮助。我在my app 中使用了它，它很好地解决了这个问题。我的应用托管在here。查看我的源代码here。

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

【讨论】：