Input sanitization in ReactJS

Question

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?.

@NguyenThanh can I just give value={sanitize(this.state.name)}, I am getting sanitize not defined error. Do we really need to sanitize?. Would the ReactJS automatically do that for us. — Shamnad P S
– Shamnad P S, Commented Apr 24, 2017 at 10:18
React also prevents xss in urls. stackoverflow.com/questions/59840919 — Shub
– Shub, Commented Sep 9 at 3:38

Nevus · Accepted Answer · 2021-09-16 12:38:01Z

63

It's sanitized by default, you don't need a sanitization method unless you are using dangerouslySetInnerHTML which is not the case.

edited Sep 16, 2021 at 12:38

Nevus

1,4361 gold badge12 silver badges22 bronze badges

answered Apr 24, 2017 at 10:24

dgrijuela

7837 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shamnad P S Over a year ago

Are there any documentation on this?.

dgrijuela Over a year ago

facebook.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."

dgrijuela Over a year ago

@SunnyPatel that would be outside the React DOM so it would need to be sanitized. But do that directly in the backend, never trust what comes from the frontend

viswanath m · Accepted Answer · 2019-02-01 09:18:48Z

9

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.

answered Feb 1, 2019 at 9:18

viswanath m

1011 silver badge2 bronze badges

2 Comments

brainkim Over a year ago

JSX is just a grammar extension to javascript. There is nothing about the JSX spec which mandates sanitization.

Terrabits Over a year ago

From your link: "By default, React DOM escapes any values embedded in JSX before rendering them". I read this to mean react is escaping the values, NOT JSX.

Collectives™ on Stack Overflow

Input sanitization in ReactJS

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related