加载被内容安全策略阻止的资源 [英] 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，后端位于 localhost: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
}
}));
...但仍然没有解决问题.
. . . but still hasn't fixed the problem.
截图如下:
我做错了什么，我该如何解决?
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 开发人员页面上阅读有关 CSP 的更多信息 此处 和此处.
You may want to read more about CSP on the on the HTML5Rocks website and Mozilla developer page here and here.
Google CSP Evaluator 是一款方便且免费的在线工具，可帮助您测试网站或网络的 CSP申请.
Google CSP Evaluator is a handy and free online tool to help test CSP for your website or web application.
在您的实例中，您可能需要在不使用 https: 指令强制 HTTPS 作为协议的情况下添加以下行；
因为您的网站或应用程序(作为共享)无法通过 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 使用 Content-Security-Policy 中间件，您可以按照下面的代码段所示开始；
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屋！
