Express.js 4.17.1无法添加X-Frame-Options等响应头问题求助

问题根因 #

1. Content-Security-Policy响应头的字符串拼接存在语法错误，JavaScript不支持直接并列多个字符串字面量进行拼接，缺少拼接运算符会导致中间件执行抛出异常，后续的头部配置无法生效。
2. 如果服务前配置了反向代理（如Nginx、CDN），可能会默认过滤部分安全响应头，需要同步检查代理层的配置规则。

解决方案 #

首先修复CSP头的语法错误，推荐使用ES6模板字符串实现多行拼接，避免手写拼接出现语法问题：

const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();

if (process.env.NODE_ENV !== "development") {
  app.use(function(req, res, next) {
    res.setHeader('Strict-Transport-Security', 'max-age=63072000; includeSubDomains; preload');
    next();
  });
}

app.use(function(req, res, next) {
  res.setHeader('X-Frame-Options', 'DENY');
  // 改用模板字符串拼接，避免语法错误
  res.setHeader('Content-Security-Policy', `
    frame-src 'none';
    object-src 'none';
    script-src 'self';
    style-src 'self';
  `.replace(/\s+/g, ' ').trim()); // 去除多余空白符避免头部格式错误
  next();
});

// 静态资源中间件放在头部设置中间件之后，确保静态资源响应也能带上自定义头
app.use('/dist', express.static(path.join(__dirname, 'dist')));

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'dist/index.html'));
});

app.listen(port);

如果需要更便捷的安全头部管理，也可以直接使用Express生态中成熟的helmet中间件，一键配置所有常见安全响应头，避免手写配置出现格式错误。

验证方式 #

修改完成后重启服务，使用curl命令直接请求服务端口验证响应头，避免浏览器缓存或反向代理的干扰：

curl -I http://localhost:8080

正常返回结果中会包含X-Frame-Options: DENY和Content-Security-Policy对应的头信息。

内容的提问来源于stack exchange，提问作者C-RAD