Question

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

内容安全政策：该页面的设置阻止了http://localhost:3000/favicon.ico（“ default-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' *">

我将此添加到我的前端app.component.html文件（所有前端视图的父模板）中，但这没有按预期工作。

我还尝试了多种排列，但无济于事。

我的前端位于localhost:4200，后端位于localhost:3000。

以下是我的后端服务器（中间件）中的代码段：

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);

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

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
  }
}));

。。。但仍然没有解决问题。

这是屏幕截图：

我在做什么错，我该如何解决？

Answer 1

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

配置和启用后，Web服务器将在HTTP响应标头中返回相应的Content-Security-Policy。

您可能想在HTML5Rocks网站和Mozilla开发人员页面here和here上阅读有关CSP的更多信息。

Google CSP Evaluator是一种方便且免费的在线工具，可帮助您测试网站或Web应用程序的CSP。

在您的实例中，您可能需要添加以下行而不使用https:指令将HTTPS强制作为协议；
因为您的网站或应用程序（共享）无法通过HTTPS使用。

res.header('Content-Security-Policy', 'img-src 'self'');

从default-src伪指令设置为none开始是开始部署CSP设置的好方法。

如果您选择使用Content-Security-Policy middleware for Express ，则可以按照下面的代码片段开始使用；

const csp = require('express-csp-header');
app.use(csp({
    policies: {
        'default-src': [csp.NONE],
        'img-src': [csp.SELF],
    }
}));

// HTTP response header will be defined as:
// "Content-Security-Policy: default-src 'none'; img-src 'self';"

记住CSP是针对案例或应用程序的，并取决于您的项目要求。

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

Answer 2

/favicon.ico。通过以下方式指定： https://html.spec.whatwg.org/#rel-icon
您当前的Content-Security-Policy正在阻止它。您需要使用类似Content-Security-Policy: img-src 'self'

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

https://chromium-review.googlesource.com/c/chromium/src/+/2438388

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

2 个答案: