From ef1ae059688636f566c0a8bebcada0b8d61f506f Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 27 Mar 2023 11:23:23 +0200 Subject: [PATCH] fix(material/legacy-progress-spinner): avoid CSP errors Uses the new `CSP_NONCE` injection token to avoid errors when inserting a `style` tag dynamically for the spinner animation. --- src/material/legacy-progress-spinner/progress-spinner.ts | 7 +++++++ tools/public_api_guard/material/legacy-progress-spinner.md | 4 ++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/material/legacy-progress-spinner/progress-spinner.ts b/src/material/legacy-progress-spinner/progress-spinner.ts index b80d5552ecb7..712f3a900f42 100644 --- a/src/material/legacy-progress-spinner/progress-spinner.ts +++ b/src/material/legacy-progress-spinner/progress-spinner.ts @@ -22,6 +22,7 @@ import { ChangeDetectorRef, OnDestroy, NgZone, + CSP_NONCE, } from '@angular/core'; import {CanColor, mixinColor} from '@angular/material/core'; import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations'; @@ -191,6 +192,7 @@ export class MatLegacyProgressSpinner changeDetectorRef?: ChangeDetectorRef, viewportRuler?: ViewportRuler, ngZone?: NgZone, + @Inject(CSP_NONCE) @Optional() private _nonce?: string | null, ) { super(elementRef); @@ -305,6 +307,11 @@ export class MatLegacyProgressSpinner if (!diametersForElement || !diametersForElement.has(currentDiameter)) { const styleTag: HTMLStyleElement = this._document.createElement('style'); + + if (this._nonce) { + styleTag.nonce = this._nonce; + } + styleTag.setAttribute('mat-spinner-animation', this._spinnerAnimationLabel); styleTag.textContent = this._getAnimationText(); styleRoot.appendChild(styleTag); diff --git a/tools/public_api_guard/material/legacy-progress-spinner.md b/tools/public_api_guard/material/legacy-progress-spinner.md index bdc599b02136..8152df279b51 100644 --- a/tools/public_api_guard/material/legacy-progress-spinner.md +++ b/tools/public_api_guard/material/legacy-progress-spinner.md @@ -32,7 +32,7 @@ export { MAT_LEGACY_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY } // @public @deprecated export class MatLegacyProgressSpinner extends _MatProgressSpinnerBase implements OnInit, OnDestroy, CanColor { constructor(elementRef: ElementRef, _platform: Platform, _document: any, animationMode: string, defaults?: MatLegacyProgressSpinnerDefaultOptions, - changeDetectorRef?: ChangeDetectorRef, viewportRuler?: ViewportRuler, ngZone?: NgZone); + changeDetectorRef?: ChangeDetectorRef, viewportRuler?: ViewportRuler, ngZone?: NgZone, _nonce?: string | null | undefined); get diameter(): number; set diameter(size: NumberInput); _getCircleRadius(): number; @@ -55,7 +55,7 @@ export class MatLegacyProgressSpinner extends _MatProgressSpinnerBase implements // (undocumented) static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration; + static ɵfac: i0.ɵɵFactoryDeclaration; } export { MatLegacyProgressSpinnerDefaultOptions }