htmlSafe vs {{{ }}}

Question:

In my .hbs files, is there an advantage to passing htmlSafe=true, as opposed to just wrapping the whole thing in tripple braces? Both do the trick.

Eg:

{{t 'onboarding.step2.verifyLink' helpCenterUrl=helpCenterUrl htmlSafe=true}}

vs

{{{t 'onboarding.step2.verifyLink' helpCenterUrl=helpCenterUrl}}}

[jasonmit]

@sbsurf no “built-in” way but this should achieve what you want.

/* app/services/intl.js */
import { assign } from '@ember/polyfills';
import IntlService from 'ember-intl/services/intl';

export default IntlService.extend({
  t(key, options) {
    return this._super(key, assign({ htmlSafe: true }, options));
  }
});

I don’t see a downside to this so long as you trust whoever is authoring translations 😃

[jasonmit]

Triple curlies are really unsafe, take the following example:

{{{t 'home.greet' name='<img src="" onerror="javascript:alert();">'}}}

This will evaluate the entire translation output, including the name argument, as HTML. You’ll see the alert fires.

htmlSafe is different in that it only treats the translation itself, not the argument values, as HTML. Every argument passed into the t helper is then escaped.

{{t 'home.greet' name='<img src="" onerror="javascript:alert();">' htmlSafe=true}}

Would escape name but treat the rest of the translation output as htmlSafe.