Meta tags:
description=A CSP provider component that applies a nonce to inline style and script tags rendered by Base UI components, and can disable inline style elements.;
keywords=Base UI CSP Provider,Content Security Policy,CSP nonce,React CSP,Inline script nonce,Inline style nonce;

Headings (most frequently used words):

inline, style, cspprovider, csp, provider, anatomy, supplying, nonce, disable, elements, attributes, api, reference, propshide, statehide,

Text of the page (most frequently used words):
style (32), nonce (21), #inline (21), csp (17), cspprovider (14), components (13), the (12), base (11), src (11), elements (10), and (9), tags (9), your (8), script (7), you (7), attributes (7), disable (7), provider (7), styles (6), type (5), not (5), rendered (5), that (5), for (5), react (4), undefined (4), default (4), instead (4), disablestyleelements (4), component (4), only (4), are (4), this (4), elem (4), scrollbar (4), props (3), name (3), specify (3), any (3), have (3), security (3), example (3), from (3), all (3), supplying (3), select (3), include (3), import (3), app (3), self (3), behavior (3), group (3), anatomy (3), field (3), menu (3), hide (2), reactnode (2), children (2), string (2), description (2), false (2), boolean (2), css (2), via (2), prop (2), api (2), reference (2), unset (2), them (2), can (2), its (2), such (2), ensure (2), new (2), scrollarea (2), viewport (2), render (2), affected (2), client (2), html (2), directive (2), but (2), may (2), attr (2), blocks (2), does (2), when (2), server (2), pre (2), they (2), these (2), none (2), scrollbars (2), attribute (2), function (2), under (2), const (2), header (2), view (2), toggle (2), navigation (2), dialog (2), checkbox (2), cspproviderstate, state, export, cspproviderprops, value, apply, whether, created, should, must, custom, class, names, other, methods, table, manually, note, need, vet, upgrades, added, overflow, present, initial, relax, adding, using, specifically, pose, less, severe, risk, than, approach, acceptable, high, environments, unsafe, addition, few, options, applies, both, want, control, use, covers, cover, governs, encountered, parsing, affect, side, javascript, sets, div, across, opt, don, their, own, flag, required, uses, scripts, disabling, remove, width, webkit, display, avoid, entirely, rely, external, stylesheets, relevant, enabled, which, inject, tag, native, alignitemwithtrigger, list, popup, will, correct, allowing, return, providing, then, join, randomuuid, crypto, pass, same, into, during, rendering, generate, random, per, request, enforce, configure, allows, configuring, globally, within, tree, some, functionality, removing, hydration, strict, content, policy, blocked, unless, matching, wrap, around, source, markdown, configures, related, top, npm, github, userender, mergeprops, direction, utils, tooltip, toolbar, toast, tabs, switch, slider, separator, scroll, area, radio, progress, preview, card, popover, otp, number, meter, menubar, input, form, fieldset, drawer, context, combobox, collapsible, button, avatar, autocomplete, alert, accordion, llms, txt, typescript, forms, customization, composition, animation, styling, handbook, about, community, releases, accessibility, quick, start, overview, search, skip, contents,

Text of the page (random words):
csp provider base ui skip to contents search k navigation overview quick start accessibility releases community about handbook styling animation composition customization forms typescript llms txt components accordion alert dialog autocomplete avatar button checkbox checkbox group collapsible combobox context menu dialog drawer field fieldset form input menu menubar meter navigation menu number field otp field new popover preview card progress radio scroll area select separator slider switch tabs toast toggle toggle group toolbar tooltip utils csp provider direction provider mergeprops userender github npm 1 6 0 csp provider top anatomy supplying a nonce disable inline style elements inline style attributes api reference csp provider configures csp related behavior for inline tags rendered by base ui components view as markdown view source anatomy import the component and wrap it around your app anatomy import cspprovider from base ui react csp provider cspprovider nonce your app or a group of components cspprovider 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 cspprovider allows configuring this behavior globally for all base ui components within its tree supplying a nonce if you enforce a csp that blocks inline tags by default configure your server to generate a random nonce per request include it in your csp header via style src elem script src pass the same nonce into cspprovider during rendering example 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 providing the nonce import cspprovider from base ui react csp provider function app nonce return cspprovider nonce nonce cspprovider this will ensure that all inline style and script tags rendered by base ui components include the correct nonce attribute allowing them to function under your csp disable inline style elements you can avoid supplying a nonce if you disable inline style elements entirely and rely on external stylesheets only the relevant components are scrollarea viewport and select popup or select list when alignitemwithtrigger is enabled which inject a style tag to disable native scrollbars style base ui disable scrollbar scrollbar width none base ui disable scrollbar webkit scrollbar display none style specify disablestyleelements to remove these tags disabling style elements cspprovider disablestyleelements cspprovider script tags across all components are opt in so they are not affected by this prop and don t have their own disable flag a nonce is required if any component uses inline scripts inline style attributes cspprovider covers inline style and script tags rendered as elements but it does not cover inline style attributes for example div style the style src attr directive in csp governs inline style attributes encountered when parsing html from server pre rendered components it does not affect client side javascript that sets styles in csp style src applies to both style elements and style attributes if you only want to control style elements use style src elem instead if your csp blocks inline style attributes in addition to elements you have a few options 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 render the affected components only on the client so that no inline styles are present in the initial html 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 component props table prop type default disablestyleelements boolean false name disablestyleelements description whether inline style elements created by base ui components should not be rendered instead components must specify the css styles via custom class names or other methods type boolean undefined default false nonce string name nonce description the nonce value to apply to inline style and script tags type string undefined children react reactnode name children type react reactnode undefined cspprovider props hide re export of cspprovider props as cspproviderprops cspprovider state hide type cspproviderstate