Binding style attribute and Content Security Policy - best practice?

Design
1

I’m wondering if there is any recommendation how to bind a style attributes? attributeBindings: ['style'] and <span style={{style}}> both require CSP policy stile-src: 'unsafe-inline'. On the other hand using jQuery .css() or manipulating CSS Object Model (CSSOM) directly doesn’t feel like “the ember way” and will not work with fastboot.

There is an addon called ember-cli-csp-style which tries to help with a styleBindings property. It manipulates CSSOM directly in latest release. Current master seems to be broken and violations CSP.

I found nearly nothing about this topic even so dozens of ember-addons require stile-src: 'unsafe-inline'…

1 Like
2

Very much interested in that as well!

Looking at ember-cli-csp-style it, it also tries to simplify things when you want to combine lots of different CSS properties into a single style attribute, but I feel it adds to much (observers for every tracked property) for a very simple style binding. And it only works on components using its mixin, but not in the case of <span style={{style}}>

So an ideomatic, CSP safe, Fastboot-friendly way of applying style attributes would be great, in the best case without adding new external dependencies! :slight_smile:

3

Generally, the way to go is to avoid using <span style={{myStyle}}> and use classes instead.

(I agree that it would be neat if it used the CSSOM, avoiding CSP-issues, but I’d guess that would require some pretty big adjustments to Ember)

4

Of course: classes should be used if possible. But there are some cases where classes can’t be used. E.q. for a progress bar in IE 9 or to adjust position of validation icon in bootstrap 3 when using input-groups.

1 Like