如何在 vue 3 组合 API 中为 primevue 添加内容安全策略（csp）

Question

当我将 csp 设置到我的 vue 项目时，由于 primevue 生成的样式标签，它将破坏 csp。

我已经在csp中添加了哈希，但不知道如何在primevue自动生成的样式中添加哈希。

Answer 1

经过几天的努力，我设法将 csp 设置为低于 2 个包。

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

npm install --save mini-css-extract-plugin

我更改了 vue.config.js 文件，如下所示：

const webpack = require('webpack');
const path = require('path');
const crypto = require('crypto');
const emotionalNonce = crypto.randomBytes(16).toString('base64');
const emotionalNonce1 = crypto.randomBytes(16).toString('base64');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CspHtmlWebpackPlugin = require('csp-html-webpack-plugin');
module.exports = {
  publicPath: process.env.VUE_APP_BASE_URL,
  configureWebpack: {
    devServer: {
      hot: false
  },
    devtool: 'source-map',
    plugins: [
      new webpack.DefinePlugin({
        'process.env.EMOTIONAL_NONCE': JSON.stringify(emotionalNonce),
      }),
      new MiniCssExtractPlugin({
          filename: path.resolve(__dirname, '../dist/css/[name].[hash:8].css'),
          chunkFilename: "[name].[hash:8].css",
          attributes: {
            nonce: emotionalNonce,
          }
      }),
          new CspHtmlWebpackPlugin({
            'base-uri': "'self'",
            'object-src': "'none'",
            'script-src': ["'self'",`'nonce-${emotionalNonce1}'`],
            'style-src': [ "'self'","fonts.googleapis.com",`'nonce-${emotionalNonce}'`]
          }, {
            enabled: true,
            hashingMethod: 'sha256',
            hashEnabled: {
              'script-src': true,
              'style-src': true
            },
            nonceEnabled: {
              'script-src': true,
              'style-src': true
            },
          })
  ],
  module: {
      rules: [
        {
          test: /\.s(c|a)ss$/,
          use: [
              MiniCssExtractPlugin.loader,
              {
                  loader: 'css-loader',
                  options: {
                      sourceMap: true,
                  }
              },
              {
                loader: 'sass-loader',
                options: {
                   implementation: require('sass'),
                   sassOptions: {
                      indentedSyntax: false // optional
                   }
                }
             }
          ]
      }
    ]
  }

  },
};

Answer 2

现在prime vue通过nonce提供内容安全策略的支持..请参阅下图：

现在只需要在config中添加以下代码即可正常工作：

app.use(PrimeVue, {
    csp: {
        nonce: '...'
    }
});