内容安全策略问题节点 js 反应答案

【问题标题】：Content Security Policy issue node js react内容安全策略问题节点 js 反应
【发布时间】：2021-03-17 06:11:52
【问题描述】：

我正在用 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 the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

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

拒绝加载脚本“https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”，因为它违反了以下内容安全策略指令：“script-src”自己'”。请注意，'script-src-elem' 没有显式设置，因此 'script-src' 用作备用。

我做了两种策略，但都没有解决我的问题： 1- 元数据通过：

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; frame-src *;">

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

2- 在我的节点 js 中，我使用了头盔模块，如下所示：

app.use(helmet({

  contentSecurityPolicy: false,

}));

我应该怎么做才能解决这个让应用程序无法正常工作的愚蠢问题？谢谢

【问题讨论】：

标签： node.js reactjs content-security-policy

【解决方案1】：

我做了两种策略，但都没有解决我的问题：1- 元数据路过：
<meta http-equiv="Content-Security-Policy" content="...">

内容安全策略可以通过 2 种方式传递：HTTP 标头和<meta>。您有一个通过 HTTP 标头的限制性 CSP，并通过 <meta> 添加了第二个。 2 个 CSP 作为 2 个后续过滤器工作，只允许通过两个过滤器。因此，<meta> 不允许除了标头的 CSP 之外的任何内容。您需要向第一个 CSP 添加源，而不是 <meta>，如下所示：

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- 在我的节点 js 中，我使用了头盔模块，如下所示：
app.use(helmet({
  contentSecurityPolicy: false,
}));

这完全关闭了 CSP 标头，因此有助于避免 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 建立正确的静态路由，这个错误就消失了。

【讨论】：