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

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

所以基本上我在尝试从 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,700&display=swap' 因为它违反了以下内容安全策略指令： “style-src 'self' 'unsafe-inline'”。请注意，'style-src-elem' 不是 显式设置，因此“style-src”用作后备。

localhost/:1 拒绝加载样式表 'https://fonts.googleapis.com/css?family=Merriweather:400,700&display=swap' 因为它违反了以下内容安全策略指令： “默认-src '自我'”。请注意，'style-src-elem' 没有明确 设置，所以 'default-src' 用作后备。

localhost/:1 拒绝加载样式表 'https://fonts.googleapis.com/css?family=Merriweather:400,700&display=swap' 因为它违反了以下内容安全策略指令： “style-src 'self' 'unsafe-inline'”。请注意，'style-src-elem' 不是 显式设置，因此“style-src”用作后备。

我也试图为我的项目实现 Stripe，但我也无法加载脚本，我收到了相同的错误消息

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

我的应用程序上还安装了helm.js模块，配置如下

app.use(helmet());

解决方法

我的应用程序上还安装了helm.js模块，配置如下

app.use(helmet());

Helmet V4 使用 HTTP 标头发布 default CSP。这就是您的外部来源被阻止的原因。
您无法通过在 <meta> 标记中添加第二个 CSP 来缓解一个 CSP，因为多个 CSP 用作一致的过滤器：所有源都必须通过所有 CSP。

您可以禁用 Helmet 中间件：

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

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

或者您可以在 helmet.contentSecurityPolicy(options) 中将阻止的源添加到 Helmet CSP 设置中。

,

前段时间我也遇到过这个问题。然后我检查了 https://content-security-policy.com/examples/express-js/ 并在响应对象中添加了 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);