fix(platform-browser): set nonce attribute in a platform compatible way (#49624)

alan-agius4 · atscott · commit e8e36811d570 · 2023-03-29T09:26:54.000-07:00
Setting the `nonce` attribute using the property is not supported by Domino. This change update the usage to use `setAttribute` and also add a test to verify that the `nonce` is set when it should. PR Close #49624
diff --git a/packages/core/test/acceptance/csp_spec.ts b/packages/core/test/acceptance/csp_spec.ts
@@ -22,8 +22,9 @@ describe('CSP integration', () => {
 
     for (let i = 0; i < styles.length; i++) {
       const style = styles[i];
-      if (style.textContent?.includes('--csp-test-var') && style.nonce) {
-        nonces.push(style.nonce);
+      const nonce = style.getAttribute('nonce');
+      if (nonce && style.textContent?.includes('--csp-test-var')) {
+        nonces.push(nonce);
       }
     }
 
diff --git a/packages/platform-browser/src/dom/dom_renderer.ts b/packages/platform-browser/src/dom/dom_renderer.ts
@@ -327,8 +327,7 @@ class ShadowDomRenderer extends DefaultDomRenderer2 {
       const styleEl = document.createElement('style');
 
       if (nonce) {
-        // Uses a keyed write to avoid issues with property minification.
-        styleEl['nonce'] = nonce;
+        styleEl.setAttribute('nonce', nonce);
       }
 
       styleEl.textContent = style;
diff --git a/packages/platform-browser/src/dom/shared_styles_host.ts b/packages/platform-browser/src/dom/shared_styles_host.ts
@@ -147,8 +147,7 @@ export class SharedStylesHost implements OnDestroy {
       const styleEl = this.doc.createElement('style');
 
       if (this.nonce) {
-        // Uses a keyed write to avoid issues with property minification.
-        styleEl['nonce'] = this.nonce;
+        styleEl.setAttribute('nonce', this.nonce);
       }
 
       styleEl.textContent = style;
diff --git a/packages/platform-browser/test/dom/shared_styles_host_spec.ts b/packages/platform-browser/test/dom/shared_styles_host_spec.ts
@@ -54,5 +54,12 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
       ssh.ngOnDestroy();
       expect(someHost.innerHTML).toEqual('');
     });
+
+    it(`should add 'nonce' attribute when a nonce value is provided`, () => {
+      ssh = new SharedStylesHost(doc, 'app-id', '{% nonce %}');
+      ssh.addStyles(['a {};']);
+      ssh.addHost(someHost);
+      expect(someHost.innerHTML).toEqual('<style nonce="{% nonce %}">a {};</style>');
+    });
   });
 }

Original file line number	Diff line number	Diff line change
`@@ -22,8 +22,9 @@ describe('CSP integration', () => {`
`22`	`22`
`23`	`23`	`for (let i = 0; i < styles.length; i++) {`
`24`	`24`	`const style = styles[i];`
`25`		`- if (style.textContent?.includes('--csp-test-var') && style.nonce) {`
`26`		`- nonces.push(style.nonce);`
	`25`	`+ const nonce = style.getAttribute('nonce');`
	`26`	`+ if (nonce && style.textContent?.includes('--csp-test-var')) {`
	`27`	`+ nonces.push(nonce);`
`27`	`28`	`}`
`28`	`29`	`}`
`29`	`30`
Original file line number	Diff line number	Diff line change
`@@ -327,8 +327,7 @@ class ShadowDomRenderer extends DefaultDomRenderer2 {`
`327`	`327`	`const styleEl = document.createElement('style');`
`328`	`328`
`329`	`329`	`if (nonce) {`
`330`		`- // Uses a keyed write to avoid issues with property minification.`
`331`		`- styleEl['nonce'] = nonce;`
	`330`	`+ styleEl.setAttribute('nonce', nonce);`
`332`	`331`	`}`
`333`	`332`
`334`	`333`	`styleEl.textContent = style;`
Original file line number	Diff line number	Diff line change
`@@ -147,8 +147,7 @@ export class SharedStylesHost implements OnDestroy {`
`147`	`147`	`const styleEl = this.doc.createElement('style');`
`148`	`148`
`149`	`149`	`if (this.nonce) {`
`150`		`- // Uses a keyed write to avoid issues with property minification.`
`151`		`- styleEl['nonce'] = this.nonce;`
	`150`	`+ styleEl.setAttribute('nonce', this.nonce);`
`152`	`151`	`}`
`153`	`152`
`154`	`153`	`styleEl.textContent = style;`