Fixed #15560 - PrimeNGConfig | Add csp

src/app/components/api/primengconfig.ts

@@ -12,6 +12,8 @@ export class PrimeNGConfig {
 
     overlayOptions: OverlayOptions = {};
 
+    csp = signal<{ nonce: string | undefined }>({ nonce: undefined });
+
     filterMatchModeOptions = {
         text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS],
         numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO],

src/app/components/calendar/calendar.ts

@@ -3558,6 +3558,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
             }
 
             (<HTMLStyleElement>this.responsiveStyleElement).innerHTML = innerHTML;
+            DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', this.config?.csp()?.nonce);
         }
     }
 

src/app/components/carousel/carousel.ts

@@ -520,6 +520,7 @@ export class Carousel implements AfterContentInit {
         if (!this.carouselStyle) {
             this.carouselStyle = this.renderer.createElement('style');
             this.carouselStyle.type = 'text/css';
+            DomHandler.setAttribute(this.carouselStyle, 'nonce', this.config?.csp()?.nonce);
             this.renderer.appendChild(this.document.head, this.carouselStyle);
         }
 

src/app/components/confirmdialog/confirmdialog.ts

@@ -616,6 +616,7 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy {
             }
 
             this.styleElement.innerHTML = innerHTML;
+            DomHandler.setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce);
         }
     }
 

src/app/components/dialog/dialog.ts

@@ -701,6 +701,7 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy {
                 }
 
                 this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML);
+                DomHandler.setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce);
             }
         }
     }

src/app/components/dynamicdialog/dynamicdialog.ts

@@ -301,6 +301,7 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy {
                 }
 
                 this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML);
+                DomHandler.setAttribute(this.styleElement, 'nonce', this.primeNGConfig?.csp()?.nonce);
             }
         }
     }

src/app/components/galleria/galleria.ts

@@ -1074,6 +1074,7 @@ export class GalleriaThumbnails implements OnInit, AfterContentChecked, AfterVie
         }
 
         this.thumbnailsStyle.innerHTML = innerHTML;
+        DomHandler.setAttribute(this.thumbnailsStyle, 'nonce', this.galleria.config?.csp()?.nonce);
     }
 
     calculatePosition() {

src/app/components/orderlist/orderlist.ts

@@ -931,6 +931,7 @@ export class OrderList implements AfterViewChecked, AfterContentInit {
                     }
                 `;
                 this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML);
+                DomHandler.setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce);
             }
         }
     }

src/app/components/picklist/picklist.ts

@@ -1651,6 +1651,7 @@ export class PickList implements AfterViewChecked, AfterContentInit {
                 }`;
 
                 this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML);
+                DomHandler.setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce);
             }
         }
     }

src/app/components/table/table.ts

@@ -2975,6 +2975,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable
         this.styleElement = this.renderer.createElement('style');
         this.styleElement.type = 'text/css';
         this.renderer.appendChild(this.document.head, this.styleElement);
+        DomHandler.setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce);
     }
 
     getGroupRowsMeta() {

src/app/components/toast/toast.ts

@@ -34,6 +34,7 @@ import { RippleModule } from 'primeng/ripple';
 import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';
 import { Subscription } from 'rxjs';
 import { ToastCloseEvent, ToastItemCloseEvent, ToastPositionType } from './toast.interface';
+import { DomHandler } from 'primeng/dom';
 
 @Component({
     selector: 'p-toastItem',
@@ -480,6 +481,7 @@ export class Toast implements OnInit, AfterContentInit, OnDestroy {
             }
 
             this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML);
+            DomHandler.setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce);
         }
     }
 

src/app/showcase/doc/configuration/configurationdoc.module.ts

@@ -11,10 +11,11 @@ import { RepositoryDoc } from './locale/repositorydoc';
 import { SetLocaleDoc } from './locale/setlocaledoc';
 import { RippleDoc } from './rippledoc';
 import { ZIndexDoc } from './zindexdoc';
+import { CspDoc } from './cspdoc';
 
 @NgModule({
     imports: [CommonModule, AppCodeModule, AppDocModule, RouterModule],
     exports: [AppDocModule],
-    declarations: [FilterModeDoc, ImportDoc, RippleDoc, ZIndexDoc, NgxTranslateDoc, ApiDoc, RepositoryDoc, SetLocaleDoc]
+    declarations: [FilterModeDoc, ImportDoc, CspDoc, RippleDoc, ZIndexDoc, NgxTranslateDoc, ApiDoc, RepositoryDoc, SetLocaleDoc]
 })
 export class ConfigurationDocModule {}

src/app/showcase/doc/configuration/cspdoc.ts

@@ -0,0 +1,21 @@
+import { Component, inject } from '@angular/core';
+import { Code } from '@domain/code';
+import { PrimeNGConfig } from 'primeng/api';
+
+@Component({
+    selector: 'csp-doc',
+    template: `
+        <app-docsectiontext>
+            <p>The <i>nonce</i> value to use on dynamically generated style elements in core.</p>
+        </app-docsectiontext>
+        <app-code [code]="code" [hideToggleCode]="true"></app-code>
+    `
+})
+export class CspDoc {
+    code: Code = {
+        basic: `constructor(private primengConfig: PrimeNGConfig) {
+    this.config.csp.set({nonce: '...'});
+}
+        `
+    };
+}

src/app/showcase/pages/configuration/configurationdemo.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { CspDoc } from '@doc/configuration/cspdoc';
 import { FilterModeDoc } from '@doc/configuration/filtermodedoc';
 import { ImportDoc } from '@doc/configuration/importdoc';
 import { ApiDoc } from '@doc/configuration/locale/apidoc';
@@ -29,6 +30,17 @@ export class ConfigurationDemoComponent {
             label: 'ZIndex',
             component: ZIndexDoc
         },
+        {
+            id: 'csp',
+            label: 'CSP',
+            children: [
+                {
+                    id: 'csp-nonce',
+                    label: 'Nonce',
+                    component: CspDoc
+                }
+            ]
+        },
         {
             id: 'filter-mode',
             label: 'Filter Mode',