Using this plugin with webpack, material-ui withStyles

brymon68 commented 5 years ago

Description

I am having an issue with this plugin and MaterialUI's withStyles functionality which allows me to write styles within JSX and generate a stylesheet dynamically. Generally I will receive the following error:

addStyles.js:397 Refused to load the stylesheet 'blob:https://host' because it violates the following Content Security Policy directive: "style-src 'unsafe-inline' 'self' 'unsafe-eval' 'sha256-8Ttgnzta3WC0XhMHqjlso6w8jFtMRzqTSufL6OFT/HQ=' 'nonce-hr9a9a5KipK/nNqlYwCf9w==' 'nonce-raSGmUULzSOykrZn2AzKOQ==' 'nonce-gm6b/nNJzNSSPll0/D8N4A==' 'nonce-0Ij+YWTEfMPWwdJ4aEg5Pw==' 'nonce-lylYG0q6NSXffVaHd+ydrg==' 'nonce-5ZbhjP2mnLu3e+iAvMFDlw==' 'nonce-2eJx+0YItmKXInI0rfaqNw==' 'nonce-1OyIfAm7sHSq2rZRWPWFCw==' 'nonce-4AdZFYimCELi/0L9XhjJ7A==' 'nonce-UCQAVe9izKqG5vo16urKXg==' 'nonce-ykGZtSKbUJYJaHJOeYNIeA==' 'nonce-tVmIhhp0G3aSy6E3dby1hg==' 'nonce-8VOErQfHOdp+kr9Sgv/+xg==' 'nonce-nhC9

I use CRA's ejected webpack. I have tried to implement various fixes to get your plugin to play nicely with Material UI withStyles but have been unsuccessful.

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.

Is anyone familiar with how to get this plugin to work nicely with Material UI and webpack?

HairyRabbit commented 5 years ago

anything update?

HairyRabbit commented 5 years ago

'self' 'unsafe-inline' 'unsafe-eval' blob: will works fine,

should we add blob to style-src defaults? The css-loader generate blobs when sourcemap was enabled

AnujRNair commented 5 years ago

👋 Apologies, this slipped my mind!

I think adding blob to the policy as a custom policy is the way to go here - I don't think it should be included by default as this is not the standard browser default value. Every case will always be different, and understanding how your code is being bundled is key to making sure you have the right policy which works for you and your app.

Thanks!

HairyRabbit commented 5 years ago

Yeah, your right.

I think add some description to README looks good for development mode.

johnnyreilly commented 5 years ago

Hey @HairyRabbit ,

I'm bumping on a similar issue. It sounds like you solved it for yourself; would you be able to share what the relevant part of your webpack config looks like now please?

Mine looks like this:

new CspHtmlWebpackPlugin(), // Probably it should look different?

HairyRabbit commented 5 years ago

@johnnyreilly ye, as you can see, I add blob: to style-src for development mode.

new CSPHTMLWebpackPlugin({
  'style-src': `'self' 'unsafe-inline' 'unsafe-eval' blob:`
})

johnnyreilly commented 5 years ago

Thanks!

saadsaifse commented 4 years ago

I also use makeStyles to create styles in material-ui but my styles are loaded dynamically and inline inside the header of my index.html file. Despite the configuration of this plugin to include hash to inline styles, it does not add any hash. Maybe because they are added dynamically?

Is there a fix for this?

dalechyn commented 3 years ago

What's the point in CSP at all if you turn on unsafe-eval?

melloware commented 3 years ago

Agreed to me this is a complete failure of Material UI to use inline styles.

slackhq / csp-html-webpack-plugin