内容安全策略：页面的设置阻止加载http://localhost:3000/favicon.ico（“default-src”）处的资源

Question

当我尝试打开另一个应用程序的路线时，我一直遇到此错误：

Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:3000/favicon.ico (“default-src”).

我阅读了具有相同错误的其他问题，但更改我的元标记并没有解决该问题。这就是现在的样子：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self'; script-src 'self'; child-src 'none';" />

我在 Firefox、Chrome 和 Brave 上也遇到同样的错误。这是我在 Firefox 107.0 上遇到的完整错误：

编辑：我删除了元标记并将其更改为从服务器设置我的 CORS，但我不知道如何从 Express 定义 CSP。

这是我在服务器上添加的内容：

const cors = require('cors')
const corsOptions = {
  origin: 'http://localhost:3000/',
  optionsSuccessStatus: 200
}
app.use(cors(corsOptions))

我仍然收到 CSP 错误。我该如何解决这个问题？

Answer 1

在屏幕截图中，您可以看到响应标头“Content-Security-Policy: default-src 'none'”。这会阻止几乎所有源在该页面上加载。请注意，内容需要通过所有策略，因此在这种情况下添加另一个策略不会产生任何影响。您需要找出“default-src 'none'”标头的设置位置并修改或删除它。

Answer 2

我遇到了这个问题。我通过确保我的服务器存储库中存在一个包含 favicon.ico 文件的公共文件夹来解决该问题。

对于我的答案中包含的图标，我刚刚从这里下载： https://creativecommons.org/licenses/by/4.0/