Fix primefaces#2423: Add CSP NONCE to inline style elements if found

melloware · Nov 17, 2021 · 881662d · 881662d
1 parent b83a9ca
commit 881662d
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 12 deletions.
diff --git a/src/components/carousel/Carousel.js b/src/components/carousel/Carousel.js
@@ -371,8 +371,7 @@ export class Carousel extends Component {
 
     createStyle() {
         if (!this.carouselStyle) {
-            this.carouselStyle = document.createElement('style');
-            document.body.appendChild(this.carouselStyle);
+            this.carouselStyle = DomHandler.createInlineStyle();
         }
 
         let innerHTML = `

diff --git a/src/components/datatable/DataTable.js b/src/components/datatable/DataTable.js
@@ -951,14 +951,12 @@ export class DataTable extends Component {
     }
 
     createStyleElement() {
-        this.styleElement = document.createElement('style');
-        document.head.appendChild(this.styleElement);
+        this.styleElement = DomHandler.createInlineStyle();
     }
 
     createResponsiveStyle() {
         if (!this.responsiveStyleElement) {
-            this.responsiveStyleElement = document.createElement('style');
-            document.head.appendChild(this.responsiveStyleElement);
+            this.responsiveStyleElement = DomHandler.createInlineStyle();
 
             let innerHTML = `
 @media screen and (max-width: ${this.props.breakpoint}) {

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

diff --git a/src/components/galleria/GalleriaThumbnails.js b/src/components/galleria/GalleriaThumbnails.js
@@ -244,8 +244,7 @@ export class GalleriaThumbnails extends Component {
 
     createStyle() {
         if (!this.thumbnailsStyle) {
-            this.thumbnailsStyle = document.createElement('style');
-            document.body.appendChild(this.thumbnailsStyle);
+            this.thumbnailsStyle = DomHandler.createInlineStyle();
         }
 
         let innerHTML = `

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

diff --git a/src/components/utils/DomHandler.js b/src/components/utils/DomHandler.js
@@ -864,4 +864,21 @@ export default class DomHandler {
             }
         }
     }
+
+    /**
+     * Anytime an inline style is created check environment variable 'process.env.REACT_APP_CSS_NONCE'
+     * 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;
+        if (nonce) {
+            styleElement.setAttribute('nonce', nonce);
+        }
+        document.head.appendChild(styleElement);
+        return styleElement;
+    }
 }