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.
michaelfaith · Apr 11, 2023 · ef1ae05 · ef1ae05
1 parent e78d058
commit ef1ae05
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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<HTMLElement>, _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<MatLegacyProgressSpinner, "mat-progress-spinner, mat-spinner", ["matProgressSpinner"], { "color": { "alias": "color"; "required": false; }; "diameter": { "alias": "diameter"; "required": false; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatLegacyProgressSpinner, [null, null, { optional: true; }, { optional: true; }, null, null, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatLegacyProgressSpinner, [null, null, { optional: true; }, { optional: true; }, null, null, null, null, { optional: true; }]>;
 }
 
 export { MatLegacyProgressSpinnerDefaultOptions }