Lenso UI

Guide · Security boundary

Strict CSP

Pass a request-scoped nonce to Base UI while keeping security policy separate from theme and component state.

Wire the provider

Generate a nonce for each server response, include it in the policy header, and pass the same value to the provider.

import { CSPProvider } from "@lenso/ui/csp-provider";

<CSPProvider nonce={requestNonce}>
  <App />
</CSPProvider>;

Set the policy at the response boundary

  • Include the nonce in script-src and style-src-elem.
  • Keep the nonce request-scoped; do not use one static application-wide value.
  • Use the application's existing policy for inline style attributes separately.

When styles are already external

When your application supplies the required external component styles, pass disableStyleElements to prevent Base UI from creating inline style elements. This does not remove inline style attributes, which are controlled by style-src-attr.

CSPProvider is independent from ThemeScope, Toast, and component-specific providers. Add only the boundaries your application needs.

Lenso UI