Not getting hashes in meta tag

[RossAddinall]

Description

I am not seeing hashes in the meta tag when I expected I would. I do seem to get nonces, but they don't appear to work.

What type of issue is this? (place an x in one of the [ ])

• bug
• enhancement (feature request)
• question
• documentation related
• testing related
• discussion

Requirements (place an x in each of the [ ])

• I've read and understood the Contributing guidelines and have done my best effort to follow them.
• I've read and agree to the Code of Conduct.
• I've searched for any related issues and avoided creating a duplicate issue.

---

Bug Report

If I use this as my webpack configuration:

new HtmlWebpackPlugin( {
                filename: "../app/html/webpack_index.html",
                template: "app/html/index_template.html",
                chunks: [ "app" ],
                cspPlugin: {
                    enabled: true,
                    policy: {
                        "base-uri": "'self'",
                        "object-src": "'none'",
                        "script-src": [ "https://127.0.0.1:8080", "'self'" ],
                        "style-src": [ "https://127.0.0.1:8080", "'self'"],
                        "font-src": [ "'unsafe-inline'", "'unsafe-eval'", "https://127.0.0.1:8080", "'self'" ],
                    },
                    hashEnabled: {
                        "script-src": true,
                        "style-src": true,
                    },
                    nonceEnabled: {
                        "script-src": true,
                        "style-src": true,
                    },
                },
            } ),
            new HtmlWebpackPlugin( {
                filename: "../app/html/webpack_popup.html",
                template: "app/html/popup_template.html",
                chunks: [ "form" ],
            } ),
            new HtmlWebpackPlugin( {
                filename: "../app/html/webpack_codemirror.html",
                template: "app/html/codemirror_template.html",
                chunks: [ "editor" ],
            } ),
            new HtmlWebpackPlugin( {
                filename: "../app/html/webpack_error_wrapper.html",
                template: "app/html/error_wrapper_template.html",
                chunks: [ "error" ],
            } ),
            new HtmlWebpackPlugin( {
                filename: "../app/html/webpack_documentation.html",
                template: "app/html/documentation_template.html",
                chunks: [ "docs_entry" ],
            } ),
            new CspHtmlWebpackPlugin( {
                "base-uri": "'self'",
                "object-src": "'none'",
                "script-src": [ "'unsafe-inline'", "'unsafe-eval'", "https://127.0.0.1:8080", "'self'" ],
                "style-src": [ "'unsafe-inline'", "'unsafe-eval'", "https://127.0.0.1:8080", "'self'"],
                "font-src": [ "'unsafe-inline'", "'unsafe-eval'", "https://127.0.0.1:8080", "'self'" ],
            }, {
                enabled: true,
                hashingMethod: "sha256",
                hashEnabled: {
                    "script-src": true,
                    "style-src": true,
                },
                nonceEnabled: {
                    "script-src": false,
                    "style-src": false,
                },
            } ),

then it produces this output (for the app chunk):

<meta http-equiv="Content-Security-Policy" content="base-uri 'self'; object-src 'none'; script-src https://127.0.0.1:8080 'self' 'nonce-iy87WccFQS7zHW0XbzFJCw=='; style-src https://127.0.0.1:8080 'self' 'nonce-eqk3Sox+amk9wfdSl3g5GQ=='; font-src 'unsafe-inline' 'unsafe-eval' https://127.0.0.1:8080 'self'>

and I see this error:
<meta http-equiv="Content-Security-Policy" content="base-uri 'self'; object-src 'none'; script-src https://127.0.0.1:8080 'self' 'nonce-iy87WccFQS7zHW0XbzFJCw=='; style-src https://127.0.0.1:8080 'self' 'nonce-eqk3Sox+amk9wfdSl3g5GQ=='; font-src 'unsafe-inline' 'unsafe-eval' https://127.0.0.1:8080 'self'; connect-src 'unsafe-inline' 'unsafe-eval' https://127.0.0.1:8080 'self' https://ipv4.icanhazip.com wss://127.0.0.1:8080 https://api.keygen.sh">

