CSP violation

[ZebraFlesh]

This component generates a CSP violation using the default ember-cli CSP settings; you need to add a 'style-src': 'unsafe-inline' directive to your server to make it go away.

It looks like the style binding is never updated after component creation, so it could easily be replaced with a CSS class thereby eliminating the CSP violation.

[blimmer]

This is definitely valid, but I'm not sure what the best way to solve this is.

• There's an ember-cli issue about addons better including style into the consuming app. There's no stylesheet we can easily put this in.
• We want the display: none on the main Ember component div, so the introduction of a template wouldn't solve this either.

In my experience, the CSP plugin doesn't produce a ton of valuable, actionable information as is, so I don't know that this is a very important issue to fix.

[ZebraFlesh]

Given that you want it on the tag of the ember component, could you not just add "display" to the list of attributeBindings and then add a display property to the component?

CSP is actually pretty darn useful and this issue prevents this very popular addon from being using in anything other than a CSP reporting mode. Plus the ember-cli-content-security-policy addon has been getting some love lately in order to make it more usable/useful.

[blimmer]

I'm definitely open to trying to fix it, it just wasn't clear to me how to do it after thinking about how to do it for about 10 minutes.

Ember.Component has an isVisible flag, but that doesn't give us the behavior we want (the input isn't rendered so select-2 breaks).

If I were to add display to the list of attribute bindings, you'd get something like:

<input id="ember371" class="ember-view form-control input-md" display="display: hidden;" tabindex="-1" title=""></input>

and display on an <input> is not valid.

I think the best bet is to make use of <input type='hidden'> in this case. I believe that will have the desired effect and shouldn't have unintended consequences. Please see the associated PR.