拒绝在 node.js 应用程序中加载 stylesheet/script

Question

所以基本上我在尝试从 https://fonts.googleapis.com/css?family=Merriweather:400,700&display=swap、

加载一些字体时遇到了问题

我在运行应用

时收到几条错误消息

localhost/:1 Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

localhost/:1 Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

localhost/:1 Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Merriweather:400,700&display=swap' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

localhost/:1 Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Merriweather:400,700&display=swap' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

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

localhost/:1 Refused to load the script 'https://js.stripe.com/v3' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

我不了解元标记中的 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

前段时间我也遇到过这个问题。然后我检查了 https://content-security-policy.com/examples/express-js/ 并在响应 object 中添加了 CSP headers。效果很好

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

Answer 2

Also i have helmet.js module installed on my app, is just configured as this

app.use(helmet());

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

您可以禁用头盔中间件：

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

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

或者您可以在 helmet.contentSecurityPolicy(options).

中将被阻止的源添加到 Helmet CSP 设置中

拒绝在 node.js 应用程序中加载 stylesheet/script

Refused to load the stylesheet/script in node.js app

html

javascript

meta-tags

content-security-policy