CODEWITHSUNDEEP
ember.js
bitsoflogic
bitsoflogic

Reputation: 1224

Ember: SafeString and htmlSafe not removing "Binding style attributes" deprecation warning

I'm trying to figure out how to eliminate this warning

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.

Controller:

percentComplete: function() {
  var percent = this.get('numProcessed') / this.get('numToDo') * 100;
  return percent.toString().htmlSafe();
}.property('numProcessed', 'numToDo')

Template:

<div style="width:{{percentComplete}}"></div>

Versions:

Ember      : 1.13.7
Ember Data : 1.13.8
jQuery     : 1.11.3

Other attempted solutions...

I've also tried following the steps at http://emberjs.com/deprecations/v1.x/#toc_binding-style-attributes however they don't elaborate on escapeCSS() nor does the Ember.Handlebars.SafeString seem to work from their example.

On a related note, I could see this being used often, so I first tried creating a helper with the template looking like this without success:

<div style="width:{{safe-css percentComplete}}"></div>

Helper attempts:

return Ember.String.htmlSafe(params[0]);
return Ember.Handlebars.SafeString(params[0]);

var safeInput = Ember.Handlebars.Utils.escapeExpression(params[0]);
return new Ember.String.htmlSafe(safeInput);

What am I missing here?

Upvotes: 0

Views: 1234

Answers (1)

bitsoflogic
bitsoflogic

Reputation: 1224

You cannot concatenate the style in the template:

<div style="width: {{percentComplete}}"></div>

Instead, wrap the entire style attribute in htmlSafe

<!-- Template -->
<div style={{percentCompleteCss}}></div>

// Controller
percentCompleteCss: function() {
  var num = this.get('numProcessed') / this.get('numToDo') * 100;
  return ('width: ' + num.toString() + '%').htmlSafe();
}.property('numProcessed', 'numToDo'),

Upvotes: 3

Related Questions