Node.js配置的Content Security Policy未生效于根HTML页面，如何处理？

先检查中间件顺序 #

Express中间件是按加载顺序执行的，如果你的根路由处理逻辑放在CSP中间件前面，根页面的响应根本不会经过CSP中间件，自然带不上头。

错误示例：

// 先写根路由
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

// 后加CSP中间件
app.use(function(req, res, next) {
  res.setHeader("Content-Security-Policy", "default-src 'self'; font-src 'self'; img-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; frame-src 'self'; connect-src 'self' ");
  return next();
});

正确姿势：把CSP中间件放在所有路由和静态文件托管之前：

// 先加载CSP中间件
app.use(function(req, res, next) {
  res.setHeader("Content-Security-Policy", "default-src 'self'; font-src 'self'; img-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; frame-src 'self'; connect-src 'self' ");
  return next();
});

// 再写根路由
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

验证响应头是否存在 #

打开浏览器F12，切换到「网络」标签，刷新页面后找到根路径（/）的请求，查看「响应头」里有没有Content-Security-Policy字段。如果没有，说明中间件没被执行到，检查是不是有其他逻辑提前返回了响应（比如调用了res.send却没走next()）。

静态文件托管的情况 #

如果根HTML是用express.static托管的，同样要把CSP中间件放在express.static前面：

app.use(function(req, res, next) {
  res.setHeader("Content-Security-Policy", "default-src 'self'; font-src 'self'; img-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; frame-src 'self'; connect-src 'self' ");
  return next();
});

// 托管静态文件目录
app.use(express.static('public'));

这样所有静态文件的响应都会带上CSP头，包括根页面。

直接在根路由里硬设CSP #

要是上面的方法都不生效，直接在根路由的处理函数里单独设置CSP头，最稳妥：

app.get('/', (req, res) => {
  res.setHeader("Content-Security-Policy", "default-src 'self'; font-src 'self'; img-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; frame-src 'self'; connect-src 'self' ");
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

内容的提问来源于stack exchange，提问作者Mrunall Veer