Ember:SafeString和htmlSafe没有删除"绑定样式属性"弃用警告

时间:2015-12-16 14:49:50

标签: ember.js

我试图找出如何消除此警告

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.

控制器:

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

模板:

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

版本:

Ember      : 1.13.7
Ember Data : 1.13.8
jQuery     : 1.11.3

其他尝试过的解决方案......

我也尝试按照http://emberjs.com/deprecations/v1.x/#toc_binding-style-attributes的步骤操作,但是他们并没有详细说明escapeCSS()Ember.Handlebars.SafeString似乎也不是他们的榜样。

在相关的说明中,我可以看到这种情况经常被使用,所以我首先尝试使用模板创建一个帮助器,但没有成功:

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

助手尝试:

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);

我在这里缺少什么?

1 个答案:

答案 0 :(得分:2)

您无法在模板中连接样式:

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

而是将整个样式属性包装在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'),