# Binding style attribute and Content Security Policy - best practice?

**URL:** https://discuss.emberjs.com/t/binding-style-attribute-and-content-security-policy-best-practice/10921
**Category:** Design
**Created:** [June 13, 2016, 10:09pm UTC](https://discuss.emberjs.com/t/binding-style-attribute-and-content-security-policy-best-practice/10921 "2016-06-13T22:09:50Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![jelhan](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jelhan/32/16917_2.png) [@jelhan](https://discuss.emberjs.com/u/jelhan)
#### Post date: [June 13, 2016, 10:09pm UTC](https://discuss.emberjs.com/t/binding-style-attribute-and-content-security-policy-best-practice/10921/1 "2016-06-13T22:09:50Z")

</div>

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](https://github.com/BryanCrotaz/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'`…

---

<div class="post-metadata">

### Author: ![simonihmig](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/simonihmig/32/13851_2.png) [@simonihmig](https://discuss.emberjs.com/u/simonihmig)
#### Post date: [June 14, 2016, 8:40am UTC](https://discuss.emberjs.com/t/binding-style-attribute-and-content-security-policy-best-practice/10921/2 "2016-06-14T08:40:38Z")

</div>

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! 🙂

---

<div class="post-metadata">

### Author: ![sandstrom](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/sandstrom/32/15173_2.png) [@sandstrom](https://discuss.emberjs.com/u/sandstrom)
#### Post date: [June 19, 2016, 7:08pm UTC](https://discuss.emberjs.com/t/binding-style-attribute-and-content-security-policy-best-practice/10921/3 "2016-06-19T19:08:05Z")

</div>

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)

---

<div class="post-metadata">

### Author: ![jelhan](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jelhan/32/16917_2.png) [@jelhan](https://discuss.emberjs.com/u/jelhan)
#### Post date: [June 20, 2016, 7:20am UTC](https://discuss.emberjs.com/t/binding-style-attribute-and-content-security-policy-best-practice/10921/4 "2016-06-20T07:20:56Z")

</div>

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.