Express服务器配置的Content-Security-Policy未在响应头显示如何解决

常见原因 #

• 代码运行报错，默认错误响应未携带自定义头：你贴的代码中使用了path.join但未引入path模块，运行时会抛出path is not defined错误，Express默认返回的错误页不会继承你设置的CSP头
• 中间件注册顺序错误：如果CSP中间件注册在express.static、其他路由处理器这类会直接结束响应的逻辑之后，对应的请求不会触发CSP头设置
• 缓存导致的304响应缺失头：浏览器命中协商缓存返回304时，通常只会返回必要的缓存相关头，不会携带完整的自定义响应头
• 反向代理/CDN过滤头：Nginx、CDN等中间层如果配置了头过滤规则，会直接删除CSP响应头
• 后续逻辑覆盖头：其他中间件或路由中调用了res.removeHeader('Content-Security-Policy')或者重复设置同名字段覆盖了配置
• 预检OPTIONS请求：跨域请求的预检OPTIONS响应不需要携带CSP头，属于正常情况

排查步骤 #

• 先查看服务端运行日志，确认是否有运行时报错，优先解决path模块未引入这类基础错误
• 跳过浏览器直接用curl命令请求服务接口，验证响应头是否存在，排除浏览器缓存、扩展拦截的干扰，示例命令：curl -I http://你的服务地址
• 确认当前请求的方法：如果是OPTIONS预检请求，无CSP头属于正常情况，看实际业务请求的头即可
• 检查中间件注册顺序，确认CSP中间件是所有app.use中最靠前的，位于静态资源中间件、路由注册之前
• 暂时关闭反向代理、CDN等中间层，直接请求Node服务端口，排查是否是中间层过滤了头
• 全局检索代码，确认没有其他地方修改、删除Content-Security-Policy头

修复方案 #

1. 补全缺失的模块引入，在代码顶部添加const path = require('path');，确保服务端能正常返回响应
2. 调整中间件注册顺序，将CSP头设置的中间件放在所有其他中间件和路由之前，示例调整后的正确代码：

const express = require('express');
const path = require('path'); // 补全引入
const app = express();

// CSP中间件放在最前面
app.use((req, res, next) => {
    res.setHeader(
        'Content-Security-Policy',
        "default-src 'self'; font-src 'self'; img-src 'self'; script-src 'self'; style-src 'self'; frame-src 'self'; upgrade-insecure-requests;"
    );
    next();
});

// 其他中间件、路由放在CSP中间件之后
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'server/static/index.html'));
});

app.listen(3000);

3. 如果使用反向代理/CDN，修改配置放行Content-Security-Policy头，不要配置过滤该字段的规则
4. 也可以直接使用成熟的安全中间件helmet配置CSP，避免手动设置出现的拼写、顺序错误：

// 先安装依赖：npm install helmet
const helmet = require('helmet');
app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    fontSrc: ["'self'"],
    imgSrc: ["'self'"],
    scriptSrc: ["'self'"],
    styleSrc: ["'self'"],
    frameSrc: ["'self'"],
    upgradeInsecureRequests: []
  }
}));

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