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

Question

我上传我的网站在herokuy的图像不工作，它给了我这个错误

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

我已经试过了

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

，但它也不起作用

Answer 1

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

Answer 2

这将禁用contentSecurityPolicy中间件，但保留其余部分:

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

Answer 3

最好的做法是将contentSecurityPolicy设置为false，这应该是最后一个选项。使用头盔文档有很大帮助。我在我的应用程序中使用了这个，它很好地解决了这个问题。我的应用程序托管在这里。查看我的源代码。

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