which is coming from addStyles.js, part of the style-loader package.

If I now set the nonce enabled to be false, as below:

new HtmlWebpackPlugin( {
                filename: "../app/html/webpack_index.html",
                template: "app/html/index_template.html",
                chunks: [ "app" ],
                cspPlugin: {
                    enabled: true,
                    policy: {
                        "base-uri": "'self'",
                        "object-src": "'none'",
                        "script-src": [ "https://127.0.0.1:8080", "'self'" ],
                        "style-src": [ "https://127.0.0.1:8080", "'self'"],
                        "font-src": [ "'unsafe-inline'", "'unsafe-eval'", "https://127.0.0.1:8080", "'self'" ],
                    },
                    hashEnabled: {
                        "script-src": true,
                        "style-src": true,
                    },
                    nonceEnabled: {
                        "script-src": false,
                        "style-src": false,
                    },
                },
            } ),
            new HtmlWebpackPlugin( {
                filename: "../app/html/webpack_popup.html",
                template: "app/html/popup_template.html",
                chunks: [ "form" ],
            } ),
            new HtmlWebpackPlugin( {
                filename: "../app/html/webpack_codemirror.html",
                template: "app/html/codemirror_template.html",
                chunks: [ "editor" ],
            } ),
            new HtmlWebpackPlugin( {
                filename: "../app/html/webpack_error_wrapper.html",
                template: "app/html/error_wrapper_template.html",
                chunks: [ "error" ],
            } ),
            new HtmlWebpackPlugin( {
                filename: "../app/html/webpack_documentation.html",
                template: "app/html/documentation_template.html",
                chunks: [ "docs_entry" ],
            } ),
            new CspHtmlWebpackPlugin( {
                "base-uri": "'self'",
                "object-src": "'none'",
                "script-src": [ "'unsafe-inline'", "'unsafe-eval'", "https://127.0.0.1:8080", "'self'" ],
                "style-src": [ "'unsafe-inline'", "'unsafe-eval'", "https://127.0.0.1:8080", "'self'"],
                "font-src": [ "'unsafe-inline'", "'unsafe-eval'", "https://127.0.0.1:8080", "'self'" ],
            }, {
                enabled: true,
                hashingMethod: "sha256",
                hashEnabled: {
                    "script-src": true,
                    "style-src": true,
                },
                nonceEnabled: {
                    "script-src": false,
                    "style-src": false,
                },
            } ),

then it produces this output (for the app chunk):
<meta http-equiv="Content-Security-Policy" content="base-uri 'self'; object-src 'none'; script-src https://127.0.0.1:8080 'self'; style-src https://127.0.0.1:8080 'self'; font-src 'unsafe-inline' 'unsafe-eval' https://127.0.0.1:8080 'self'>

and I see this error:
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src https://127.0.0.1:8080 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

If I delete the nonceEnabled section in the app chunk settings then I get the same result as setting them to false.

So my questions are why am I not getting hashed generated and what do I need to do so that thye are generated and secondly, why is the nonce that is generated not working - how can I tell what the nonce relates to ?

Thanks for your help.

Reproducible in:

slackhq/csp-html-webpack-plugin version: 3.0.1

node version: 10.13

OS version(s): Windows 10

Steps to reproduce:

As its a question I have not tried to reproduce the issue in a cut down setup.

Expected result:

Expected to see hashes inserted into the meta tag

Actual result:

Nonces were inserted, but seemed to have no effect.

Attachments:

None

[duntonr]

We have the same question and are observing similar behavior, except in our case, we don't want the nonce included. Setting

               nonceEnabled: {
                    "script-src": false,
                    "style-src": false,
              }

or
nonceEnabled: false

seems to have no affect....the nonce is always included and the hash is never included (have not tested the validy of the nonce)

slackhq/csp-html-webpack-plugin version: 3.0.1
node: 11.9
webpack: 3.12
OS Version: Windows 10, 1809

[AnujRNair]

