Binding style attributes warning

[zyllorion]

WARNING: Binding style attributes may introduce cross-site scripting vulnerabilities; please ensure that values being bound are properly escaped. For more information, including how to disable this warning, see http://emberjs.com/deprecations/v1.x/#toc_binding-style-attributes.

Unfortunately there doesn't seem to be a way to disable the warning on the link given.

Code for escapeCSS is not given so I cannot use this and should not need to as it is just a calculated RGB value.

I do return a ().htmlSafe()

Thanks.

[rwjblue]

Can you please provide a demo JSBin so we can help you a bit better here?

[bantic]

Here's a demo jsbin showing this behavior. Using a computed property inside a style string generates this warning even if the value of the CP is a safe string.

Ember.set('color', Ember.String.htmlSafe('blue');
<div style="color: {{color}};"></div> // generates console warning

Ember.set('myStyle', Ember.String.htmlSafe("color: blue;"));
<div style={{myStyle}}></div> // no console warning
<div style="{{myStyle}}"></div> // does show console warning

[rwjblue]

Yes, @bantic is correct. You can return a SafeString from a CP and use that unquoted in the template to avoid a warning, but if you quote the property it will trigger this warning. We would like to avoid this warning when concatenating all safe strings, but that will have to occur in a future version....

[mixonic]

Specifically, we would accept a patch that causes <div style="{{mySafeStyle}}"></div> to be treated as "safe". However <div style="color: {{mySafeColor}};"></div> should remain unsafe. It can probably get a better error message though.

[luxzeitlos]

@mixonic why would <div style="color: {{mySafeColor}}; width:{{mySafeWidth}};"></div> be unsafe? Seems like an unnecessary limitation to me.

[mixonic]

@luxferresum to know that mySafeColor is a color and that color is escaped/validated a certain way means we must parse CSS. Just like to know <a href={{foo}}> doesn't contain an XSS attack Ember parses HTML according to the spec and ensures the contents of foo are escaped properly. After parsing we need analysis for what properties (like background-url) have vulnerabilities and what they are so we can provide test cases.

It is just a big problem, and needs a champion to own it and execute.

[luxzeitlos]

@mixonic Well that would be awesome, but its only true if mySafeColor is not a safe string.
I think if {{mySafeColor}} is the result of Ember.String.htmlSafe() there should be no warning at all. Same with {{{mySafeColor}}}.

[Serabe]

Just think that, in general, the concatenation of two safe strings does not need to be a safe string. This currently happens in code too:

If you were to move that to a property, you would need to mark the final string as safe, even if you don't think it is needed.

I think Ember should fall on the safe side and the only case where a safe string can be guaranteed to still be a safe string is in the <div style="{{foo}}"/> case.

[luxzeitlos]

It's an unnecessary warning, it works, and people like me will just go with the warning if there is no easy way around. Building the entire style property in JS is not really a fancy solution.

Also isn't that what @rwjblue said?

We would like to avoid this warning when concatenating all safe strings, but that will have to occur in a future version....

That two safe strings are a normal string is normal and a JS limitation. There is no way to overload +. A safe string is always safe. By creating a safe string you basically say "I know this is safe, believe me" to your framework. If you can't say this to your framework its highly annoying.