Nonces still getting inserted even after I set nonceEnabled to false

[Sanjin-Pajic]

I'm creating a static app with CRA and even though I specify the nonceEnabled to be false in the config of this package, it still automatically inserts nonces.

I'm using styled-components and I need the style-src attribute to be unsafe-inline, but the automatically inserted nonce keeps overwriting it (if there is a nonce/hash, unsafe-inline will be ignored)

Is this a bug or am I misunderstanding the nonceEnabled and hashEnabled properties?

[melloware]

it sounds like you have it configured incorrectly? Just set 'style-src': ["'unsafe-inline'"],

// utilities
const { override } = require('customize-cra');

// plugins
const CspHtmlWebpackPlugin = require("@melloware/csp-webpack-plugin");

const cspConfigPolicy = {
    'default-src': "'none'",
    'object-src': "'none'",
    'base-uri': "'self'",
    'connect-src': "'self' blob: localhost:* *.microsoftonline.com",
    'worker-src': "'self' blob:",
    'img-src': "'self' blob: data: content:",
    'font-src': "'self'",
    'frame-src': "'self'",
    'manifest-src': "'self'",
    'style-src': ["'self'"],
    'script-src': ["'strict-dynamic'"],
    'require-trusted-types-for': ["'script'"]
};

// Enable CSP and SRI. See https://github.com/melloware/csp-webpack-plugin
const cspPlugin = new CspHtmlWebpackPlugin(cspConfigPolicy);

// cache busting string instead of random hash so all pods serve the same files
var currentDate = new Date();
var version = `${currentDate.getFullYear()}${currentDate.getMonth()+1}${currentDate.getDate()}`

// add all plugins to Webpack pipeline in correct order
function addPlugins(config, env) {
    if (env !== 'production') {
       return config;
    }

    // CSP plugin
    config.plugins.push(cspPlugin);
    config.output.crossOriginLoading = "anonymous";

    // Get rid of hash for js files
    config.output.filename = `static/js/[name]-${version}.js`
    config.output.chunkFilename = `static/js/[name]-${version}.chunk.js`

    // Get rid of hash for css files
    const miniCssExtractPlugin = config.plugins.find(element => element.constructor.name === "MiniCssExtractPlugin");
    miniCssExtractPlugin.options.filename = `static/css/[name]-${version}.css`
    miniCssExtractPlugin.options.chunkFilename = `static/css/[name]-${version}.css`
    return config;
}

module.exports = {
    webpack: override(addPlugins),
};

[Sanjin-Pajic]

@melloware I have copied your exact code into my config-overrides.js (just changed the style-src to unsafe-inline), and the nonces still get injected into index.html.

This is my config-overrides.js file:

`
// utilities
const { override } = require('customize-cra')

// plugins
const CspHtmlWebpackPlugin = require('@melloware/csp-webpack-plugin')

// Enable CSP and SRI. See https://github.com/melloware/csp-webpack-plugin
const cspPlugin = new CspHtmlWebpackPlugin(
{
'base-uri': "'self'",
'object-src': "'none'",
'script-src': ["'unsafe-inline'", "'self'", "'unsafe-eval'"],
'style-src': "'unsafe-inline'"
},
{
enabled: true,
integrityEnabled: true,
hashingMethod: 'sha384',
hashEnabled: {
'script-src': false,
'style-src': false
},
nonceEnabled: {
'script-src': false,
'style-src': false
}
}
)

// cache busting string instead of random hash so all pods serve the same files
var currentDate = new Date()
var version = ${currentDate.getFullYear()}${currentDate.getMonth() + 1}${currentDate.getDate()}

// add all plugins to Webpack pipeline in correct order
function addPlugins(config, env) {
if (env !== 'production') {
return config
}

// CSP plugin
config.plugins.push(cspPlugin)
config.output.crossOriginLoading = 'anonymous'

// Get rid of hash for js files
config.output.filename = `static/js/[name]-${version}.js`
config.output.chunkFilename = `static/js/[name]-${version}.chunk.js`

// Get rid of hash for css files
const miniCssExtractPlugin = config.plugins.find((element) => element.constructor.name === 'MiniCssExtractPlugin')
miniCssExtractPlugin.options.filename = `static/css/[name]-${version}.css`
miniCssExtractPlugin.options.chunkFilename = `static/css/[name]-${version}.css`
return config

}

module.exports = {
webpack: override(addPlugins)
}
`

This is injected into index.html after build:

<meta http-equiv="Content-Security-Policy" content="base-uri 'self'; object-src 'none'; script-src 'unsafe-inline' 'self' 'unsafe-eval'; style-src 'unsafe-inline' 'nonce-ADPGKRLO5KKthLMmqmHNQw=='" />

[melloware]

Hmmm can you try with the ogiinal CSP plugin? I don't think I have touched anything from the original plugin?

[NotAndOr]

Besides nonceEnabled: {'style-src': false}, it may be helpful to set primeReactEnabled: false, which is just another configuration option injects nonce for style-src by default.

[melloware]

Thanks @NotAndOr that is probably my fault when I added that option to this plug-in!