如何在Node.js中添加内容安全策略并设置相关响应头？

在Node.js中，内容安全策略（CSP）是通过在服务端设置HTTP响应头来实现的，这和Angular中通过客户端配置或拦截器的方式不同——服务端设置的头更底层、更不易被绕过，能覆盖所有请求的响应。以下是不同场景下的具体实现方式：

1. 原生Node.js HTTP模块实现 #

如果直接使用Node.js内置的http模块，只需在创建服务器时，为每个响应添加Content-Security-Policy头即可：

const http = require('http');

const server = http.createServer((req, res) => {
  // 配置CSP规则：允许默认资源从自身域名加载，脚本允许自身和指定CDN，样式允许自身和内联样式
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self'; script-src 'self' https://trusted-cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"
  );

  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end('<html><body><script src="https://trusted-cdn.com/app.js"></script></body></html>');
});

server.listen(3000, () => {
  console.log('服务器运行在端口3000');
});

2. Express框架实现 #

大多数Node.js项目会用Express，这里有两种常用方式：全局设置（所有路由生效）或单个路由设置：

全局CSP中间件（推荐） #

通过中间件为所有请求的响应添加CSP头：

const express = require('express');
const app = express();

// 全局CSP中间件
app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; font-src 'self';"
  );
  next(); // 传递请求到下一个中间件/路由
});

// 示例路由
app.get('/', (req, res) => {
  res.send('<html><body><style>body { background: #eee; }</style></body></html>');
});

app.listen(3000, () => {
  console.log('Express服务器运行在端口3000');
});

单个路由设置 #

如果只需为特定路由添加CSP头，直接在路由处理函数中设置：

app.get('/admin', (req, res) => {
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'none';"
  );
  res.send('<html><body><h1>Admin Page</h1></body></html>');
});

3. 常用CSP模式 #

• 强制模式：使用Content-Security-Policy头，浏览器会严格执行规则，拦截违规资源加载。
• 报告模式：使用Content-Security-Policy-Report-Only头，浏览器只会记录违规行为，不会拦截资源，适合测试阶段：

  res.setHeader(
    'Content-Security-Policy-Report-Only',
    "default-src 'self'; report-uri /csp-report;"
  );
  
  // 添加接收报告的路由
  app.post('/csp-report', express.json(), (req, res) => {
    console.log('CSP违规报告:', req.body);
    res.status(204).send(); // 返回空响应
  });
  

关键CSP指令说明 #

• default-src：所有资源的默认加载规则，未指定的资源类型会继承此规则。
• script-src：控制JavaScript脚本的允许来源。
• style-src：控制CSS样式的允许来源。
• img-src：控制图片、图标等资源的允许来源。
• 'self'：允许当前域名的资源。
• 'unsafe-inline'：允许内联脚本/样式（仅在必要时使用，尽量避免）。

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