如何在VUE项目中添加CSP

在Vue项目中添加CSP可以通过在HTTP响应头中添加Content-Security-Policy标头来实现。以下是一个基本的CSP头示例：

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

app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy', "default-src 'self'");
  next();
});

// ...

这个示例中的指令告诉浏览器只允许从同一域名加载资源，而不允许从其他域名加载。您可以根据需要添加其他策略指令，例如：

res.setHeader('Content-Security-Policy', "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:");

这个示例中的指令允许加载内联脚本和样式表，并指定了允许加载的图像资源。建议您根据您的安全需求进行配置。

如果您的Vue项目使用Webpack，您可以使用`csp-html-webpack-plugin`插件自动生成CSP标头。安装插件：

npm install csp-html-webpack-plugin --save-dev

然后在webpack配置文件中添加以下代码：

const CspHtmlWebpackPlugin = require('csp-html-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CspHtmlWebpackPlugin({
      'default-src': "'self'",
      'script-src': ["'self'", "'unsafe-inline'"],
      'style-src': ["'self'", "'unsafe-inline'"],
      'img-src': ["'self'", "data:"],
      'font-src': ["'self'"],
      'media-src': ["'self'"],
      'frame-src': ["'none'"]
    }, {
      enabled: true,
      hashingMethod: 'sha256',
      hashEnabled: {
        'script-src': true,
        'style-src': true
      },
      nonceEnabled: {
        'script-src': true,
        'style-src': true
      }
    })
  ]
};

这个示例中的插件配置指定了一组CSP指令，然后将这些指令自动注入到生成的HTML文件中。这将确保您的Vue应用程序在浏览器中具有正确的CSP策略。