This is how the render code looks now (And I know it's unsafe to do so):
render: function() {
return (
<div className="container-fluid pages_container">
<p dangerouslySetInnerHTML={{__html: this.state.page.body}} />
</div>
);
}
The question is how can I render it safely?
To render the html string in react, we can use the dangerouslySetInnerHTML attribute which is a react version of dom innerHTML property. The term dangerously is used here to notify you that it will be vulnerable to cross-site scripting attacks (XSS).
Yes, both Angular and React apps can be (and usually are) "built" to static HTML, CSS and JS.
There're several ways to convert HTML Strings to JSX with React. One way is to put the string in between curly braces in our component. Another way is to put the string in an array with other strings or JSX code. Finally, we can use the dangerouslySetInnerHTML prop render an HTML string as HTML in our component.
JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods. JSX converts HTML tags into react elements.
Reference https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
render: function() {
return (
<div className="container-fluid pages_container">
<p dangerouslySetInnerHTML={{__html: marked(this.state.page.body, {sanitize: true})}} />
</div>
);
}
jsFiddle
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