Vue.js/Node.js添加Content-Security-Policy响应头的方法求助

你用<meta>标签设置的CSP属于文档级安全策略，它不会出现在HTTP响应头中（所以F12响应头面板看不到），而且部分CSP指令无法通过meta标签生效，优先级也低于HTTP响应头的CSP设置。

以下是添加CSP到HTTP响应头的最佳方式，分场景说明：

1. Vue开发环境（Vue CLI） #

如果是Vue CLI搭建的项目，修改vue.config.js配置devServer来添加响应头：

// vue.config.js
module.exports = {
  devServer: {
    headers: {
      'Content-Security-Policy': "default-src 'self' http://localhost:8080; img-src https://* http://localhost:8080 ; child-src 'none';"
    }
  }
}

修改后重启开发服务器，就能在F12的响应头中看到CSP了。

2. Node.js生产环境 #

如果Vue项目打包后部署在Node.js服务（如Express/Koa）上，直接在后端服务中全局或路由级设置响应头：

Express示例 #

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

// 全局设置CSP响应头
app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self' http://localhost:8080; img-src https://* http://localhost:8080 ; child-src 'none';"
  );
  next();
});

// 托管Vue打包后的静态文件
app.use(express.static('dist'));

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

Koa示例 #

const Koa = require('koa');
const serve = require('koa-static');
const app = new Koa();

// 全局设置CSP响应头
app.use(async (ctx, next) => {
  ctx.set(
    'Content-Security-Policy',
    "default-src 'self' http://localhost:8080; img-src https://* http://localhost:8080 ; child-src 'none';"
  );
  await next();
});

// 托管Vue静态资源
app.use(serve('dist'));

app.listen(3000);

额外提示 #

• 生产环境优先用HTTP响应头方式设置CSP，兼容性和功能完整性更好
• 若需要不同路由使用不同CSP策略，可在对应路由的处理函数中单独设置响应头

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