Hi @graar and @duntonr - thanks for the reports, and sorry for the delay!
Would you be able to share your template html file with me as well? Or even better, setup a minimal repo which shows the error? It would greatly help me debug this!
Thanks

[RossAddinall]

@AnujRNair

Here is the template html file at least:

`

<!--This is a Webpack template file consumed by webpack.config.js-->
<!--index_template.html -> webpack_index.html-->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--<meta http-equiv="Content-Security-Policy" content="-->
    <!--style-src-->
        <!--'NOT-USING-CSP-WEBPACK-PLUGIN'-->
        <!--https://127.0.0.1:8080-->
        <!--'unsafe-inline'-->
        <!--'self';-->
    <!--script-src-->
        <!--https://127.0.0.1:8080-->
        <!--'self';-->
    <!--font-src-->
        <!--https://127.0.0.1:8080-->
        <!--'self';-->
</head>


<body id='body'>
    <div id="root"></div>
</body>

`

You can see I have commented out a CSP meta tag. Under some circumstances, that I was unable to reproduce when I came to report the issue, the plugin did nothing and I just got the template CSP (hence those capitals, just to be clear where the CSP was coming from).

A demo repo may take a little lnger, but I'll try and get you one.

[AnujRNair]

The CSP plugin will only add sha-256 for JS which is inlined on your page (i.e. executed in a <script></script> block, not a <script src=''></script> external link.

In your template above, there are no inline script blocks.

However, it's possible you could inject script blocks into your template during webpack compile time - we do so by using html-webpack-inline-source-plugin to turn some external links into script blocks (like the webpack manifest). If this is done during webpack compile time, these blocks should also be correctly hashed.

If you're adding script blocks after webpack has output it's assets, these won't be included in the CSP policy, and will be blocked during runtime.

It's recommended that you disable this plugin when developing locally, especially if using webpack-dev-server / hot module replacement, as you'll be changing assets in memory, and their contents won't be rehashed each time.

If you're seeing something else from this, a minimal repo would be incredibly useful for me to debug this!

@duntonr hopefully this answers your question too, otherwise a minimal repo would be appreciate too :)

Thanks

[AnujRNair]

Hi @graar and @duntonr! Any thoughts on the message above? Does this align with what you're seeing?

[RossAddinall]

@AnujRNair - ahh, sorry, I thought I had replied.
Yes, that fits exactly and I need to go and check out the other plugin. Currently, I've been tied up with other things. I'll try and look at this over the weekend and let you know.
Many thanks for your help.

[AnujRNair]

I'm going to close this for now, since I believe this to be answered, but if you need any more clarification, please let me know and I will reopen this issue
Thanks!

[RossAddinall]

@AnujRNair, yes, thanks very much that's fair. I'll report back on the progress I make with the other plugin.

[brymon68]

Im having this issue as well. Unfortunately, I dont have a minimal repo but addStyles is getting borked as original poster stated. Also, only using this plugin in production does not alleviate the issues in production.

[AnujRNair]

My guess here is that the add style calls are being eval'ed, or your policy is too strict - without a repo it's hard to tell exactly whats happening here :(

[RossAddinall]

@AnujRNair just a quick follow-up. I have now tested this plugin with the script added inline as you stated and it worked exactly as expected, so nothing for you to do there.

For the benefit of those that follow along after me:

With regard to the other plugin that you mentioned, html-webpack-inline-source-plugin, I gave it a try, but ran into this issue. I did spend some time looking into that, but had to move on.

I also looked into using a variant of this approach which uses embedded javascript.

I am still trying to figure out how to handle this in the longer term, for the moment I am just using the hash provided in the console error message.

[Nantris]

@AnujRNair is there any plan to include hashes for linked scripts? We can't get __webpack_nonce__ working, and the plugin doesn't generate hashes, so that only leaves us with hardcoded nonce values determined at build time, which is almost no security unfortunately.

The docs also don't seem to indicate that this is the case:

Although we're configuring script-src and style-src to be blank, the CSP plugin will scan your HTML generated in html-webpack-plugin for external/inline script and style tags, and will add the appropriate hashes and nonces to your CSP policy.