Make component CSP safe

[cyantree]

Feature request

Overview

As discovered in mantinedev/mantine#3597 @radix-ui/react-scroll-area currently can't be used in a CSP enabled environment without setting style-src: unsafe-inline.

By being able to configure a nonce or getting rid of the inline styles this scenario would be possible.

Implementation idea

Provide a property to specify a nonce. This nonce then gets passed to the style tag.

Who does this impact? Who is this for?

This is relevant for applications in CSP enabled environments that use strict rules to enhance security.

Additional context

Inline styles are set here:
https://github.com/radix-ui/primitives/blob/main/packages/react/scroll-area/src/ScrollArea.tsx#L152

[andy-hook]

At a glance, the ideal solution would be to avoid style tag injection here. There are legit use cases where this is not possible though e.g. when we want to improve the SSR first render experience.

React Balancer came to mind as their solution requires it. They seem to agree on the nonce prop: shuding/react-wrap-balancer#51

[redbmk]

I'm also seeing this not just for <style> tags but for inline styles on an element. for example:

<div style="--radix-popover-content-transform-origin: var(--radix-popper-transform-origin); --radix-popover-content-available-width: var(--radix-popper-available-width); --radix-popover-content-available-height: var(--radix-popper-available-height); --radix-popover-trigger-width: var(--radix-popper-anchor-width); --radix-popover-trigger-height: var(--radix-popper-anchor-height);">
 ...
</div>

I'm not sure if a nonce would help in this case, but can some of this be moved to a proper stylesheet instead of inline? Or if something needs to be added in javascript (not in SSR) could the JS API be used instead? So instead of using React to set the style attribute, you could instead use something like ref.current.style["--radix-popper-available-width"] = "300px".

[benoitgrelard]

Closed via #2728