asmyshlyaev177/react-horizontal-scrolling-menu

Support CSP by adding __webpack_nonce__

Closed this issue · 4 comments

kristina-stepanaviciene-devbridge commented

react-horizontal-scrolling-menu does not work with Content Security Policy due to injected inline styles, the error is thrown: "Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' ...". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.".

Some other libraries provide a way to add webpack_nonce, for example, emotion-js/emotion#2822.

Could something similar be made in react-horizontal-scrolling-menu?

Seems like style-loader is used, which is generating inline styles. This might be a reason why CSP is violated.

asmyshlyaev177 commented

I will take a look later.

asmyshlyaev177 commented

Btw need way to reproduce it, but i'm not sure i can fix it. I'm using rollup for production build.

marius-noreikis-work commented

Hi @asmyshlyaev177 , I'm facing the same issue. I forked your basic sample and added <meta http-equiv="Content-Security-Policy" content="style-src 'self'" /> to index.html

https://codesandbox.io/s/basic-example-forked-d6wq5i?file=/public/index.html

Now if you check browser logs, you'd see that Chrome e.g. blocks the style loading with

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

asmyshlyaev177 commented

Hi @asmyshlyaev177 , I'm facing the same issue. I forked your basic sample and added <meta http-equiv="Content-Security-Policy" content="style-src 'self'" /> to index.html

https://codesandbox.io/s/basic-example-forked-d6wq5i?file=/public/index.html

Now if you check browser logs, you'd see that Chrome e.g. blocks the style loading with

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

Can you try to use https://www.npmjs.com/package/csp-html-webpack-plugin ?