search

shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
69.14k stars 4.1k forks source link

[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 #4461

Open WoetDev opened 1 month ago

WoetDev commented 1 month ago

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: https://github.com/emilkowalski/sonner/issues/449

This issue seems to remain closed even after requesting it to be re-opened: https://github.com/shadcn-ui/ui/issues/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

devnull commented 1 month ago

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

% npm ls react-style-singleton
portal
├─┬ @radix-ui/react-dialog@1.1.1
│ └─┬ react-remove-scroll@2.5.7
│   ├─┬ react-remove-scroll-bar@2.3.6
│   │ └── react-style-singleton@2.2.1 deduped
│   └── react-style-singleton@2.2.1
└─┬ cmdk@0.2.1
  └─┬ @radix-ui/react-dialog@1.0.0
    └─┬ react-remove-scroll@2.5.4
      └── react-style-singleton@2.2.1 deduped

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