feat(core): add API to provide CSP nonce for inline stylesheets by crisbeto · Pull Request #49444 · angular/angular

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

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

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

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

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 wants to merge 1 commit intoangular:mainfrom
crisbeto:6361/csp-nonce

crisbeto commented Mar 16, 2023 •

edited

Loading

Uh oh!

crisbeto Mar 16, 2023

Uh oh!

crisbeto Mar 16, 2023

Uh oh!

AndrewKushnir Mar 16, 2023

Uh oh!

jessicajaniuk left a comment •

edited

Loading

Uh oh!

dylhunn left a comment

Uh oh!

alxhub left a comment

Uh oh!

Uh oh!

alan-agius4 Mar 17, 2023

Uh oh!

crisbeto Mar 17, 2023

Uh oh!

pkozlowski-opensource commented Mar 17, 2023

Uh oh!

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

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Conversation

crisbeto commented Mar 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

crisbeto Mar 16, 2023

Choose a reason for hiding this comment

Uh oh!

crisbeto Mar 16, 2023

Choose a reason for hiding this comment

Uh oh!

AndrewKushnir Mar 16, 2023

Choose a reason for hiding this comment

Uh oh!

jessicajaniuk left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dylhunn left a comment

Choose a reason for hiding this comment

Uh oh!

alxhub left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

alan-agius4 Mar 17, 2023

Choose a reason for hiding this comment

Uh oh!

crisbeto Mar 17, 2023

Choose a reason for hiding this comment

Uh oh!

pkozlowski-opensource commented Mar 17, 2023

Uh oh!

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

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

crisbeto commented Mar 16, 2023 •

edited

Loading

jessicajaniuk left a comment •

edited

Loading