加载受内容安全策略阻止的资源 [英] Loading of a resource blocked by Content Security Policy

问题描述

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

I'm getting the error below in the console of my browser:

内容安全策略：页面的设置阻止了位于 http：// localhost：3000 / favicon.ico （ default-src）的资源。

Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:3000/favicon.ico ("default-src").

我在网上搜索，发现应该使用以下代码段对此进行修复：

I searched online and saw that this should be fixed with the snippet of code below:

<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 文件（所有前端视图的父模板），但这没有按预期工作。

I added this to my front-end app.component.html file (the parent template for all my front-end views), but this didn't work as expected.

我还尝试了多种排列方式

I've also tried multiple permutations thereupon to no avail.

我的前端位于 localhost：4200 ，后端位于本地主机：3000 。

My front-end is at localhost:4200 and back-end at localhost:3000.

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

Below is the snippet of code from my back-end server (middleware):

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）服务器：

I also have now added the following middleware to my backend (Express) server:

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

。 。 。

这是屏幕截图：

我在做什么错了，怎么解决？

What am I doing wrong and how can I fix it?

推荐答案

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

Content Security Policy (CSP) is a mechanism to help prevent Cross-Site Scripting (XSS) and is best handled at server side; please note it can be handled at client side as well, making use of the <meta> tag element of your HTML.

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

When configured and enabled, a web server will return the appropriate Content-Security-Policy in the HTTP response header.

您可能想在HTML5Rocks网站和Mozilla开发人员页面此处和此处。

You may want to read more about CSP on the on the HTML5Rocks website and Mozilla developer page here and here.

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

Google CSP Evaluator is a handy and free online tool to help test CSP for your website or web application.

在您的实例中，您可能需要添加以下代码行，而无需使用 https：指令；

因为您的网站或应用程序（共享）

In your instance, you may need to add the line below without enforcing HTTPS as protocol using the https: directive;
Because your website or application (as shared) is not available over HTTPS.

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

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

Starting with default-src directive set to none is a great way to start deploying your CSP settings.

如果您选择使用 Express
的内容安全策略中间件，您可以按如下所示开始使用

In case you opt to use the Content-Security-Policy middleware for Express , you may get started as illustrated in the snippet below;

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是针对案例或应用程序的，并取决于您的项目要求。

Remember CSP are case or application specific and based on your project requirements.

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

As such, you need to fine tune in order to meet your need.

这篇关于加载受内容安全策略阻止的资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！