拒绝在node.js应用程序中加载样式表/脚本

Question

所以基本上我面临一个从https://fonts.googleapis.com/css?family=Merriweather:400,700&display=swap加载一些字体的问题，

运行该应用程序时，我会收到几条错误消息

localhost/:1拒绝加载样式表'https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap‘，因为它违反了以下内容安全策略指令："default-src 'self'“。请注意，'style-src-elem‘没有显式设置，因此“default-src”用作回退。 localhost/:1拒绝加载样式表'https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap‘，因为它违反了以下内容安全策略指令："style-src 'self’不安全-内联‘“。请注意，'style-src-elem‘没有显式设置，因此'style-src’用作回退。 localhost/:1拒绝加载样式表'https://fonts.googleapis.com/css?family=Merriweather:400,700&display=swap‘，因为它违反了以下内容安全策略指令："default-src 'self'“。请注意，'style-src-elem‘没有显式设置，因此“default-src”用作回退。 localhost/:1拒绝加载样式表'https://fonts.googleapis.com/css?family=Merriweather:400,700&display=swap‘，因为它违反了以下内容安全策略指令："style-src 'self’不安全-内联‘“。请注意，'style-src-elem‘没有显式设置，因此'style-src’用作回退。

同时，im试图为我的项目实现Stripe，但是im也无法加载脚本im获得相同的错误消息。

localhost/:1拒绝加载脚本'https://js.stripe.com/v3‘，因为它违反了以下内容安全策略指令：" script -src 'self'“。请注意，“script-src-elem”没有显式设置，因此“script-src”用作回退。

我不了解元标签中的CSP

这是我有的，但我认为不起作用。

meta(http-equiv='Content-Security-Policy' content="default-src 'self'")   
meta(http-equiv='Content-Security-Policy' content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://www.google.com")   
meta(http-equiv='Content-Security-Policy' content="style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;")

另外，我在我的应用程序上安装了helmet.js模块，配置如下

app.use(helmet());

Answer 1

另外，我在我的应用程序上安装了helmet.js模块，配置如下 app.use(helmet());

头盔V4使用header发布默认CSP。这就是你的外部来源被封锁的原因。

您不能通过在<meta>标记中添加第二个CSP来减少一个CSP，因为几个CSP作为一致的筛选器工作:所有源都必须通过所有的CSP。

您可以禁用头盔中间件：

// This disables the `contentSecurityPolicy` middleware but keeps the rest.
app.use(
   helmet({
     contentSecurityPolicy: false,
   })
 );

然后使用元标记CSP代替它。

或者，您可以在Helmet.contentSecurityPolicy(选项)中的头盔CSP设置中添加阻塞的源。

Answer 2

有一段时间我也面临着这个问题。然后，我检查了https://content-security-policy.com/examples/express-js/，并在response对象中添加了CSP头。它运作得很好

var express = require('express');
var application = express();

application.use(function(req, res, next) {
    res.setHeader("Content-Security-Policy", "script-src 'self' https://fonts.googleapis.com");
    return next();
});

application.use(express.static(__dirname + '/'));

application.listen(process.env.PORT || 9000);