diff --git a/components/lib/api/Api.d.ts b/components/lib/api/Api.d.ts index bfb892ee4d..e6c60d4ef2 100644 --- a/components/lib/api/Api.d.ts +++ b/components/lib/api/Api.d.ts @@ -20,6 +20,7 @@ interface FilterMatchModeOptions { interface APIOptions { ripple?: boolean; inputStyle?: InputStyleType; + inlineCssNonce?: string; locale?: string; appendTo?: AppendToType; cssTransition?: boolean; diff --git a/components/lib/api/PrimeReact.js b/components/lib/api/PrimeReact.js index 7404ab867d..541d693ee7 100644 --- a/components/lib/api/PrimeReact.js +++ b/components/lib/api/PrimeReact.js @@ -14,6 +14,8 @@ export default class PrimeReact { static autoZIndex = true; + static inlineCssNonce = null; + static zIndex = { modal: 1100, overlay: 1000, diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js index e4ff2dd95a..9c2bf8619d 100644 --- a/components/lib/utils/DomHandler.js +++ b/components/lib/utils/DomHandler.js @@ -1,3 +1,5 @@ +import PrimeReact from '../api/Api'; + export default class DomHandler { static innerWidth(el) { @@ -870,15 +872,29 @@ export default class DomHandler { } /** - * Anytime an inline style is created check environment variable 'process.env.REACT_APP_CSS_NONCE' - * to set a CSP NONCE. + * Anytime an inline style is created check for CSP Nonce. + * Create React App/Next look for environment variable 'process.env.REACT_APP_CSS_NONCE'. + * Vite look for environment variable 'import.meta.env.VITE_CSS_NONCE' + * Finally look for global variable PrimeReact.inlineCssNonce to set a CSP NONCE. * * @see https://github.com/primefaces/primereact/issues/2423 * @return HtmlStyleElement */ static createInlineStyle() { let styleElement = document.createElement('style'); - let nonce = process.env.REACT_APP_CSS_NONCE; + let nonce = ''; + // CRA and Next + if (process) { + nonce = process.env.REACT_APP_CSS_NONCE; + } + // Vite + if (!nonce && import.meta.env) { + nonce = import.meta.env.VITE_CSS_NONCE; + } + // global variable + if (!nonce) { + nonce = PrimeReact.inlineCssNonce; + } if (nonce) { styleElement.setAttribute('nonce', nonce); }