feat(core): add API to provide CSP nonce for inline stylesheets #49444
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
crisbeto
commented
Mar 16, 2023
Member
Author
There was a problem hiding this comment.
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.
89cb863 to
39e76a2
Compare
5e3b71e to
92db19c
Compare
crisbeto
commented
Mar 16, 2023
Member
Author
There was a problem hiding this comment.
This uses @Inject instead of inject, because we had a bunch of tests that were constructing classes manually which lacked a DI context.
Contributor
There was a problem hiding this comment.
JFYI, the ServerStyleHost is being removed in #49424, so we'll need to update the location of this logic.
jessicajaniuk
approved these changes
Mar 16, 2023
Contributor
There was a problem hiding this comment.
Aside from @AndrewKushnir's comment, this looks good to me
reviewed-for: fw-core, fw-platform-server, public-api
dylhunn
approved these changes
Mar 16, 2023
Contributor
dylhunn
left a comment
There was a problem hiding this comment.
reviewed-for: public-api
crisbeto
added a commit
to crisbeto/angular-cli
that referenced
this pull request
Mar 17, 2023
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).
92db19c to
7831a7a
Compare
alan-agius4
reviewed
Mar 17, 2023
alan-agius4
reviewed
Mar 17, 2023
Contributor
There was a problem hiding this comment.
OOC, does closure minify this property?
Member
Author
There was a problem hiding this comment.
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.
7831a7a to
e47f42c
Compare
Member
|
This PR was merged into the repository by commit 17e9862. |
crisbeto
added a commit
to crisbeto/angular-cli
that referenced
this pull request
Mar 20, 2023
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).
angular-robot bot
pushed a commit
to angular/angular-cli
that referenced
this pull request
Mar 20, 2023
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).
alan-agius4
added a commit
to alan-agius4/universal
that referenced
this pull request
Mar 30, 2023
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
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
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
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
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
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
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
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
Companion change to angular/angular#49444. That adds support to add nonce attributes on inline styles
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
7 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
nonceattribute 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_NONCEinjection 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 anngCspNonceattribute on the app's root node instead. The latter approach is provided as a convenience for apps that render theindex.htmlthrough 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.