primefaces#4602: Add NONCE to inline style

melloware · Jul 12, 2023 · 51918de · 51918de
1 parent 27a9654
commit 51918de
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/components/lib/hooks/useStyle.js b/components/lib/hooks/useStyle.js
@@ -1,11 +1,13 @@
 import { useEffect, useRef, useState } from 'react';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
 import { DomHandler, ObjectUtils } from '../utils/Utils';
 
 let _id = 0;
 
 export const useStyle = (css = {}, options = {}) => {
     const [isLoaded, setIsLoaded] = useState(false);
 
+    const context = React.useContext(PrimeReactContext);
     const cssRef = useRef(null);
     const defaultDocument = DomHandler.isClient() ? window.document : undefined;
     const { document = defaultDocument, immediate = true, manual = false, name = `primereact_style_${++_id}`, media } = options;
@@ -23,6 +25,10 @@ export const useStyle = (css = {}, options = {}) => {
             el.type = 'text/css';
             el.setAttribute('data-pc-name', name);
             if (media) el.media = media;
+
+            const nonce = (context && context.nonce) || PrimeReact.nonce;
+
+            DomHandler.addNonce(el, nonce);
             document.head.appendChild(el);
         }
 
@@ -37,7 +43,7 @@ export const useStyle = (css = {}, options = {}) => {
         const node = document.querySelector(`[data-pc-name="${name}"]`);
 
         if (node && node.isConnected) {
-            document.head.removeChild(node);
+            DomHandler.removeInlineStyle(node);
             setIsLoaded(false);
         }
     };

diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js
@@ -981,15 +981,7 @@ export default class DomHandler {
     static createInlineStyle(nonce) {
         let styleElement = document.createElement('style');
 
-        try {
-            if (!nonce) {
-                nonce = process.env.REACT_APP_CSS_NONCE;
-            }
-        } catch (error) {
-            // NOOP
-        }
-
-        nonce && styleElement.setAttribute('nonce', nonce);
+        DomHandler.addNonce(styleElement, nonce);
         document.head.appendChild(styleElement);
 
         return styleElement;
@@ -1009,6 +1001,18 @@ export default class DomHandler {
         return styleElement;
     }
 
+    static addNonce(styleElement, nonce) {
+        try {
+            if (!nonce) {
+                nonce = process.env.REACT_APP_CSS_NONCE;
+            }
+        } catch (error) {
+            // NOOP
+        }
+
+        nonce && styleElement.setAttribute('nonce', nonce);
+    }
+
     static getTargetElement(target) {
         if (!target) return null;