Input sanitization in ReactJS
Solution 1
It's sanitized by default, you don't need a sanitization method unless you are using dangerouslySetInnerHTML which is not the case.
Solution 2
JSX expressions {} automatically take care of encoding HTML before rendering, which means even if u don't sanitise your input your webpage is XSS safe.
Please refer to this DOC in react site: jsx-prevents-injection-attacks
Note: If you want your user to allow typing in HTML.. then you need input Sanitisation and you have to use dangerouslySetInnerHTML as @dgrijuela mentioned in the above post.
Shamnad P S
Software Engineer working in Java Spring MVC Framework. Beginner at Spring Integration.
Updated on September 17, 2021Comments
-
Shamnad P S over 2 years
I am using ReactJS do develop a simple chat application. Could someone help me to sanitize the input . There is only one input text box to send chat messages. How to sanitize it?.
<input type="text" className="chat" value={this.state.name} />
Based on the documentations HTML escapes html by default. Is it enough?. Do I need to add any other sanitization methods. If yes, please let me know how to do that?.
-
Shamnad P S about 7 yearsAre there any documentation on this?.
-
dgrijuela about 7 yearsfacebook.github.io/react/docs/… "By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks."
-
brainkim over 4 yearsJSX is just a grammar extension to javascript. There is nothing about the JSX spec which mandates sanitization.