CODEWITHSUNDEEP
ember.js
greenymaster69
greenymaster69

Reputation: 1516

Escaping CSS string with ember JS not working

like many people (I think), I get warnings in console when binding style attributes to elements in my templates.

For example, I got an ember view containing a div which has this style attribute : 

style="{{view.isClosing}};"

Now, I get the warning that this string is not escapes properly and can makes that vulnerable to XSS attacks.

I went to this link : http://emberjs.com/deprecations/v1.x/#toc_warning-when-binding-style-attributes

And then tried putting this in my view :

isClosing: Ember.computed('display', function () {
    if (this.get('conv.isClosing')) {
        return new Ember.Handlebars.SafeString("display:");
    } else {
        return new Ember.Handlebars.SafeString("display: " + this.get('display'));
    };
}),

The warning does not disappear, and when I try doing it with the function escapeCSS as they say in the doc, it tells me that escapeCSS is not defined. Now what is this function and how should I do it?

Thank you

Upvotes: 3

Views: 1935

Answers (3)

Mithrilhall
Mithrilhall

Reputation: 1502

I believe GJK was correct. Your problem was you included the quotes.

<div style="{{view.isClosing}};">

should have been

<div style={{isClosing}}>

Upvotes: 1

greenymaster69
greenymaster69

Reputation: 1516

So I did it.

Instead of using Ember.String.htmlSafe() method I simply returned a variable equals to "display:;" or "display:none;" with a htmlSafe() call at the end. Still dont know why the Ember method didn't work.

Thank you for your answers.

Upvotes: 0

GJK
GJK

Reputation: 37389

As mentioned in this blog post, you want to use Ember.String.htmlSafe instead of Ember.Handlebars.SafeString.

isClosing: Ember.computed('display', function () {
    if (this.get('conv.isClosing')) {
        return new Ember.String.htmlSafe("display:");
    } else {
        return new Ember.String.htmlSafe("display: " + this.get('display'));
    };
}),

Upvotes: 2

Related Questions