JSX treats user input as text, not HTML. For example, the following script tag would be shown as text and not executed:

const MyComponent = () => {
 const content = "<script>alert('XSS')</script>";
 return <div>{content}</div>;
};

You can override this behaviour using dangerouslySetInnerHTML, but only if you know the input source and have sanitised it before injecting it.

const MyComponent = () => {
 const content = "<script>alert('XSS')</script>";
 return <div dangerouslySetInnerHTML={{ __html: content }} />;
};


Related Question