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