Open bivald opened 2 years ago
Have spent the entire weekend chasing down CSP issues myself...
I'm going to need to remove react-hot-toast
because it doesn't support strict CSP policies (specifically with a nonce)
For reference: https://github.com/cristianbote/goober/issues/471
There is the outline of a work around. Unfortunately, react-hot-toast
doesn't consistently use goober. This line remains a problem:
https://github.com/timolins/react-hot-toast/blob/ee483cc02dcac4359a5081a99aa006fac54cfafc/src/components/toaster.tsx#L60-L74
Which means, this line will also be a problem: https://github.com/timolins/react-hot-toast/blob/ee483cc02dcac4359a5081a99aa006fac54cfafc/src/components/toaster.tsx#L91-L96
And maybe some others...
The solution will be changing the <div>
declaration to something like:
const toasterOven = css({
position: 'fixed',
zIndex: 9999,
top: DEFAULT_OFFSET,
left: DEFAULT_OFFSET,
right: DEFAULT_OFFSET,
bottom: DEFAULT_OFFSET,
pointerEvents: 'none',
...containerStyle
});
return (
<div
className={containerClassName ? `${containerClassName} ${toasterOven}` : toasterOven}
onMouseEnter={handlers.startPause}
onMouseLeave={handlers.endPause}
>
The only issue with that approach is that it requires a type definition change on the ToasterProps
from React.CSSProperties
to goober.CSSAttribute
(yes singular, it is goober's equivalent)
@tjrexer how would you feel about a change like this?
Note: If this change is not made, we no other choice but to move away from react-hot-toast
. Something I suspect will become more common as folks add stricter content-security-policies.
Hi @jd-carroll. I personally haven't worked with CSP, so your research is super helpful for me. I agree that this should be supported to future proof RHT. I will do some tests with this in one of the next releases.
Hi @timolins, were you able to see this? Thanks!
Any updates on this?
Any updates on this?
2024 now, this needs a fix :)
Do we have any updates here?
Any update of this? I am getting "Refused to apply inline style because it violates"
Hi,
I'm trying to use react-hot-toast (which looks amazing!) but I have a pretty strict CSP policy. I haven't found any mention of csp or nonce support in react-hot-toast. Looks like in the end it's goober that triggers the "Refused to apply inline style because it violates the following Content Security Policy directive... a nonce ('nonce-...') is required to enable inline execution." but I can't find any mention to CSP on goober either.
Anyone using CSP? I'm probably just missing something.
Also, let me know if you think this issue should be on goober and not hot toast :)
Regards, Niklas