Unescape HTML in Ember helpers

Question

I have the following helper in my Ember app:

Ember.Handlebars.helper "social_profiles", ((person) ->
  person.social_profiles.map (item) ->
    " <a href=''> #{item.type_name}</a>"
), "social_profiles"

Each time I call the helper it returns an escaped string, but I would like ember to show HTML links.

How can I achieve that?

Answer 1

You can mark a string as safe with new Handlebars.SafeString("<b>hello world</b>"). Handlebars will not escape any of the input now.

However, you need to be sure that your string is safe. Since you are passing in item.type_name that could contain malicious code that would not be caught since you are declaring the string as safe.

In order to solve this, first your escape the user input, then wrap it in an tag marked for safe.

Example:

Ember.Handlebars.registerHelper('boldItem', function(item) {
  var escaped = Handlebars.Utils.escapeExpression(item);
  return new Handlebars.SafeString("<b>" + escaped + "</b>");
});