feat(material): Support CSP, headers with style-src 'self'

[Rugshtyne]

Feature Description

Our current CSP implementation contains style-src 'self' which is not compatible with Angular Material. It would be great that Angular Material would support such CSP headers and, for example, as a solution have a possibility to add CSP nonces or would disable such inline injections. There was already an issue created before but was closed due to inactivity.

We have used 'unsafe-hashes' for some of the styles attributes but now, according to Dutch government, which we have to comply to, these should be removed.

If you think some workaround is possible or a minor fix in a code would do, it would be great to get that information. We could then maybe provide a pull request ourselves.

Use Case

This would enable use of strict CSP headers regarding styles.

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[jelbourn]

Angular itself has this problem: angular/angular#6361

That issue being addressed would be a prereq for components to tackle this.

[Rugshtyne]

@jelbourn I have seen this but having in mind that it's open for around 6 years already is quite concerning. Am I right by saying that Angular Material is using Angular style injection infrastructure? Maybe it's possible to add, for example, nonces as attributes from Angular Material side?

At the moment we're using a custom shared_styles_host implementation but it is a hacky and not future proof way to tackle the issue, especially given the fact that Angular themselves have made some workarounds where they just inject style node into the DOM, bypassing the mentioned host.

[jelbourn]

Am I right by saying that Angular Material is using Angular style injection infrastructure

Yes, Angular Material is built with Angular and shows this issue, the same as any other Angular-authored components. The issue is old, but it has never been a high priority because Google's security engineering team doesn't deem default-src self; style-src unsafe-inline; particularly risky.

[Rugshtyne]

Am I right by saying that Angular Material is using Angular style injection infrastructure

Yes, Angular Material is built with Angular and shows this issue, the same as any other Angular-authored components. The issue is old, but it has never been a high priority because Google's security engineering team doesn't deem default-src self; style-src unsafe-inline; particularly risky.

How about possibility to add, for example, nonces as attributes from Angular Material side?

[jelbourn]

The component library would have to stop using Angular's styles / styleUrls API and manually handle loading component styles, which is really outside the scope of what a component library should be doing.

[Rugshtyne]

The component library would have to stop using Angular's styles / styleUrls API and manually handle loading component styles, which is really outside the scope of what a component library should be doing.

Can you maybe point me to the place where such APIs are used in Angular Material? Maybe I could see some solution or a workaround

[jelbourn]

Can you maybe point me to the place where such APIs are used

It's in every component's @Component decorator. It's the standard way of including styles with an Angular component. There very likely is not an alternative here that will work in the OSS web ecosystem and for our build system inside Google.

[wagnermaciel]

@jelbourn Is this something we would even consider changing on our end? Seems like if this were to be done it would be handled by the framework, right?

[jelbourn]

Yeah, I would really consider this a duplicate of that framework issue.

[wagnermaciel]

Closing as a duplicate of angular/angular#6361

[angular-automatic-lock-bot]

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.}