Express 加载内容安全策略阻止的资源

我在浏览器的控制台中发现以下错误：

内容安全策略：页面的设置阻止了

http://localhost:3000/favicon.ico

（“默认src”）

我在网上搜索，发现这应该用下面的代码片段来修复：

<meta http-equiv="Content-Security-Policy" content="default-src *;
    img-src * 'self' data: https: http:;
    script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
    style-src  'self' 'unsafe-inline' *">

我现在还向后端（Express）服务器添加了以下中间件：

。但仍然没有解决问题

以下是一个屏幕截图：

我做错了什么以及如何修复它？

内容安全策略（CSP）是一种有助于防止跨站点脚本（XSS）的机制，最好在服务器端处理；请注意，它也可以在客户端处理，使用HTML的

标记元素

配置并启用后，web服务器将在HTTP响应标头中返回相应的

内容安全策略

您可能想在HTML5Rocks网站和Mozilla开发者页面上阅读更多关于CSP的信息

是一个方便且免费的在线工具，可帮助您测试网站或web应用程序的CSP

在您的实例中，您可能需要添加以下行，而不使用
HTTPS:
指令强制使用HTTPS作为协议

因为您的网站或应用程序（共享）无法通过HTTPS访问

res.header（'Content-Security-Policy'，'img src'self'）；

从
defaultsrc
指令设置为
none
开始，是开始部署CSP设置的好方法

如果您选择使用，您可以开始使用，如下面的代码段所示

const csp=require（'express-csp-header'）；
应用程序使用（csp）({
政策：{
“默认src”：[csp.NONE]，
“img src”：[csp.SELF]，
}
}));
//HTTP响应头将定义为：
//“内容安全策略：默认src'none'；img src'self'

请记住，CSP是特定于案例或应用程序的，并且基于您的项目需求

因此，您需要进行微调以满足您的需要。

/如果favicon没有其他URL，web浏览器会自动加载favicon.ico。具体规定如下：

您当前的内容安全策略阻止了它。您需要使用类似的内容：
内容安全策略：img src'self'


理想情况下，web浏览器甚至不应该在被阻止时尝试/favicon.ico。毕竟，加载/favicon.ico是由web浏览器触发的，而不是由开发人员触发的。
我修补了chrome（版本>=88）以删除错误：


您也可以通过https为您的资源提供服务。一个文件可以破坏整个链。原始CSP设置在哪里（可能是服务器，在头中）？如果您只是尝试调试策略并添加所有额外的允许行，这没关系，但是如果您计划将其投入生产，那么您还可以完全删除CSP。为了正确配置CSP，您应该了解CSP的用途。非常感谢。我在前端和后端都将
defaultsrc
设置为
none
，但这仍然没有解决问题。还有其他想法吗？Tks@CrowdPleaser:您是否将
img src
设置为
self
？如果您仍然面临挑战，请完成并共享控制台浏览器的屏幕截图。谢谢。我在前端和后端将
imgsrc
设置为
self
，并添加了控制台浏览器的屏幕截图。再次感谢您的帮助！最疯狂的是，该应用程序在几天内都运行良好。然后我今天添加了一个到后端的
POST
路径，现在我突然遇到了无法解决的CSP问题。在聊天中继续讨论对我们其他试图解决此问题的人没有帮助。
app.use(cors());
app.options('*',cors());
var allowCrossDomain = function(req,res,next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
}
app.use(allowCrossDomain);

const csp = require('express-csp-header');

app.use(csp({
  policies: {
      'default-src': [csp.SELF, 'http://localhost:3000/', 'http://localhost:4200/' ],
      'script-src': [csp.SELF, csp.INLINE],
      'style-src': [csp.SELF],
      'img-src': ['data:', 'favico.ico'],
      'worker-src': [csp.NONE],
      'block-all-mixed-content': true
  }
}));