vue-style-loader
vue-style-loader copied to clipboard
vuejs
Add CSP support
At some point, style-loader added support for nonces to somewhat ease CSP issues. Without this support, you have to allow unsafe inline styles. This currently is the case with vue-style-loader, which is an issue in tight CSP scenarios. Is there any chance to add similar support to vue-style-loader?
Link to the original issue in style-loader: https://github.com/webpack-contrib/style-loader/issues/306 Link to the source that provides nonce support: https://github.com/webpack-contrib/style-loader/blob/master/lib/addStyles.js#L211
Further read: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src#Sources (see "nonce")
Note: The static compile-time support in style-loader is not exactly how it is supposed to work (also see the linked article). A proper solution would support dynamic nonces that change by request. Other frameworks solve this in various ways, for example by looking for a well-known style tag in the page source and take the nonce from there if available. That way the host has full control over when and how new nonces are created.
I would like to see that resolved too. At this point I need to allow unsafe-inline in my application which is far from what I'd like.
Can we see some movement on this? I don't think this is an acceptable security vuln.
This could also solve this issue https://github.com/webpack-contrib/style-loader#linktag
Looking forward for this PR to merge. It would be very helpful. Thank you in advance!
My solution for this as I am using webpack, all vue styles are going into a separate css file using runtime only. This is the only way I found. https://v2.vuejs.org/v2/guide/installation.html#CSP-environments https://v2.vuejs.org/v2/guide/deployment.html#Extracting-Component-CSS
There is much improvement on performances. Also my setup is using vue3 on runtime only + typescript + laravelmix with eslint.