将 csp-html-webpack-plugin 添加到 vue-cli 项目

Question

我有一个使用 vue-cli 的 Vue2 项目

4.5.9

。我正在尝试将

csp-html-webpack-plugin

添加到

vue.config.js

，以便它可以自动生成 JS 文件的哈希值并将它们插入到 index.html 文件中。

我查看了一些文档并尝试了以下方法但没有成功：

1. 将插件添加到

configureWebpack

对象：

configureWebpack: {
  ...
  new CspHtmlWebpackPlugin({
    'script-src': '',
    'style-src': ''
  })
}

2. 将插件添加到

configureWebpack

对象并将选项传递给 HTML 插件：

chainWebpack: (config) => {
  config.plugin('html').tap((args) => {
    args[0].cspPlugin = {
      policy: {
          'script-src': '',
          'style-src': '',
        },
    };
    
    return args;
  });
},
...

configureWebpack: {
  ...
  new CspHtmlWebpackPlugin()
}

3. 将插件和新的 HTML 插件添加到

configureWebpack

对象：

configureWebpack: {
  ...
  new HtmlWebpackPlugin(),
  new CspHtmlWebpackPlugin({
    'script-src': '',
    'style-src': ''
  })
}

Number 3 可以输出带有弹跳值和哈希值的元标记，但是新的 HTML 插件会覆盖 vue-cli 设置，这显然是我不想做的。

之前有人成功将这个插件添加到 vue-cli 项目吗？

是否有更好的方法或其他方法在 vue-cli 项目中向 CSP 添加哈希/随机数？

提前致谢

Answer 1

如果您要使用选项 3，那么您可以获得默认配置，如下所示：

• 全局安装 vue/cli

  npm i @vue/cli -g

• 运行命令

  vue inspect --plugin html --verbose

第二个命令将输出插件的默认配置。