Menu
I'm working through the reactjs tutorial but am trying to avoid jsx and use the virtual DOM manually. How do I do the equivalent of
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
816
However, if the application or site accepts multiple users' data input, you should be concerned. However, apart from that, there is one alternative to using dangerouslySetInnerHTML, simply setting innerHTML of a React HTML element using vanilla JS instead.
As the name of the property suggests, it can be dangerous to use because it makes your code vulnerable to cross-site scripting (XSS) attacks. This becomes an issue especially if you are fetching data from a third-party source or rendering content submitted by users.
The name dangerouslySetInnerHTML is intentionally chosen to remind you that it's dangerous and may cause XSS vulnerabilities so that you make sure your HTML is sanitized before you insert it in your react app.
This rule applies when innerHTML prop for a React DOM element is used. innerHTML prop is risky because it is easy to expose your users to a cross-site scripting (XSS) attack.
Found the answer plugging around the source code:
React.DOM.div({ dangerouslySetInnerHTML: {
__html: markdown.makeHtml(this.props.children.toString())
} });
or in coffeescript:
R.div dangerouslySetInnerHTML: __html: markdown.makeHtml @props.children.toString()
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With