From 2d55ed3a04184f66c46d73932849529a68e8985b Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Sat, 30 Mar 2024 09:01:16 +0100 Subject: [PATCH] fix(multiple): set nonce using setAttribute Uses `setAttribute` to set the nonce, instead of DOM property in order to work properly in SSR. Fixes #28780. --- src/cdk-experimental/column-resize/resize-strategy.ts | 2 +- .../table-scroll-container/table-scroll-container.ts | 2 +- src/cdk/layout/media-matcher.ts | 2 +- src/youtube-player/youtube-player.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/cdk-experimental/column-resize/resize-strategy.ts b/src/cdk-experimental/column-resize/resize-strategy.ts index 8e642582d910..aeeff842d49a 100644 --- a/src/cdk-experimental/column-resize/resize-strategy.ts +++ b/src/cdk-experimental/column-resize/resize-strategy.ts @@ -238,7 +238,7 @@ export class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDest this._styleElement = this._document.createElement('style'); if (this._nonce) { - this._styleElement.nonce = this._nonce; + this._styleElement.setAttribute('nonce', this._nonce); } this._styleElement.appendChild(this._document.createTextNode('')); diff --git a/src/cdk-experimental/table-scroll-container/table-scroll-container.ts b/src/cdk-experimental/table-scroll-container/table-scroll-container.ts index 2e5e428e43be..89d164f57956 100644 --- a/src/cdk-experimental/table-scroll-container/table-scroll-container.ts +++ b/src/cdk-experimental/table-scroll-container/table-scroll-container.ts @@ -118,7 +118,7 @@ export class CdkTableScrollContainer implements StickyPositioningListener, OnDes this._styleElement = this._document.createElement('style'); if (this._nonce) { - this._styleElement.nonce = this._nonce; + this._styleElement.setAttribute('nonce', this._nonce); } this._styleRoot.appendChild(this._styleElement); diff --git a/src/cdk/layout/media-matcher.ts b/src/cdk/layout/media-matcher.ts index d2be63607d98..f6912ec19233 100644 --- a/src/cdk/layout/media-matcher.ts +++ b/src/cdk/layout/media-matcher.ts @@ -65,7 +65,7 @@ function createEmptyStyleRule(query: string, nonce: string | undefined | null) { mediaQueryStyleNode = document.createElement('style'); if (nonce) { - mediaQueryStyleNode.nonce = nonce; + mediaQueryStyleNode.setAttribute('nonce', nonce); } mediaQueryStyleNode.setAttribute('type', 'text/css'); diff --git a/src/youtube-player/youtube-player.ts b/src/youtube-player/youtube-player.ts index ee451e626f9c..cb1f694e7601 100644 --- a/src/youtube-player/youtube-player.ts +++ b/src/youtube-player/youtube-player.ts @@ -719,7 +719,7 @@ function loadApi(nonce: string | null): void { script.async = true; if (nonce) { - script.nonce = nonce; + script.setAttribute('nonce', nonce); } // Set this immediately to true so we don't start loading another script