Closed dvlden closed 3 years ago
Hi @dvlden
That's a fair point about the documentation, I can have that fixed up.
When it comes to the hashes not being added as expected, are you able to provide a small reproducible example repo where I could debug this?
As a side note, all scripts must exist on the page at the point this plugin starts executing, as it will only calculate hashes for script found during webpack compile time. Anything else will have to be manually calculated and added into the CSP plugin settings manually
I think the simplest solution for me here is to get it out of the stash, make a new Vue project and take only bits for this specific problem.
Well, I'd assume that the plugin has CSS within the JS module since it's being injected internally and there's no way to import the style externally.
The scenario is as follow:
That being said, I think that this plugin should pick that up, right?
It depends on how the CSS is being injected into the head of the doc. If it's being injected during runtime, then your CSP is probably blocking the script from running.
This is the correct behaviour.
Browsers cannot know whether a script being injected into the document has come from a legitimate source, or from an attacker. You have to let the browser know via the CSP that what is trying to run has been verified by you, and the only way to do this is to precompute the script into a hash and include it in the policy.
This plugin works by scanning the HTML file during webpack's compile time to find all inline script and style tags and precompute the hashes for you. If there are hashes outside of the HTML file which need to be whitelisted to allow them to run during runtime, you will need to manually compute these and provide them to the CspHtmlWebpackPlugin
policy yourself
Aha... Well, I thought that the plugin will recognize the CSS from the JS library that injects it, since it's visible within the module itself. But seems like it's not doing that... Yeah, module injects style during runtime.
Could this be improved so that the plugin automatically recognizes when the JS module has some CSS to inject and to calculate the SHA hash and set it as the directive?
This would be unmanageable to auto calculate and inject in since all libraries will do this in different ways, at different points in their runtime, and through different methods. The webpack plugin would have to understand runtime code at a very deep level to be able to do this, which is out of scope for the project. On top of this, any post processing done through webpack (compression, minification etc.) would render the hash initially created obsolete.
I would recommend either extracting your CSS out to a separate file, or turning off CSP rules which stop inline CSS from being added.
To anyone who is coming here and wondering how to extract css in webpack. Remove style-loader first(it is meant to be used in development only) and use this plugin https://webpack.js.org/loaders/style-loader/#recommend
Description
Straight from the docs, we can see this:
It tells us about the default options, but it fails to tell us that it can be used one way or another. If that's not the case, well, it works that way for me. I was looking at the docs for the first time and immediately thought that configuration must be placed within both places, which is weird. But that doesn't seem to be the case. We don't have to define
cspPolicy
property withinHTMLWebpackPlugin
if we are usingCspHtmlWebpackPlugin
.Anyways, aside from this, I came across a real issue. The option
hashEnabled
does not seem to be working. If I set both properties totrue
or tofalse
, it does nothing... No hash calculations of internal scripts and styles, so they are nowhere to be found within CSP tag.However, if I only enable
nonceEnabled
it seems to be working, not quite sure YET, but I can seenonce
hashes in the CSP tag. Howevever,nonce
should be different for each page load, so that's not really what I'm looking for in my SPA.What type of issue is this? (place an
x
in one of the[ ]
)Requirements (place an
x
in each of the[ ]
)Bug Report
I assume it's a bug, but it might be a misunderstanding of usage.
hashEnabled
– not working.Reproducible in:
slackhq/csp-html-webpack-plugin version: ^3.0.4
node version: v13.11.0
OS version(s): macOS Catalina 10.15.3 (19D76)
Steps to reproduce:
vue-json-pretty
npm package, as it will injectstyle
on each load. Any plugin will do, but this is an example. You might also make a small script that will inject some CSS.Expected result:
To have SHA-256 hashes within my CSP policy for internal scripts and styles.
Actual result:
Nothing. It literally does nothing.