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

crisbeto · 2023-03-16T12:39:49Z

Angular uses inline styles to insert the styles associated with a component. This violates the strict styles Content Security Policy 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 #6361.

crisbeto · 2023-03-16T12:40:36Z

packages/platform-server/src/styles_host.ts


  constructor(@Inject(DOCUMENT) doc: any, @Inject(APP_ID) private appId: string) {
    super();
-    this.head = doc.getElementsByTagName('head')[0];
+    this.head = doc.head || doc.getElementsByTagName('head')[0];


Unrelated change, I just saw that we could get the head directly without querying the DOM. I left the old approach as a fallback in case it was there as a workaround for Domino.

crisbeto · 2023-03-16T15:03:35Z

packages/platform-browser/src/dom/dom_renderer.ts

@@ -91,7 +91,8 @@ export class DomRendererFactory2 implements RendererFactory2, OnDestroy {
  constructor(
      private eventManager: EventManager, private sharedStylesHost: DomSharedStylesHost,
      @Inject(APP_ID) private appId: string,
-      @Inject(REMOVE_STYLES_ON_COMPONENT_DESTROY) private removeStylesOnCompDestory: boolean) {
+      @Inject(REMOVE_STYLES_ON_COMPONENT_DESTROY) private removeStylesOnCompDestory: boolean,
+      @Inject(CSP_NONCE) @Optional() private nonce?: string|null) {


This uses @Inject instead of inject, because we had a bunch of tests that were constructing classes manually which lacked a DI context.

AndrewKushnir · 2023-03-16T16:04:20Z

packages/platform-server/src/styles_host.ts

@@ -7,26 +7,35 @@
 */

 import {DOCUMENT, ɵgetDOM as getDOM} from '@angular/common';
-import {APP_ID, Inject, Injectable} from '@angular/core';
+import {APP_ID, CSP_NONCE, Inject, Injectable, Optional} from '@angular/core';
 import {ɵSharedStylesHost as SharedStylesHost} from '@angular/platform-browser';

 @Injectable()
 export class ServerStylesHost extends SharedStylesHost {


JFYI, the ServerStyleHost is being removed in #49424, so we'll need to update the location of this logic.

jessicajaniuk

Aside from @AndrewKushnir's comment, this looks good to me

reviewed-for: fw-core, fw-platform-server, public-api

dylhunn

reviewed-for: public-api

alxhub

Reviewed-for: public-api

Companion change to angular/angular#49444. Adds an HTML processor that finds the `ngCspNonce` attribute and copies its value to any inline `style` tags in the HTML. The processor runs late in the processing pipeline in order to pick up any `style` tag that might've been added by other processors (e.g. critical CSS).

packages/platform-browser/src/dom/shared_styles_host.ts

alan-agius4 · 2023-03-17T11:37:22Z

packages/platform-browser/src/dom/shared_styles_host.ts

@@ -149,6 +150,11 @@ export class SharedStylesHost implements OnDestroy {
  private addStyleToHost(host: Node, style: string): void {
    const styleEl = this.getStyleElement(host, style);

+    if (this.nonce) {
+      // Uses a keyed write to avoid issues with property minification.


OOC, does closure minify this property?

I'm not sure, but I wanted to keep it safe since I've seen it minify things like el.style.foo before.

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.

pkozlowski-opensource · 2023-03-17T13:08:23Z

This PR was merged into the repository by commit 17e9862.

Companion change to angular/angular#49444. Adds an HTML processor that finds the `ngCspNonce` attribute and copies its value to any inline `style` tags in the HTML. The processor runs late in the processing pipeline in order to pick up any `style` tag that might've been added by other processors (e.g. critical CSS).

Companion change to angular/angular#49444. That adds support to add nonce attributes on inline styles

angular-automatic-lock-bot · 2023-04-17T00:08:28Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

angular-robot bot added the detected: feature PR contains a feature commit label Mar 16, 2023

crisbeto commented Mar 16, 2023

View reviewed changes

crisbeto force-pushed the 6361/csp-nonce branch from 89cb863 to 39e76a2 Compare March 16, 2023 12:59

crisbeto added action: review The PR is still awaiting reviews from at least one requested reviewer area: core Issues related to the framework runtime target: major This PR is targeted for the next major release labels Mar 16, 2023

ngbot bot modified the milestone: Backlog Mar 16, 2023

crisbeto modified the milestones: Backlog, v16-candidates Mar 16, 2023

crisbeto force-pushed the 6361/csp-nonce branch 3 times, most recently from 5e3b71e to 92db19c Compare March 16, 2023 14:43

crisbeto commented Mar 16, 2023

View reviewed changes

crisbeto marked this pull request as ready for review March 16, 2023 15:03

pullapprove bot requested a review from jessicajaniuk March 16, 2023 15:04

AndrewKushnir reviewed Mar 16, 2023

View reviewed changes

jessicajaniuk approved these changes Mar 16, 2023

View reviewed changes

pullapprove bot requested review from alxhub, jessicajaniuk and pkozlowski-opensource March 16, 2023 16:46

jessicajaniuk removed their request for review March 16, 2023 16:49

pullapprove bot requested a review from dylhunn March 16, 2023 16:49

dylhunn approved these changes Mar 16, 2023

View reviewed changes

alxhub approved these changes Mar 16, 2023

View reviewed changes

crisbeto removed the request for review from pkozlowski-opensource March 17, 2023 05:51

crisbeto added action: merge The PR is ready for merge by the caretaker and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Mar 17, 2023

crisbeto force-pushed the 6361/csp-nonce branch from 92db19c to 7831a7a Compare March 17, 2023 09:53

alan-agius4 reviewed Mar 17, 2023

View reviewed changes

packages/platform-browser/src/dom/shared_styles_host.ts Outdated Show resolved Hide resolved

alan-agius4 reviewed Mar 17, 2023

View reviewed changes

crisbeto force-pushed the 6361/csp-nonce branch from 7831a7a to e47f42c Compare March 17, 2023 11:47

pkozlowski-opensource closed this in 17e9862 Mar 17, 2023

crisbeto mentioned this pull request Mar 19, 2023

feat(@angular-devkit/build-angular): add CSP support for inline styles angular/angular-cli#24880

Merged

alan-agius4 mentioned this pull request Mar 30, 2023

feat(@nguniversal/common) add CSP support for inline styles angular/universal#3063

Merged

alan-agius4 added a commit to alan-agius4/universal that referenced this pull request Mar 30, 2023

feat(@nguniversal/common) add CSP support for inline styles

92d14ec

Companion change to angular/angular#49444. That adds support to add nonce attributes on inline styles

alan-agius4 added a commit to alan-agius4/universal that referenced this pull request Mar 30, 2023

feat(@nguniversal/common): add CSP support for inline styles

b430535

Companion change to angular/angular#49444. That adds support to add nonce attributes on inline styles

alan-agius4 added a commit to alan-agius4/universal that referenced this pull request Mar 30, 2023

feat(@nguniversal/common): add CSP support for inline styles

5df673f

Companion change to angular/angular#49444. That adds support to add nonce attributes on inline styles

alan-agius4 added a commit to alan-agius4/universal that referenced this pull request Mar 30, 2023

feat(@nguniversal/common): add CSP support for inline styles

e7c36a3

Companion change to angular/angular#49444. That adds support to add nonce attributes on inline styles

alan-agius4 added a commit to alan-agius4/universal that referenced this pull request Mar 31, 2023

feat(@nguniversal/common): add CSP support for inline styles

b94a5d9

Companion change to angular/angular#49444. That adds support to add nonce attributes on inline styles

alan-agius4 added a commit to alan-agius4/universal that referenced this pull request Mar 31, 2023

feat(@nguniversal/common): add CSP support for inline styles

3f534ec

Companion change to angular/angular#49444. That adds support to add nonce attributes on inline styles

alan-agius4 added a commit to alan-agius4/universal that referenced this pull request Mar 31, 2023

feat(@nguniversal/common): add CSP support for inline styles

d652f0b

Companion change to angular/angular#49444. That adds support to add nonce attributes on inline styles

alan-agius4 added a commit to alan-agius4/universal that referenced this pull request Mar 31, 2023

feat(@nguniversal/common): add CSP support for inline styles

789932b

Companion change to angular/angular#49444. That adds support to add nonce attributes on inline styles

alan-agius4 added a commit to angular/universal that referenced this pull request Mar 31, 2023

feat(@nguniversal/common): add CSP support for inline styles

9fbdb23

Companion change to angular/angular#49444. That adds support to add nonce attributes on inline styles

angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

crisbeto commented Mar 16, 2023 •

edited

crisbeto Mar 16, 2023

crisbeto Mar 16, 2023

AndrewKushnir Mar 16, 2023

jessicajaniuk left a comment •

edited

dylhunn left a comment

alxhub left a comment

alan-agius4 Mar 17, 2023

crisbeto Mar 17, 2023

pkozlowski-opensource commented Mar 17, 2023

angular-automatic-lock-bot bot commented Apr 17, 2023

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

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

Conversation

crisbeto commented Mar 16, 2023 • edited

crisbeto Mar 16, 2023

Choose a reason for hiding this comment

crisbeto Mar 16, 2023

Choose a reason for hiding this comment

AndrewKushnir Mar 16, 2023

Choose a reason for hiding this comment

jessicajaniuk left a comment • edited

Choose a reason for hiding this comment

dylhunn left a comment

Choose a reason for hiding this comment

alxhub left a comment

Choose a reason for hiding this comment

alan-agius4 Mar 17, 2023

Choose a reason for hiding this comment

crisbeto Mar 17, 2023

Choose a reason for hiding this comment

pkozlowski-opensource commented Mar 17, 2023

angular-automatic-lock-bot bot commented Apr 17, 2023

crisbeto commented Mar 16, 2023 •

edited

jessicajaniuk left a comment •

edited