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

【问题标题】：Content Security Policy issues with new form新表单的内容安全策略问题
【发布时间】：2021-06-26 22:50:13
【问题描述】：

为我正在使用的新表单设置内容安全策略的最简单方法是什么？我有一个用于注册的前端到后端表单，但这个表单要复杂得多，并且会向我抛出以下错误。我知道这与 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();
});

【问题讨论】：

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

【解决方案1】：

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

注意状态码404 Not Found。如果您不处理此类错误，nodeJS 默认使用自己的finalhandler 来执行这些错误。
这个finalhandler 的最新版本发布了 CSP default-src 'none'; 所有的细节都是here。

看起来您没有在服务器配置中提供到根 / 文件夹的路由，因此找不到 /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 Not Found”的问题，对于其他“不存在”的 Url，您也需要添加路由。

【讨论】：

干杯，对于静态 url 地址，我是否将其定向到后端 server.js 文件中的位置？
是的，如果你没有重新定义它，启动应用程序的默认文件名应该是server.js。至少简单地看一下Routing in Express 和Custom static routing Express。也许你会找到一个更好的例子来做路由。