Security risk due to inline-style

[Jannis37]

Hi,

I've seen that you are using inline style (e.g. ngStyle) in your Project. As I understood, this leads to a security risk. During the use of certain CSP-headers, the browser blocks the usage of this style definitions anyways. Is there a way to switch this inline-css into css-classes?

[tiberiuzuld]

Hello, Regarding CSP, you can apply a very strict CSP with exception of style-src: unsafe-inline; Angular & Angular Material depend on inline css to work. You can see these issues on angular: https://github.com/angular/angular-cli/issues/21711 https://github.com/angular/angular/issues/6361 https://github.com/angular/angular/issues/26152 https://github.com/angular/angular-cli/issues/20864

So whenever angular fixes this CSP issue, I can adapt the library to work. But all of the above is a theoretical security issue in angular, which they have mitigations, if used properly there is no security issue. Look at https://angular.io/api/platform-browser/DomSanitizer

Regarding this library use of inline style, I think it's safe and conforms to Angular Security https://angular.io/guide/security

On how can be solved not to use ngStyle: Without testing and researching, I think maybe it's possible to introduce some classes for position and use CSS variables, that can be modified from JS world that modify the position of each item. But this is just an idea without testing or researching options.

So till angular fixes they're stuff don't think is anything we can do, besides migrating to another library/framework.