ui
ui copied to clipboard
shadcn-ui
Add Nonce support to prevent XSS attacks
Certain UI elements in the UI library, like Toast and NavMenu, lack nonce support. Nonces, or Number Used Once, are essential for Content Security Policy (CSP) to prevent XSS attacks by allowing only specific scripts to execute. Enhancing the UI library to include nonce functionality for these elements would align with security best practices and bolster protection against XSS attacks. See Next.js documentation for more details on nonces and CSP. This issue aims to address this gap, ensuring a more secure environment for Next.js/React applications.
Either add nonce support or remove the inline style css. (this would fix it too!)
Can you provide an example please? Not sure what you mean by inline style in this context. Thank you.
An example would be toast:
Pre-information:
cspHeader:
const cspHeader = " default-src 'self'; script-src 'self' 'nonce-${nonce}' 'strict-dynamic'; style-src 'self' 'nonce-${nonce}'; img-src 'self' blob: data: ${process.env.CMS_DOMAIN}; font-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; block-all-mixed-content; upgrade-insecure-requests; "
As you can see, a nonce is required for elements with inline styling.
I am importing the toaster via:
import { Toaster } from "@/components/ui/toaster";
and
<Toaster nonce={nonce ?? ""}/> <-- I am trying to set the generated header nonce from the csp middleware.
Also, I am using TypeScript and it tells me:
"The type "{ nonce: string; }" cannot be assigned to the type "IntrinsicAttributes". The property "nonce" is not present for the type "IntrinsicAttributes".
The rendered toaster element should look like this in the browser:
<div role="region" aria-label="Notifications (F8)" tabindex="-1" style="pointer-events:none"> <ol tabindex="-1" class="fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]"></ol> </div>
Here you can see that there is an inline style tag. Because I am not able to add the nonce like I tried above, the element gets flagged by the content security policy.
It should look in the end browser like this:
<div role="region" aria-label="Notifications (F8)" tabindex="-1" nonce="NTUxMDI1xxxx...." style="pointer-events:none"> <ol tabindex="-1" class="fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]"></ol> </div> (passing the nonce)
Somehow some elements are able to use the provided nonce like ThemeProvider, but the toaster doesn't. Please correct me if I've done anything wrong or misunderstood anything. 👍🏻
Hello.
Im getting similar problem with some Shadcn components. I noticed that dynamic elements like Dialog, Sheet and Tabs gives me the error when i set my Content Security Policy directive: "style-src 'self' 'nonce...:
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-i9t0qRM9nCj0iun6ASdsa0Yz16c0M3Iaadas='". Either the 'unsafe-inline' keyword, a hash ('sha256-MtxTdfsVEJSDALEIqblYS='), 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.
To be more specific, when I press the trigger button to open a Dialog or a Sheet this error pops on my console. In other hand, the Tab component logs this error just by been rendered.
My app uses nonce and my directive for Content Security Policy (CSP) has "style-src 'self' 'nonce'. Without this directive I have no errors but this is a very important one.
Here is the module tracing to this error:
Any updates on this issue? I am also experiencing it, same output as the comment before whilst trying to use a command component. It looks like they are all stemming from the singleton.js from react-style-singleton. This has made it very difficult, I have tried all possible solutions but they don't work. Even with the Using nonces with Next.JS update and the strict example.
Also experiencing this same issue that comes down to this insertStyleTag function, besides using unsafe-inline , I don't know if there's a way around this?
This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.
I believe this is only an issue with the Vaul library (used by the Drawer component). Vaul injects inline scripts and styles. I think that nonces should not be used in production.
To solve this I simply stopped using that component.
If you use vite when working with shadcn, you can enable nonces specifically in dev mode which fixes CSP issues there.
It isn’t an issue with just the Vaul library. I think this is actually an issue with multiple components part of radix. Dialog, Select, Command, Drawer, and probably others but I didn’t check any more. Any injection of scripts and modification of inline styles was too much of a risk, so unfortunately I ended up changing UI components.
Agreed, nonce is not a good solution.
On Sat, 10 Aug 2024 at 14:37, Roland @.***> wrote:
I believe this is only an issue with the Vaul library (used by the Drawer component). Vaul injects inline scripts and styles. I think that nonces should not be used in production.
To solve this I simply stopped using that component.
If you use vite when working with shadcn, you can enable nonces specifically in dev mode which fixes CSP issues there.
— Reply to this email directly, view it on GitHub https://github.com/shadcn-ui/ui/issues/2891#issuecomment-2279176490, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAANW3CBHVFEC6DGTTDNADDZQWKH7AVCNFSM6AAAAABEDGWUWGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENZZGE3TMNBZGA . You are receiving this because you commented.Message ID: @.***>
It isn’t an issue with just the Vaul library. I think this is actually an issue with multiple components part of radix. Dialog, Select, Command, Drawer, and probably others but I didn’t check any more.
Yes, you're right. It looks like they inject a script to remove the scrollbar. From my testing, the dialog component still works ok even with this error.
I reported it here: https://github.com/radix-ui/primitives/issues/3063
It isn’t an issue with just the Vaul library. I think this is actually an
issue with multiple components part of radix. Dialog, Select, Command,
Drawer, and probably others but I didn’t check any more.
Yes, you're right. It looks like they inject a script to remove the scrollbar. From my testing, the dialog component still works ok even with this error.
I reported it here: https://github.com/radix-ui/primitives/issues/3063
Great stuff!