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

Question

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

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

我尝试过类似的东西

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

但它也不起作用

Answer 1

这将禁用contentSecurityPolicy中间件，但保留 rest：

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

Answer 2

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

Answer 3

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

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