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

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) 的机制，最好在服务器端处理；请注意，它也可以在客户端处理，利用<meta>HTML的标签元素。

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

你可能想阅读更多关于CSP的HTML5ROCKS网站和Mozilla开发网页这里和这里。

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

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

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

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

如果您选择为 Express使用Content-Security-Policy 中间件 ，您可以按照下面的代码段所示开始；

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 是特定于案例或应用程序的，并基于您的项目要求。

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