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

Question

我在浏览器的控制台中收到以下错误：

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

我在网上查了一下，应该是用下面代码的sn-p解决的：

<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。

下面是我的后端服务器（中间件）的代码 sn-p：

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 使用。 em>

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

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

如果您选择使用Content-Security-Policy middleware for Express ，您可以按照下面的 sn-p 所示开始；

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 由 Web 浏览器在没有其他网站图标的 URL 时自动加载。这是通过以下方式指定的： https://html.spec.whatwg.org/#rel-icon
• 您当前的 Content-Security-Policy 阻止了它。你需要使用类似的东西：Content-Security-Policy: img-src 'self'

---

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

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

---

Answer 3

nyedidikeke 的回答太棒了！

使用express-csp-header 中间件，设置policies 以通过CSP。
https://www.npmjs.com/package/express-csp-header

这是我的 ndoejs 代码：

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

尽情享受吧！

Answer 4

如果您有严格的 CSP 标头，例如图片和其他静态文件，如

Content-Security-Policy: default-src 'none';

那么 Firefox 将假定这也意味着 隐式 引用 /favicon.ico 用于标签图标也被禁止。 Chrome 有内部特殊情况，无论 CSP 标头如何，始终允许隐式 /favicon.ico。要授予 Firefox 对隐式 /favicon.ico 的访问权限，您必须至少添加 img-src 'self'。

Content-Security-Policy: default-src 'none'; img-src 'self';

另请注意，Content-Security-Policy 策略的语法 仅支持允许特定来源而不支持 URL。最初的问题有img-src ... favicon.ico，它应该刚刚说img-src ... 'self'。 （CSP 版本 2 对源中的前缀路径的支持有限，但它具有非常复杂的带有重定向的边缘情况，因此您应该尽可能避免使用该功能。）