I18n and with HTML
See original GitHub issueSome 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;
}
Issue Analytics
- State:
- Created 8 years ago
- Comments:8 (8 by maintainers)
Top Results From Across the Web
HTML tags in i18next translation - Stack Overflow
I'm using i18next to power i18n for my weblog. It works great on text-only content, but when I try to translate content that...
Read more >Building a super small and simple i18n script in JavaScript
Loop through all HTML elements with a data-i18n attribute and get the translation key. Match the key with an entry in the translation...
Read more >Component interpolation | Vue I18n
The children of i18n functional component are interpolated with locale message of path prop. In the above example: <a :href="url" target="_blank ...
Read more >i18n - MDN Web Docs - Mozilla
Functions to internationalize your extension. You can use these APIs to get localized strings from locale files packaged with your extension ...
Read more >Render html tags with component interpolation #898 - GitHub
It's possible to render html tags with component interpolation? ... A quick fix will be to allow v-html inside the <i18n> component, through...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
rather than just allowing HTML which we could do by using the
dangerouslySetInnerHTML
we could have a translation use markdowntranslation.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.
Closing, we have road-mapped plans to explore https://i18next.com