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

Question

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

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

我尝试过类似的事情

<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 设置为 false，这应该是最后一个选项。使用头盔文档有很大帮助。我在我的应用程序中使用了这个，它很好地解决了这个问题。我的应用程序托管在here。查看我的源代码这里。

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

Answer 3

这会禁用

contentSecurityPolicy

中间件，但保留其余部分：

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

Answer 4

这解决了问题

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