Inline style injection used in v11 not compatible with Content-Security-Policy

[GWellerGMSL]

FYI, using react-toastify v11 with CSP response headers causes the following errors...

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.

Using the undocumented unstyled import seems to resolve the issue, but this feels brittle to me. It would be great if you could explore other options for injecting the stylesheet.

[fkhadra]

Hey @GWellerGMSL, I see a couple of solutions for this

• Document the unstyled approach, it's on my todo
• Provide a list of hash so it can be added to the CSP header (I'll probably have to document that approach)

Content-Security-Policy: style-src 'sha256-MzEyMGNmNjY4NmVjZDFjNGQ4ZTlmZTBiYzZiOGVlMDVjYjM5ZGUzMmUzZGVkMmI1MTNlMWU1NTg2N2UxZTc5Mw=='

• use unsafe-inline but unlikely to be what you are looking for.

I'll work on solution 2 to provide a guide, seems like the more appropriate if you still want the style to be injected.

[DaveWelling]

IF you get here like I did because you have CSP enabled and you are getting a bunch of garbage in your browser (and maybe some complaints about nonces). You can just import the library like this:
import { ToastContainer, toast } from 'react-toastify/unstyled';
and then import the regular CSS file:
import 'react-toastify/dist/ReactToastify.css';

[miki799]

I tried to import react-toastify/unstyled, but I'm still receiving errors about "style-src 'self'" directive violation 😕

[fkhadra]

@miki799 might be a cache issue, removing the .next folder could help.

[miki799]

@fkhadra Yep, it was a cache issue. Thanks!