Refactor #2423

primefaces · Jan 13, 2022 · 5fdaee0 · 5fdaee0
1 parent d1037df
commit 5fdaee0
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 41 deletions.
diff --git a/components/lib/api/Api.d.ts b/components/lib/api/Api.d.ts
@@ -20,7 +20,7 @@ interface FilterMatchModeOptions {
 interface APIOptions {
     ripple?: boolean;
     inputStyle?: InputStyleType;
-    inlineCssNonce?: string;
+    nonce?: string;
     locale?: string;
     appendTo?: AppendToType;
     cssTransition?: boolean;

diff --git a/components/lib/api/PrimeReact.js b/components/lib/api/PrimeReact.js
@@ -14,7 +14,7 @@ export default class PrimeReact {
 
     static autoZIndex = true;
 
-    static inlineCssNonce = null;
+    static nonce = null;
 
     static zIndex = {
         modal: 1100,

diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { DomHandler, classNames, UniqueComponentId } from '../utils/Utils';
 import { Ripple } from '../ripple/Ripple';
+import PrimeReact from '../api/Api';
 
 class CarouselItem extends Component {
 
@@ -371,7 +372,7 @@ export class Carousel extends Component {
 
     createStyle() {
         if (!this.carouselStyle) {
-            this.carouselStyle = DomHandler.createInlineStyle();
+            this.carouselStyle = DomHandler.createInlineStyle(PrimeReact.nonce);
         }
 
         let innerHTML = `

diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
@@ -974,12 +974,12 @@ export class DataTable extends Component {
     }
 
     createStyleElement() {
-        this.styleElement = DomHandler.createInlineStyle();
+        this.styleElement = DomHandler.createInlineStyle(PrimeReact.nonce);
     }
 
     createResponsiveStyle() {
         if (!this.responsiveStyleElement) {
-            this.responsiveStyleElement = DomHandler.createInlineStyle();
+            this.responsiveStyleElement = DomHandler.createInlineStyle(PrimeReact.nonce);
 
             let innerHTML = `
 @media screen and (max-width: ${this.props.breakpoint}) {

diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
@@ -492,7 +492,7 @@ export class Dialog extends Component {
 
     createStyle() {
         if (!this.styleElement) {
-            this.styleElement = DomHandler.createInlineStyle();
+            this.styleElement = DomHandler.createInlineStyle(PrimeReact.nonce);
 
             let innerHTML = '';
             for (let breakpoint in this.props.breakpoints) {

diff --git a/components/lib/galleria/GalleriaThumbnails.js b/components/lib/galleria/GalleriaThumbnails.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import PrimeReact from '../api/Api';
 import { DomHandler, classNames, UniqueComponentId } from '../utils/Utils';
 import { Ripple } from '../ripple/Ripple';
 
@@ -244,7 +245,7 @@ export class GalleriaThumbnails extends Component {
 
     createStyle() {
         if (!this.thumbnailsStyle) {
-            this.thumbnailsStyle = DomHandler.createInlineStyle();
+            this.thumbnailsStyle = DomHandler.createInlineStyle(PrimeReact.nonce);
         }
 
         let innerHTML = `

diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js
@@ -230,7 +230,7 @@ export class OverlayPanel extends Component {
 
     createStyle() {
         if (!this.styleElement) {
-            this.styleElement = DomHandler.createInlineStyle();
+            this.styleElement = DomHandler.createInlineStyle(PrimeReact.nonce);
 
             let innerHTML = '';
             for (let breakpoint in this.props.breakpoints) {

diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js
@@ -1,5 +1,3 @@
-import PrimeReact from '../api/Api';
-
 export default class DomHandler {
 
     static innerWidth(el) {
@@ -871,43 +869,21 @@ export default class DomHandler {
         }
     }
 
-    /**
-     * 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() {
+    static createInlineStyle(nonce) {
         let styleElement = document.createElement('style');
-        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);
+        try {
+            if (!nonce) {
+                nonce = process.env.REACT_APP_CSS_NONCE;
+            }
+        } catch (error) {
+            // NOOP
         }
+
+        nonce && styleElement.setAttribute('nonce', nonce);
         document.head.appendChild(styleElement);
         return styleElement;
     }
 
-    /**
-     * Remove a style element from the head and attempt to prevent DOM Exception on fast refresh.
-     *
-     * @see https://github.com/primefaces/primereact/issues/2469
-     * @param {HtmlStyleElement} styleElement the element to remove from head
-     */
     static removeInlineStyle(styleElement) {
         if (this.isExist(styleElement)) {
             try {