[bug]: support nonces for usage of inline CSS required for certain components to work, currently incompatibility when using a Content Security Policy (CSP) that doesn't add unsafe-inline for CSS

[WoetDev]

Describe the bug

Certain components don't work when unsafe-inline is not defined in the CSP, a security incompatibility that should be resolved so shadcn can also be used by development teams under strict security requirements. I hope the shadcn team also takes security seriously and wants to support this 🙏

If CSS can be injected by an attack, it can aid in social engineering attacks by confusing the target users.

Seems to be a problem with Toast as well as the third-part library Sonner: emilkowalski/sonner#449

This issue seems to remain closed even after requesting it to be re-opened: #2891

Affected component/components

Toast, Sonner, Tabs, Dialog, Sheet, Command

How to reproduce

Use any CSP with the style-src directive set to anything other than unsafe-inline.

Codesandbox/StackBlitz link

No response

Logs

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-xxx'". Either the 'unsafe-inline' keyword, a hash ('sha256-xxxx='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

System Info

Not relevant

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[devnull]

Looking further into this because it's also causing issues for me.

% npm ls react-style-singleton
portal
├─┬ @radix-ui/[email protected]
│ └─┬ [email protected]
│   ├─┬ [email protected]
│   │ └── [email protected] deduped
│   └── [email protected]
└─┬ [email protected]
  └─┬ @radix-ui/[email protected]
    └─┬ [email protected]
      └── [email protected] deduped

It appears that this is a dependency on react-remove-scroll. I think these are related.

• Violates safe CSPs because of dependency applying style tags theKashey/react-remove-scroll#21
• Modal usage of react-remove-scroll-bar triggers CSP error chakra-ui/chakra-ui#3383

[QiaoLi1996]

Is this solved? I'm experiencing the same issue.