如何在vue-cli 4.5.9的Vue2项目中正确配置csp-html-webpack-plugin

版本适配前提 #

vue-cli 4.5.9 内置的 html-webpack-plugin 版本为 4.x，需安装对应兼容的 csp-html-webpack-plugin 3.x 版本，避免版本不兼容导致失效：

npm install csp-html-webpack-plugin@3 -D

完整vue.config.js配置 #

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

module.exports = {
  // 你的其他原有vue.config.js配置，比如publicPath、outputDir等
  chainWebpack: config => {
    // 新增CSP插件，关联vue-cli内置的html插件实例，不覆盖原有配置
    config.plugin('csp-html')
      .use(CspHtmlWebpackPlugin)
      // 确保CSP插件在内置html插件执行完成后再处理内容
      .after('html')
      .tap(() => [
        // 第一参数：CSP策略配置
        {
          'script-src': ["'self'"],
          // 若项目存在vue内联样式、public/index.html内联style，可根据实际情况调整
          'style-src': ["'self'", "'unsafe-inline'"],
          'object-src': ["'none'"]
        },
        // 第二参数：插件运行配置
        {
          enabled: process.env.NODE_ENV === 'production', // 仅生产环境开启可根据需求调整
          hashingMethod: 'sha256',
          // 关键配置：指定处理vue-cli内置的名称为html的html插件实例
          htmlPluginInstanceName: 'html'
        }
      ])
  }
}

配置核心说明 #

• 不需要手动新实例化HtmlWebpackPlugin，直接关联vue-cli内置的实例，不会覆盖原有html相关配置（比如模板路径、注入逻辑等）
• 通过after('html')指定插件执行顺序，确保CSP插件可以拿到html插件生成的完整内容，计算对应JS/CSS的哈希值
• 生成的CSP规则会自动以meta标签的形式注入到index.html的head中，包含所有构建生成的JS文件的哈希值

常见问题处理 #

• 如果public/index.html中有自定义的内联script，需要手动将该内联脚本的哈希添加到script-src规则中，或配置插件开启nonce模式适配内联脚本
• 若要移除style-src的'unsafe-inline'，需要额外配置处理vue构建生成的内联样式哈希，或使用CSS提取插件将所有样式抽离为单独的CSS文件

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