node.js - 内容安全策略问题 Node js react

Question

我正在使用 node js 开发一个 React 项目。我的 index.html 中有两个外部来源

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

除此之外，由于 CSP，我还有一个对服务器的发布请求，连接失败。 post请求失败是:

Refused to connect to 'localhost:3000/visitor' because it violates thefollowing Content Security Policy directive: "default-src 'self'".Note that 'connect-src' was not explicitly set, so 'default-src' isused as a fallback.

对于外部链接，我遇到了一些关于内容安全策略的错误，我在下面显示了其中一个错误。

Refused to load the script'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'because it violates the following Content Security Policy directive:"script-src 'self'". Note that 'script-src-elem' was not explicitlyset, so 'script-src' is used as a fallback.

我做了两种策略，但都没有解决我的问题:

1. 绕过元数据:

在 index.html 中的所有脚本标签之上，基本上已经打开以通过脚本标签加载任何类型的外部文件，但我仍然在浏览器中遇到相同的错误，并且此类 js 文件不会加载到我的应用程序中

1. 在我的 Node js 中，我使用 Helm 模块如下:

app.use(helmet({

  contentSecurityPolicy: false,

}));

我应该怎么做才能解决此应用程序无法正常工作的问题？

Answer 1

I did two strategies and none of the resolved my problem: 1- meta databy pass :

<meta http-equiv="Content-Security-Policy" content="...">

内容安全策略可以通过两种方式传递:HTTP header 和 <meta> .您通过 HTTP header 有一个限制性 CSP，并通过 <meta> 添加了第二个. 2 CSP 作为 2 个后续过滤器工作，只允许通过两者的源。因此 <meta>不允许对 header 的 CSP 进行任何附加操作。而不是 <meta>您需要将源添加到第一个 CSP，类似这样:

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"], 
        scriptSrc: ["'self'", "'unsafe-inline'",  'https://ajax.googleapis.com', 'https://stackpath.bootstrapcdn.com'],
        styleSrc: ["'self'"],
        imgSrc: ["*", 'data:'],
        connectSrc: ["'self'"],
        frameSrc: ["'self'"],
      },
    }
  })
);

此解决方法将有助于解决第二个错误消息。

2- In my node js I used helmet module as the below :

app.use(helmet({
  contentSecurityPolicy: false,
}));

这完全关闭了 CSP header ，因此有助于避免 Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' ...错误。

但是第一个报错Refused to connect to 'localhost:3000/visitor' because it violates the following Content Security Policy directive: "default-src 'self'"仍然存在。
发生这种情况是因为您在服务器上没有 localhost:3000/visitor 的路由URL，因此您会收到 404 Not found 错误。

NodeJS finalhandler提供错误页面，有自己的 CSP default-src 'self'为了安全起见，您会观察到 CSP 中的错误，而不是您管理的错误。
为/visitor建立正确的静态路由URL，此错误消失。