CODEWITHSUNDEEP
polymer
Love Sharma
Love Sharma

Reputation: 1999

Not able to render HTML from custom filter in Polymer

I am trying to prepare sentence using html tags, but it fails to render HTML, instead it display with escape characters.

<p>
    {{ activity | prepareSentence }}
</p>

Created custom filter to use in polymer template.

prepareSentence: function(activity) {
    var sentence = [];
    if (1) {
        sentence.push('<a href="/user/'
            + activity.from_user.entity_id + '/'
            + activity.from_user.name + '">You</a>');
        sentence.push(' are following ');
        sentence.push('<a href="/user/'
            + activity.to_entity.entity_id + '/'
            + activity.to_entity.name + '">'
            + activity.to_entity.name + '</a>');
    }
    return sentence.join(' ');
}

Current Output:

<a href="/user/22/name1">name1</a> are following <a href="/user/21/name2">name2</a>

Expected Output:

[You][1] are following [name2][1]

Upvotes: 0

Views: 111

Answers (1)

Scott Miles
Scott Miles

Reputation: 11027

The TemplateBinding subsystem contains an HTML filter to protect developers against XSS attacks. Therefore, inserting HTML (as opposed to plain text) into DOM has to be done manually.

For example:

<p id="sentence"></p>
...
activityChanged: function(old, activity) {
   // build html
   this.$.sentence.innerHTML = html;
}

You now have a vulnerability, so make sure you screen the source data.

Upvotes: 1

Related Questions