feat(core): add API to provide CSP nonce for inline stylesheets

crisbeto · crisbeto · commit 92db19ce1421 · 2023-03-16T15:42:58.000+01:00
Angular uses inline styles to insert the styles associated with a component. This violates the strict styles [Content Security Policy](https://web.dev/strict-csp/) which doesn't allow inline styles by default. One way to allow the styles to be applied is to set a `nonce` attribute on them, but because the code for inserting the stylesheets is deep inside the framework, users weren't able to provide it without accessing private APIs. These changes add a new `CSP_NONCE` injection token that will allow users to provide a nonce, if their app is using CSP. If the token isn't provided, the framework will look for an `ngCspNonce` attribute on the app's root node instead. The latter approach is provided as a convenience for apps that render the `index.html` through a server, e.g. `<app ngCspNonce="{% randomNonceAddedByTheServer %}"></app>`. This PR addresses adding the nonce to framework-generated styles. There will be follow-up PRs that add support for it in critical CSS tags in the CLI, and in Angular Material. Fixes angular#6361.
diff --git a/goldens/public-api/core/index.md b/goldens/public-api/core/index.md
@@ -345,6 +345,9 @@ export function createPlatform(injector: Injector): PlatformRef;
 // @public
 export function createPlatformFactory(parentPlatformFactory: ((extraProviders?: StaticProvider[]) => PlatformRef) | null, name: string, providers?: StaticProvider[]): (extraProviders?: StaticProvider[]) => PlatformRef;
 
+// @public
+export const CSP_NONCE: InjectionToken<string | null>;
+
 // @public
 export const CUSTOM_ELEMENTS_SCHEMA: SchemaMetadata;
 
diff --git a/packages/core/src/application_tokens.ts b/packages/core/src/application_tokens.ts
@@ -7,6 +7,7 @@
  */
 
 import {InjectionToken} from './di/injection_token';
+import {getDocument} from './render3/interfaces/document';
 
 /**
  * A [DI token](guide/glossary#di-token "DI token definition") representing a string ID, used
@@ -79,3 +80,35 @@ export const PACKAGE_ROOT_URL = new InjectionToken<string>('Application Packages
  */
 export const ANIMATION_MODULE_TYPE =
     new InjectionToken<'NoopAnimations'|'BrowserAnimations'>('AnimationModuleType');
+
+// TODO(crisbeto): link to CSP guide here.
+/**
+ * Token used to configure the [Content Security Policy](https://web.dev/strict-csp/) nonce that
+ * Angular will apply when inserting inline styles. If not provided, Angular will look up its value
+ * from the `ngCspNonce` attribute of the application root node.
+ *
+ * @publicApi
+ */
+export const CSP_NONCE = new InjectionToken<string|null>('CSP nonce', {
+  providedIn: 'root',
+  factory: () => {
+    // Ideally we wouldn't have to use `querySelector` here since we know that the nonce will be on
+    // the root node, but because the token value is used in renderers, it has to be available
+    // *very* early in the bootstrapping process. This should be a fairly shallow search, because
+    // the app won't have been added to the DOM yet. Some approaches that were considered:
+    // 1. Find the root node through `ApplicationRef.components[i].location` - normally this would
+    // be enough for our purposes, but the token is injected very early so the `components` array
+    // isn't populated yet.
+    // 2. Find the root `LView` through the current `LView` - renderers are a prerequisite to
+    // creating the `LView`. This means that no `LView` will have been entered when this factory is
+    // invoked for the root component.
+    // 3. Have the token factory return `() => string` which is invoked when a nonce is requested -
+    // the slightly later execution does allow us to get an `LView` reference, but the fact that
+    // it is a function means that it could be executed at *any* time (including immediately) which
+    // may lead to weird bugs.
+    // 4. Have the `ComponentFactory` read the attribute and provide it to the injector under the
+    // hood - has the same problem as #1 and #2 in that the renderer is used to query for the root
+    // node and the nonce value needs to be available when the renderer is created.
+    return getDocument().body.querySelector('[ngCspNonce]')?.getAttribute('ngCspNonce') || null;
+  },
+});
diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts
@@ -17,7 +17,7 @@ export {TypeDecorator} from './util/decorators';
 export * from './di';
 export {createPlatform, assertPlatform, destroyPlatform, getPlatform, BootstrapOptions, PlatformRef, ApplicationRef, createPlatformFactory, NgProbeToken, APP_BOOTSTRAP_LISTENER} from './application_ref';
 export {enableProdMode, isDevMode} from './util/is_dev_mode';
-export {APP_ID, PACKAGE_ROOT_URL, PLATFORM_INITIALIZER, PLATFORM_ID, ANIMATION_MODULE_TYPE} from './application_tokens';
+export {APP_ID, PACKAGE_ROOT_URL, PLATFORM_INITIALIZER, PLATFORM_ID, ANIMATION_MODULE_TYPE, CSP_NONCE} from './application_tokens';
 export {APP_INITIALIZER, ApplicationInitStatus} from './application_init';
 export * from './zone';
 export * from './render';
diff --git a/packages/core/test/acceptance/csp_spec.ts b/packages/core/test/acceptance/csp_spec.ts
@@ -0,0 +1,150 @@
+/*!
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, CSP_NONCE, destroyPlatform, ElementRef, inject, ViewEncapsulation} from '@angular/core';
+import {bootstrapApplication} from '@angular/platform-browser';
+import {withBody} from '@angular/private/testing';
+
+describe('CSP integration', () => {
+  beforeEach(destroyPlatform);
+  afterEach(destroyPlatform);
+
+  const testStyles = '.a { color: var(--csp-test-var, hotpink); }';
+
+  function findTestNonces(rootNode: ParentNode): string[] {
+    const styles = rootNode.querySelectorAll('style');
+    const nonces: string[] = [];
+
+    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);
+      }
+    }
+
+    return nonces;
+  }
+
+  it('should use the predefined ngCspNonce when inserting styles with emulated encapsulation',
+     withBody('<app ngCspNonce="emulated-nonce"></app>', async () => {
+       @Component({
+         selector: 'uses-styles',
+         template: '',
+         styles: [testStyles],
+         standalone: true,
+         encapsulation: ViewEncapsulation.Emulated
+       })
+       class UsesStyles {
+       }
+
+       @Component({
+         selector: 'app',
+         standalone: true,
+         template: '<uses-styles></uses-styles>',
+         imports: [UsesStyles]
+       })
+       class App {
+       }
+
+       const appRef = await bootstrapApplication(App);
+
+       expect(findTestNonces(document)).toEqual(['emulated-nonce']);
+
+       appRef.destroy();
+     }));
+
+  it('should use the predefined ngCspNonce when inserting styles with no encapsulation',
+     withBody('<app ngCspNonce="disabled-nonce"></app>', async () => {
+       @Component({
+         selector: 'uses-styles',
+         template: '',
+         styles: [testStyles],
+         standalone: true,
+         encapsulation: ViewEncapsulation.None
+       })
+       class UsesStyles {
+       }
+
+       @Component({
+         selector: 'app',
+         standalone: true,
+         template: '<uses-styles></uses-styles>',
+         imports: [UsesStyles]
+       })
+       class App {
+       }
+
+       const appRef = await bootstrapApplication(App);
+
+       expect(findTestNonces(document)).toEqual(['disabled-nonce']);
+
+       appRef.destroy();
+     }));
+
+
+  it('should use the predefined ngCspNonce when inserting styles with shadow DOM encapsulation',
+     withBody('<app ngCspNonce="shadow-nonce"></app>', async () => {
+       if (!document.body.attachShadow) {
+         return;
+       }
+
+       let usesStylesRootNode!: HTMLElement;
+
+       @Component({
+         selector: 'uses-styles',
+         template: '',
+         styles: [testStyles],
+         standalone: true,
+         encapsulation: ViewEncapsulation.ShadowDom
+       })
+       class UsesStyles {
+         constructor() {
+           usesStylesRootNode = inject(ElementRef).nativeElement;
+         }
+       }
+
+       @Component({
+         selector: 'app',
+         standalone: true,
+         template: '<uses-styles></uses-styles>',
+         imports: [UsesStyles]
+       })
+       class App {
+       }
+
+       const appRef = await bootstrapApplication(App);
+
+       expect(findTestNonces(usesStylesRootNode.shadowRoot!)).toEqual(['shadow-nonce']);
+
+       appRef.destroy();
+     }));
+
+  it('should prefer nonce provided through DI over one provided in the DOM',
+     withBody('<app ngCspNonce="dom-nonce"></app>', async () => {
+       @Component({selector: 'uses-styles', template: '', styles: [testStyles], standalone: true})
+       class UsesStyles {
+       }
+
+       @Component({
+         selector: 'app',
+         standalone: true,
+         template: '<uses-styles></uses-styles>',
+         imports: [UsesStyles]
+       })
+       class App {
+       }
+
+       const appRef = await bootstrapApplication(App, {
+         providers: [{provide: CSP_NONCE, useValue: 'di-nonce'}],
+       });
+
+       expect(findTestNonces(document)).toEqual(['di-nonce']);
+
+       appRef.destroy();
+     }));
+});
diff --git a/packages/core/test/bundling/animations/bundle.golden_symbols.json b/packages/core/test/bundling/animations/bundle.golden_symbols.json
@@ -125,6 +125,9 @@
   {
     "name": "CONTAINER_HEADER_OFFSET"
   },
+  {
+    "name": "CSP_NONCE"
+  },
   {
     "name": "ChangeDetectionStrategy"
   },
@@ -173,6 +176,9 @@
   {
     "name": "DI_DECORATOR_FLAG"
   },
+  {
+    "name": "DOCUMENT"
+  },
   {
     "name": "DOCUMENT2"
   },
diff --git a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json b/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json
@@ -53,6 +53,9 @@
   {
     "name": "CONTAINER_HEADER_OFFSET"
   },
+  {
+    "name": "CSP_NONCE"
+  },
   {
     "name": "ChangeDetectionStrategy"
   },
@@ -89,6 +92,9 @@
   {
     "name": "DI_DECORATOR_FLAG"
   },
+  {
+    "name": "DOCUMENT"
+  },
   {
     "name": "DOCUMENT2"
   },
diff --git a/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json b/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json
@@ -80,6 +80,9 @@
   {
     "name": "CONTAINER_HEADER_OFFSET"
   },
+  {
+    "name": "CSP_NONCE"
+  },
   {
     "name": "ChangeDetectionStrategy"
   },
@@ -125,6 +128,9 @@
   {
     "name": "DI_DECORATOR_FLAG"
   },
+  {
+    "name": "DOCUMENT"
+  },
   {
     "name": "DOCUMENT2"
   },
diff --git a/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json b/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json
@@ -83,6 +83,9 @@
   {
     "name": "CONTAINER_HEADER_OFFSET"
   },
+  {
+    "name": "CSP_NONCE"
+  },
   {
     "name": "ChangeDetectionStrategy"
   },
@@ -131,6 +134,9 @@
   {
     "name": "DI_DECORATOR_FLAG"
   },
+  {
+    "name": "DOCUMENT"
+  },
   {
     "name": "DOCUMENT2"
   },
diff --git a/packages/core/test/bundling/router/bundle.golden_symbols.json b/packages/core/test/bundling/router/bundle.golden_symbols.json
@@ -74,6 +74,9 @@
   {
     "name": "CONTAINER_HEADER_OFFSET"
   },
+  {
+    "name": "CSP_NONCE"
+  },
   {
     "name": "CanActivate"
   },
@@ -152,6 +155,9 @@
   {
     "name": "DI_DECORATOR_FLAG"
   },
+  {
+    "name": "DOCUMENT"
+  },
   {
     "name": "DOCUMENT2"
   },
diff --git a/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json b/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json
@@ -41,6 +41,9 @@
   {
     "name": "CONTAINER_HEADER_OFFSET"
   },
+  {
+    "name": "CSP_NONCE"
+  },
   {
     "name": "ChangeDetectionStrategy"
   },
@@ -77,6 +80,9 @@
   {
     "name": "DI_DECORATOR_FLAG"
   },
+  {
+    "name": "DOCUMENT"
+  },
   {
     "name": "DOCUMENT2"
   },
diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/packages/core/test/bundling/todo/bundle.golden_symbols.json
@@ -53,6 +53,9 @@
   {
     "name": "CONTAINER_HEADER_OFFSET"
   },
+  {
+    "name": "CSP_NONCE"
+  },
   {
     "name": "ChangeDetectionStrategy"
   },
@@ -89,6 +92,9 @@
   {
     "name": "DI_DECORATOR_FLAG"
   },
+  {
+    "name": "DOCUMENT"
+  },
   {
     "name": "DOCUMENT2"
   },
diff --git a/packages/platform-browser/src/browser.ts b/packages/platform-browser/src/browser.ts
@@ -7,7 +7,7 @@
  */
 
 import {CommonModule, DOCUMENT, XhrFactory, ɵPLATFORM_BROWSER_ID as PLATFORM_BROWSER_ID} from '@angular/common';
-import {APP_ID, ApplicationConfig as ApplicationConfigFromCore, ApplicationModule, ApplicationRef, createPlatformFactory, ErrorHandler, Inject, InjectionToken, ModuleWithProviders, NgModule, NgZone, Optional, PLATFORM_ID, PLATFORM_INITIALIZER, platformCore, PlatformRef, Provider, RendererFactory2, SkipSelf, StaticProvider, Testability, TestabilityRegistry, Type, ɵINJECTOR_SCOPE as INJECTOR_SCOPE, ɵinternalCreateApplication as internalCreateApplication, ɵsetDocument, ɵTESTABILITY as TESTABILITY, ɵTESTABILITY_GETTER as TESTABILITY_GETTER} from '@angular/core';
+import {APP_ID, ApplicationConfig as ApplicationConfigFromCore, ApplicationModule, ApplicationRef, createPlatformFactory, CSP_NONCE, ErrorHandler, Inject, InjectionToken, ModuleWithProviders, NgModule, NgZone, Optional, PLATFORM_ID, PLATFORM_INITIALIZER, platformCore, PlatformRef, Provider, RendererFactory2, SkipSelf, StaticProvider, Testability, TestabilityRegistry, Type, ɵINJECTOR_SCOPE as INJECTOR_SCOPE, ɵinternalCreateApplication as internalCreateApplication, ɵsetDocument, ɵTESTABILITY as TESTABILITY, ɵTESTABILITY_GETTER as TESTABILITY_GETTER} from '@angular/core';
 
 import {BrowserDomAdapter} from './browser/browser_adapter';
 import {BrowserGetTestability} from './browser/testability';
@@ -207,7 +207,7 @@ const BROWSER_MODULE_PROVIDERS: Provider[] = [
   {provide: EVENT_MANAGER_PLUGINS, useClass: KeyEventsPlugin, multi: true, deps: [DOCUMENT]}, {
     provide: DomRendererFactory2,
     useClass: DomRendererFactory2,
-    deps: [EventManager, DomSharedStylesHost, APP_ID, REMOVE_STYLES_ON_COMPONENT_DESTROY]
+    deps: [EventManager, DomSharedStylesHost, APP_ID, REMOVE_STYLES_ON_COMPONENT_DESTROY, CSP_NONCE]
   },
   {provide: RendererFactory2, useExisting: DomRendererFactory2},
   {provide: SharedStylesHost, useExisting: DomSharedStylesHost}, DomSharedStylesHost, EventManager,
diff --git a/packages/platform-browser/src/dom/dom_renderer.ts b/packages/platform-browser/src/dom/dom_renderer.ts
diff --git a/packages/platform-browser/src/dom/shared_styles_host.ts b/packages/platform-browser/src/dom/shared_styles_host.ts
diff --git a/packages/platform-server/src/styles_host.ts b/packages/platform-server/src/styles_host.ts

Original file line number	Diff line number	Diff line change
`@@ -125,6 +125,9 @@`
`125`	`125`	`{`
`126`	`126`	`"name": "CONTAINER_HEADER_OFFSET"`
`127`	`127`	`},`
	`128`	`+ {`
	`129`	`+ "name": "CSP_NONCE"`
	`130`	`+ },`
`128`	`131`	`{`
`129`	`132`	`"name": "ChangeDetectionStrategy"`
`130`	`133`	`},`
`@@ -173,6 +176,9 @@`
`173`	`176`	`{`
`174`	`177`	`"name": "DI_DECORATOR_FLAG"`
`175`	`178`	`},`
	`179`	`+ {`
	`180`	`+ "name": "DOCUMENT"`
	`181`	`+ },`
`176`	`182`	`{`
`177`	`183`	`"name": "DOCUMENT2"`
`178`	`184`	`},`
Original file line number	Diff line number	Diff line change
`@@ -53,6 +53,9 @@`
`53`	`53`	`{`
`54`	`54`	`"name": "CONTAINER_HEADER_OFFSET"`
`55`	`55`	`},`
	`56`	`+ {`
	`57`	`+ "name": "CSP_NONCE"`
	`58`	`+ },`
`56`	`59`	`{`
`57`	`60`	`"name": "ChangeDetectionStrategy"`
`58`	`61`	`},`
`@@ -89,6 +92,9 @@`
`89`	`92`	`{`
`90`	`93`	`"name": "DI_DECORATOR_FLAG"`
`91`	`94`	`},`
	`95`	`+ {`
	`96`	`+ "name": "DOCUMENT"`
	`97`	`+ },`
`92`	`98`	`{`
`93`	`99`	`"name": "DOCUMENT2"`
`94`	`100`	`},`
Original file line number	Diff line number	Diff line change
`@@ -80,6 +80,9 @@`
`80`	`80`	`{`
`81`	`81`	`"name": "CONTAINER_HEADER_OFFSET"`
`82`	`82`	`},`
	`83`	`+ {`
	`84`	`+ "name": "CSP_NONCE"`
	`85`	`+ },`
`83`	`86`	`{`
`84`	`87`	`"name": "ChangeDetectionStrategy"`
`85`	`88`	`},`
`@@ -125,6 +128,9 @@`
`125`	`128`	`{`
`126`	`129`	`"name": "DI_DECORATOR_FLAG"`
`127`	`130`	`},`
	`131`	`+ {`
	`132`	`+ "name": "DOCUMENT"`
	`133`	`+ },`
`128`	`134`	`{`
`129`	`135`	`"name": "DOCUMENT2"`
`130`	`136`	`},`
Original file line number	Diff line number	Diff line change
`@@ -83,6 +83,9 @@`
`83`	`83`	`{`
`84`	`84`	`"name": "CONTAINER_HEADER_OFFSET"`
`85`	`85`	`},`
	`86`	`+ {`
	`87`	`+ "name": "CSP_NONCE"`
	`88`	`+ },`
`86`	`89`	`{`
`87`	`90`	`"name": "ChangeDetectionStrategy"`
`88`	`91`	`},`
`@@ -131,6 +134,9 @@`
`131`	`134`	`{`
`132`	`135`	`"name": "DI_DECORATOR_FLAG"`
`133`	`136`	`},`
	`137`	`+ {`
	`138`	`+ "name": "DOCUMENT"`
	`139`	`+ },`
`134`	`140`	`{`
`135`	`141`	`"name": "DOCUMENT2"`
`136`	`142`	`},`
Original file line number	Diff line number	Diff line change
`@@ -74,6 +74,9 @@`
`74`	`74`	`{`
`75`	`75`	`"name": "CONTAINER_HEADER_OFFSET"`
`76`	`76`	`},`
	`77`	`+ {`
	`78`	`+ "name": "CSP_NONCE"`
	`79`	`+ },`
`77`	`80`	`{`
`78`	`81`	`"name": "CanActivate"`
`79`	`82`	`},`
`@@ -152,6 +155,9 @@`
`152`	`155`	`{`
`153`	`156`	`"name": "DI_DECORATOR_FLAG"`
`154`	`157`	`},`
	`158`	`+ {`
	`159`	`+ "name": "DOCUMENT"`
	`160`	`+ },`
`155`	`161`	`{`
`156`	`162`	`"name": "DOCUMENT2"`
`157`	`163`	`},`
Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,9 @@`
`41`	`41`	`{`
`42`	`42`	`"name": "CONTAINER_HEADER_OFFSET"`
`43`	`43`	`},`
	`44`	`+ {`
	`45`	`+ "name": "CSP_NONCE"`
	`46`	`+ },`
`44`	`47`	`{`
`45`	`48`	`"name": "ChangeDetectionStrategy"`
`46`	`49`	`},`
`@@ -77,6 +80,9 @@`
`77`	`80`	`{`
`78`	`81`	`"name": "DI_DECORATOR_FLAG"`
`79`	`82`	`},`
	`83`	`+ {`
	`84`	`+ "name": "DOCUMENT"`
	`85`	`+ },`
`80`	`86`	`{`
`81`	`87`	`"name": "DOCUMENT2"`
`82`	`88`	`},`