I18n and with HTML

Some I18n strings may contain HTML.

In React, the only way to successfully render the HTML within the string is to use dangerouslySetInnerHTML - https://facebook.github.io/react/tips/dangerously-set-inner-html.html

This is labelled for the reason that it could be dangerous, if an attacker is able to manipulate the I18n translation then they could potential render dangerous HTML.

To get around this we could use something like DOMPurify - https://github.com/cure53/DOMPurify

To make it even easier for developers, so they don’t have to worry about it, we could create a I18n helper component which could look like this:

<Message>
  <I18n key="my.key" html={ true } />
</Message>

Under the hood it might look like this

get parseTranslation() {
  return DOMPurify(this.translation);
}

get translation() {
  return I18n.t(this.props.key);
}

get markup() {
  if (this.props.html) {
    return <span dangerouslySetInnerHTML={ this.parseTranslation } />;
  } else {
    return <span>{ this.translation }</span>;
  }
}

render() {
  return this.markup;
}

[toni-sharpe]

rather than just allowing HTML which we could do by using the dangerouslySetInnerHTML we could have a translation use markdown

translation.key = 'lorem ipsum [dolor](http://example.com) sit amet' – some processing – <component>lorem ipsum <a href='http://example.com'>dolor</a> sit amet</component>

I suppose it’s an alternative to DOM sanitisation, but with stricter control over the allowed HTML, i.e. the above example would only allow anchors to be added - a benefit might be that we could control the attributes too which would simplify it for the devs using it.

[edleeks87]

Closing, we have road-mapped plans to explore https://i18next.com