拒絕加載圖像'<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:"]
    }
  })
)