Inline styling prevents application of more secure Content Security Policy

[sloanlipman]

Detailed description

Describe in detail the issue you're having.

I am trying to remove unsafe-inline for the style-src section of my application's content security policy. However, there are about 100 or so cases where there is inline styling in the HTML. Removing this directive from the policy results in the styling failing to render correctly, thus breaking the application flow.

Is this a feature request (new component, new icon), a bug, or a general issue?

General issue

Is this issue related to a specific component?

No, the problem is systemic.

What browser are you working in?

Firefox, Chrome

What version of the Carbon Design System are you using?

carbon-components 10.39.0 carbon-components-angular 4.53.6

[SebTardif]

@sloanlipman Is this related to https://github.com/IBM/carbon-components-angular/issues/1735#issuecomment-1155852201

[Akshat55]

I don't think this is something that can be addressed as of today. This would require breaking changes & there are cases that will make things more complicated & hard to maintain. Inline-style SCP has been an issue since 2016 and has been mentioned in official Angular documentation.

This issue seems to impact material as well... I don't think this issue for CCA is going to be addressed anytime soon - at least for the complex components that has this issue (Any component using dialog service or placeholder service - combobox, dropdown, etc, context menu). For these components, we update the position via inline styles - there are other components that were introduced in v11 like the progress bar which updates the progress using inline styles 🤔