I am using fontawesome in in my project and I am trying to add them to the project via webpack.

I have addad import '@fortawesome/fontawesome-free/js/fontawesome.js' into my app.js and have added @import '@fortawesome/fontawesome-free/scss/fontawesome'; to my main.css file.

However, when I am loading my app in the borwser, I am getting the following CSP violation error.

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-ixVUGs3ai0rMA0pgIVBN0KVlYbQip7/5SGmnUwJPNqE='), or a nonce ('nonce-...') is required to enable inline execution.

The error points to the following section of code that is coming from fontawesome.js

function insertCss(css) {
    if (!css || !IS_DOM) {
      return;
    }

    var style = DOCUMENT.createElement('style');
    style.setAttribute('type', 'text/css');
    style.innerHTML = css;
    var headChildren = DOCUMENT.head.childNodes;
    var beforeChild = null;

    for (var i = headChildren.length - 1; i > -1; i--) {
      var child = headChildren[i];
      var tagName = (child.tagName || '').toUpperCase();

      if (['STYLE', 'LINK'].indexOf(tagName) > -1) {
        beforeChild = child;
      }
    }

    DOCUMENT.head.insertBefore(style, beforeChild);
    return css;
  }

Any idea on how to get this solved without adding unsafe-inline or hardcoded hash in the CSP?

Following is my webpack.config

    const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
    context: __dirname    '/src',
    resolve: {
        extensions: ['.js']
    },
    entry: {
        app: './js/app.js',
        'app.min': './js/app.js'
    },
    output: {
        path: __dirname   '/../dist/bank',
        filename: './js/[name].js',
        publicPath: ''
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                include: /\.min\.js$/
            }),
            new CssMinimizerPlugin({
                include: /\.min\.css$/
            })
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: './css/[name].css',
        }),
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,  // Process css files
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
            },
            {
                test: /\.(png|jp(e*)g|eot|svg|ttf|woff|woff2)$/,  // Process image files
                use: [{
                    loader: 'url-loader',
                    options: {
                        esModule: false
                    }
                }]
            },
            {
                test: /\.(html)$/, // Process html files
                use: [{
                    loader: 'html-loader',
                    options: {
                        minimize: true
                    }
                }]
            }
        ]
    },
};

CodePudding user response：

According to Webpack's documentation on Content Security Policies, you can do this by setting __webpack_nonce__ in your entry script (not your configuration file).

CodePudding user response：

This issue was solved by removing the fontawesome js imports from the app.js. Apparently, only css files need to be imported and js files (i.e. fontawesome.js, regular.js and solid.js) are not required for the fonts to work.

By removing the js files, neither unsafe-inline, sha-XXX or nonce- is needed in the CSP.