新表单的内容安全策略问题

IT技术 node.js reactjs content-security-policy
2022-07-23 01:52:31

为我正在使用的新表单设置内容安全策略的最简单方法是什么?我有一个用于注册的前端到后端表单,但此表单要复杂得多,并且会向我抛出以下错误。我知道这与 webpack 有关,并且我尝试将代码插入到我的 publ;ic index.html 文件中,该文件刚刚停止了页面的呈现。

在此处输入图像描述

在此处输入图像描述

这与我在后端的 CORS 设置有什么关系吗?我有下面的代码引用了标题,并且我收到了关于以其他形式设置标题的错误消息,我遇到了同样的问题。

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header(
        'Access-Control-Allow-headers',
        'Origin, X-Requested-With, Content-Type, Accept',
    );
    next();
});
1个回答

所描述的错误与您在后端的 CORS 设置无关。它们与 CSP(Content-Security-Policy)标头有关,您似乎不会使用它。但是对于不存在的页面,节点 JS 会自行发布 CSP 标头。

注意状态码404 Not Found如果您不处理此类错误,nodeJS 默认使用 ownfinalhandler来执行这些错误。这个发布 CSP的
最新版本的所有细节都在这里finalhandlerdefault-src 'none';

看起来您没有/在服务器配置中提供到根文件夹的路由,因此/favicon.ico找不到类似的 url ->finalhandler发布default-src 'none';-> 您在浏览器控制台中观察到 CSP 违规(以及 404 not found 消息)。

您必须添加server.js类似的内容:

app.use(express.static('client/public'));
app.get("/favicon.ico", (req, res) => {
  res.sendFile(path.resolve(__dirname, "/favicon.ico"));
});

以上将解决“/favicon.ico未找到”的问题,对于其他“不存在”的 URL,您也需要添加路由。