How to flush CSS Inline to CSP?

Question

In my project I have some scripts (javascript), images (webp) and inline HTML styles.

What I would like to do in CSP is the following:

For all scripts, styles and images I would like to only accept the one from my domain (localhost or when in production on HTTPS).

But I'm getting the following error in the browser console:

My code in Webpack for CSP is as follows:

const HtmlCSPWebpackPlugin = require("csp-html-webpack-plugin");
new HtmlCSPWebpackPlugin(
            {
                "default-src": "'self'",
                "base-uri": "'self'",
                "connect-src": "*",
                "font-src": "*",
                "frame-src": "'none'",
                "img-src": "*",
                "manifest-src": "*",
                "media-src": "'none'",
                "object-src": "'none'",
                "script-src": ["'unsafe-inline'", "'self'", "'unsafe-eval'"],
                "style-src": ["'unsafe-inline'", "'self'", "'unsafe-eval'"],
            },
            {
                enabled: true,
                hashingMethod: "sha256",
                hashEnabled: {
                    "script-src": true,
                    "style-src": true,
                },
                nonceEnabled: {
                    "script-src": true,
                    "style-src": true,
                },
            }
        ),

Answer 1

The style-src directive in your CSP and the error message are different, which means there are likely multiple CSPs present. Check response headers and meta tags. If there is no reason to keep multiple CSPs, remove one and modify the other.

To allow the blocked content you'll either have to make the nonce work for your inline styles, rewrite/replace the inline styles, or use 'unsafe-inline', which will work if you remove the nonce in the CSP in the error message.