Express JS无法为根URL设置CSP Headers问题求助

当请求根URL（/）时，express.static中间件会优先匹配到build目录下的index.html并直接返回响应，此时后续的自定义头中间件和*路由都不会被执行，导致CSP等头无法设置。而其他相对URL（如/static/js/main.xxx.js）会经过后续中间件，所以头能正常设置。

方案1：调整中间件顺序，将头相关中间件移到express.static之前 #

把安全相关中间件和自定义头逻辑移到静态文件服务注册之前，确保所有请求（包括根URL的静态文件请求）都先经过这些中间件设置头。

修改后的代码示例：

let express = require('express');
let path = require('path');
let app = express();
let sql = require('mssql');
let router = express.Router();
const fs = require('fs');
let axios = require('axios')
const https = require("https");
require('dotenv').config()
const compression = require('compression');
const helmet = require('helmet')

let PORT = 80;
let buildPath = path.join(__dirname, 'build');
console.log(__dirname)

// 先配置安全相关中间件和头
app.use(compression());
app.use(helmet())
app.use(helmet.hidePoweredBy())
app.disable("x-powered-by")

app.use(function (req, res, next) {
    res.set({
      'Content-Security-Policy':"default-src 'self'; font-src 'self'; img-src 'self'; script-src 'self'; style-src 'self'; frame-src https://www.youtube.com/; object-src 'self'; frame-ancestors 'https://www.youtube.com/'; connect-src 'self';",
      'Strict-Transport-Security':"max-age=31536000",
      'X-Content-Type-Options': "nosniff"
    });
    next();
});

// 再注册静态文件服务和其他中间件
app.use(express.json());
app.use(express.static(buildPath));
app.use(router);

app.get('*', function (req, res) {
    console.log("HIT * ROUTE")
    app.disable("x-powered-by")
    res.set({
        'Content-Security-Policy':"default-src 'self'; font-src 'self'; img-src 'self'; script-src 'self'; style-src 'self'; frame-src https://www.youtube.com/; object-src 'self'; frame-ancestors 'https://www.youtube.com/'; connect-src 'self';",
        'Strict-Transport-Security':"max-age=31536000",
        'X-Content-Type-Options': "nosniff"
    })
    .sendFile(path.join(__dirname,'/build/index.html'));
});

方案2：给express.static配置setHeaders选项 #

如果不想调整中间件顺序，可以直接在静态文件服务中设置头，确保根URL的index.html响应带上CSP：

app.use(express.static(buildPath, {
  setHeaders: (res, path) => {
    // 针对HTML文件设置安全头
    if (path.endsWith('.html')) {
      res.set({
        'Content-Security-Policy':"default-src 'self'; font-src 'self'; img-src 'self'; script-src 'self'; style-src 'self'; frame-src https://www.youtube.com/; object-src 'self'; frame-ancestors 'https://www.youtube.com/'; connect-src 'self';",
        'Strict-Transport-Security':"max-age=31536000",
        'X-Content-Type-Options': "nosniff"
      });
    }
  }
}));

额外优化：用Helmet直接配置CSP #

Helmet本身支持CSP配置，无需手动调用res.set，可以避免重复设置和潜在冲突：

app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      fontSrc: ["'self'"],
      imgSrc: ["'self'"],
      scriptSrc: ["'self'"],
      styleSrc: ["'self'"],
      frameSrc: ["https://www.youtube.com/"],
      objectSrc: ["'self'"],
      frameAncestors: ["https://www.youtube.com/"],
      connectSrc: ["'self'"]
    }
  },
  strictTransportSecurity: {
    maxAge: 31536000
  },
  xContentTypeOptions: true
}));

内容的提问来源于stack exchange，提问作者Elijah Palmer