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

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 *;
    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) 是一种有助于防止 Cross-Site 脚本 (XSS) 的机制，最好在服务器端处理；请注意它也可以在客户端处理，利用 HTML.

的 <meta> 标签元素

配置并启用后，Web 服务器将 return HTTP 响应中的适当 Content-Security-Policy header。

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

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

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

Answer 2

/favicon.ico 在没有其他 URL 的网站图标时由 Web 浏览器自动加载。这是指定的： https://html.spec.whatwg.org/#rel-icon
您当前的 Content-Security-Policy 正在阻止它。您需要使用类似：Content-Security-Policy: img-src 'self'

理想情况下，Web 浏览器甚至不应该尝试 /favicon.ico，因为它会被阻止。毕竟，加载 /favicon.ico 是由网络浏览器触发的，而不是开发人员。我修补了 chrome（版本 >= 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 header 例如图片和其他静态文件，如

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

然后 Firefox 将假定这也意味着对用于选项卡图标的 /favicon.ico 的隐式引用也被禁止。 Chrome 有内部特殊情况，无论 CSP header 总是允许隐式 /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 对源中的前缀路径的支持有限，但它具有非常复杂的重定向边缘情况，因此您应该尽可能避免使用该功能。）

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

Loading of a resource blocked by Content Security Policy

express

content-security-policy