Fix #2423/#2536: CSP allow setting inline nonce with PrimeReact.inlin…

…eCssNonce (#2525)
primefaces · Jan 12, 2022 · d1037df · d1037df
1 parent 6c12fcb
commit d1037df
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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);
         }