Binding style attributes warning still popping up with safe string

1

I have a computed property called barWidth that returns a safe string.

 return new Ember.Handlebars.SafeString('width:'+progress+'%');

It’s bound to a style of an HTML element in handlebars.

<div class="progress" style="{{barWidth}}">

It all works fine, but I have this warning popping up in my console.

“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 Ember.js - Deprecations”

According to the given URL…

Once you have verified that the content being displayed is trusted and properly escaped, you can disable the warning by making the content a SafeString.

Well apparently, it doesn’t. Any clues?

2

I’m running into the same and have tried several things but the message keeps popping up. What’s the best practise here?

3

Change that to:

<div class="progress" style={{barWidth}}>

The reason the initial version still triggers the warning is that quoting an attribute automatically calls concat on the parameters (even though in this case there is only one). We can likely make the internal HTMLBars concat utility smart enough to return the first param if there is only one (as in this example).

5 Likes
4

Dropping the quotes worked, Ember no longer throws a warning. I now see that the example in the deprecation guide also has no quotes. I overlooked it before. Thanks @rwjblue!

5

Yes, that did it! Thank you.

6

Thanks for that! The documentation didn’t make that explicitly clear and I was scratching my head for a while

7

Thanks, this worked!

8

So it seems that it’s not possible to do something like this without warnings ?

<div style="width: {{width}}px; background-color: {{color}};"></div>
9

You can do that without warnings:

  • make a CP that does the concatenating and return a SafeString
  • make a helper that converts a string into a safe string (Ember already has an internal -html-safe helper that I think we should make public in some fashion) and use that along with concat helper in the template.
1 Like
10

An example of the second option would be:

<div style={{-html-safe (concat "width: " width "px; background-color: " color ";")}}></div>
1 Like
11

Thanks ! I thinks this usage should be obvious. So I vote for a public -html-safe helper !

12

This is very cool. Thanks for the tip.

13 
/* app/helpers/-html-safe.js */
import Ember from 'ember';

export default Ember.Helpers.helper(([input]) => {
  return new Ember.Handlebars.SafeString(input);
});