Question

i need to set CSP in my vue 3 project. I tried to set below line in index.html from public folder and in head section

<meta http-equiv="Content-Security-Policy" content="default-src  self ; script-src  self ; style-src  self  fonts.googleapis.com; font-src  self  fonts.gstatic.com; img-src  self  data:; frame-src  self ;connect-src *;"/>

But when i run project it throws error because auto generated js and css files need to set by nonce or hash.. I don t know how to use nonce in vue3 app. (Note = i have api in dot net core 6 and this frontend and backend both will be hosted on windows server)

Answer 1

After few days of struggling i managed to set csp by below 2 packages.

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

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

And i changed vue.config.js file as below:

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
                   }
                }
             }
          ]
      }
    ]
  }

  },
};

友情链接