Nonce Provider

Anatomy

Import the component and wrap it around your app:

import { NonceProvider } from '@base-ui/react/nonce-provider';

<NonceProvider nonce="...">
  {/* Your app or a group of components */}
</NonceProvider>

Some Base UI components render inline <style> or <script> tags for functionality such as removing scrollbars or pre-hydration behavior. Under a strict Content Security Policy (CSP), these tags may be blocked unless they include a matching nonce attribute.

NonceProvider supplies that nonce value to all supported components automatically.

Content Security Policy (CSP)

If you enforce a CSP that blocks inline tags by default, configure your server to:

1. Generate a random nonce per request
2. Include it in your CSP header (via style-src-elem/script-src)
3. Pass the same nonce into NonceProvider during rendering

const nonce = crypto.randomUUID();

// Example CSP header
const csp = [
  `default-src 'self'`,
  `script-src 'self' 'nonce-${nonce}'`,
  `style-src-elem 'self' 'nonce-${nonce}'`,
].join('; ');

Then:

import { NonceProvider } from '@base-ui/react/nonce-provider';

function App({ nonce }) {
  return <NonceProvider nonce={nonce}>{/* ... */}</NonceProvider>;
}

Inline style attributes

While Nonce Provider covers inline <style> and <script> tags, they do not cover inline style attributes (for example, <div style="...">).

style-src covers both style elements and attributes, but if you want to block only style elements while allowing style attributes, you can replace style-src with the style-src-elem directive in your CSP.

style-src-attr will only trigger a violation while parsing pre-rendered (SSR) components in your HTML. If your CSP blocks inline style attributes, you have a few options:

1. Relax your CSP by adding 'unsafe-inline' to the style-src-attr directive (or using only style-src-elem instead of style-src). Style attributes specifically pose a less severe security risk than style elements, but this approach may not be acceptable in high-security environments.
2. Render the affected components only on the client, so that no inline styles are present in the initial HTML.
3. Manually unset inline styles and specify them in your CSS instead. Any component can have its inline styles unset, such as <ScrollArea.Viewport style={{ overflow: undefined }}>. Note that you’ll need to ensure you vet upgrades for any new inline styles added by Base UI components.

API reference

useNonce

Use this hook to read the current nonce value (for example, to apply it to your own inline tags).

Return value