One warning Ember might print in your console concerns binding a property to
the style
attribute of a DOM element, like this:
<div class="progress-bar" style="{{barWidth}}">...</div>
export default Ember.Controller.extend({
progress: 0,
barWidth: Ember.computed('progress', {
return 'width:' + this.get('progress') + '%';
});
});
Handlebars escapes all html content put in double curlies but it does not do
that with CSS, and thus the above makes possible a cross-site scripting attack.
That is the reason for the warning and the fix for that is to convert the
property (in the above case, barWidth
) to a SafeString
, which tells Ember
that the content is safe to display. You should only do that after you have
verified that the content you mark as safe cannot be injected by a malicious
user. The guide describes how to do that:
export default Ember.Controller.extend({
progress: 0,
barWidth: Ember.computed('progress', {
return new Ember.Handlebars.SafeString('width:' + this.get('progress') + '%');
});
});
(Alternatively, you can call Ember.String.htmlSafe
with the string you want to
mark as safe, to the same effect.)
When I did this conversion in a recent project, though, the warning persisted. After spending a substantial amount of time pouring over the docs and even stepping through the warning stacktrace, I still could not find out what was wrong. What helped (as so many times already) was a good night sleep and taking another look at it in the morning.
Marking the string as safe was done correctly, but when binding it to the
style
attribute, I used double quotes around it, probably inhibiting Ember
from seeing it as a SafeString:
<div class="progress-bar" style="{{barWidth}}">...</div>
So all I had to do to make the warning go away was to remove the quotes:
<div class="progress-bar" style={{barWidth}}>...</div>
I hope this saves you some time if you come across a similar situation in your work.