Strict CSP and nonce

[bivald]

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

[jd-carroll]

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.

[timolins]

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.

[nicolapalavecino]

Hi @timolins, were you able to see this? Thanks!

[maxall41]

Any updates on this?

[ollebergkvist]

Any updates on this?

2024 now, this needs a fix :)