Support strict CSP policies for style-src 'self'

[lightswitch05]

Feature Request

Angular material is currently incompatible with a strict Content Security Policy (CSP) of style-src 'self';. The most strict CSP policy for style-src that I've been able to use with Angular Material is style-src 'self' 'unsafe-inline';, which isn't terrible, but still gets flagged on security scanners like https://csp-evaluator.withgoogle.com

It would be nice if Angular Material could become compatible with strict CSPs. What it would mean is removing any in-line style tags, such as the one in checkbox.html

Questions

• Given the nature of this project and its heavy use of dynamic styling, is this even possible?
• Does the material team have any interest in avoiding in-line style tags?

[jelbourn]

@lightswitch05 does this apply to [style.xxx] bindings as well?

[lightswitch05]

@jelbourn great question, I'm not sure. I guess I need to put together a test page to see what is allowed and what isnt

[jelbourn]

I suspect it doesn't, since Angular converts those into JS instructions, but it would be good to make sure. The static ones should be pretty trivial to convert to css classes.

[lightswitch05]

I thought this was limited to Material, however in trying to setup some basic example pages I found the issue goes to the core of Angular, so this ticket is no longer relevant.

Any bare basics angular page with a strict style CSP fails. [source] [example]

Looks like its a known issue: angular/angular#6361

[sheariley]

No offense @lightswitch05 , I have to disagree. You have a choice to define your styles globally and with the extract-css option set to true, you can turn off inline styles for the consuming application's components. I've used Angular Elements to successfully bootstrap an Angular component in a .NET Core MVC app that has style-src 'self';. However, when I try to use an Angular Material component, I get the old Refused to apply inline style because it violates the following Content Security Policy directive error for the mat-form-field, mat-input, mat-icon, etc... styles.

My question is why are the Angular Material components inlining the styles when I'm using the Angular Material SASS API to generate the styles anyways? If its possible, I'd recommend centralizing (moving) those inline styles into the SASS API that is already established. This would resolve the CSP issue and allow developers, such as myself, to use Angular Material components in more restrictive environments.

P.S. I am a fairly capable front-end developer and would be glad to contribute some time to help resolve this issue.

[sheariley]

After looking at the code a bit, I understand how the styles are separated. The styles generated by the SASS API are more theme-related and the inline component styles are more layout related. However, I still think centralizing the styles has its merits. The theme API could import the component style files from their current location to keep it maintainable and to keep the styles close to their related component files.

[sheariley]

It looks like most of the components are already using ViewEncapsulation.None and at a glance it seems like it would take a relatively small amount of effort to make this happen.

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