Is React protected against malicious user inputs?
March 28, 2023
In the React docs, there's this page which has been the source of much confusion over the last few years. Here, React claims that JSX is by default protected against XSS attacks. What does this mean?
What you should understand: React prevents most XSS attacks by default (if used in the standard way). There are still some attack vectors open, but they need you to do something special.
- If you use an escape hatch like
dangerouslySetInnerHtml, and you try to set user input to this, then you are asking for trouble. If you really need to do this (for eg, you want to show the preview of user provided HTML template), use a library like dom-purify to escape stuff. Note: even dom-purify is not foolproof, so if you really need to do this, I suggest digging into the issues (they have provided a way to escape properly too`).
- If you allow user inputs to define arbitary props keys (by spreading user inputs on a component for eg), then they can easily inject a prop like
dangerouslySetInnerHtml, and you are open to attacks.
- Another case when it might be an issue is when doing server side rendering. You often need to to do a
- Another issue could occour when you are passing user input directly to an anchor element's
hrefprop, so a user can potentially use something like
- This goes without saying, but just leaving it here – don't touch the DOM directly in React, unless you know what you are doing. If you do that, all React XSS gurantees are out the window.
An interesting point to note: Angular does escape all URLs by default, which ensures that dynamically-created URLs are safe to use in the application. React does not do this, so if you are passing user input directly to href, you need to do this yourself.
One solution for the href issue is to use a
<SafeLink> component as mentioned in the tweet here:
- About the attack vectors: reactjs - What does it mean when they say React is XSS protected? - Stack Overflow
- About DOM Purify: Preventing XSS in React Applications - DEV Community
- More reading on how to prevent some XSS attack vectors in React when you are doing special stuff (three part series): Preventing XSS in React (Part 1): Data binding and URLs (pragmaticwebsecurity.com)
- Here's a cheatsheet/checklist for React XSS: https://pragmaticwebsecurity.com/files/cheatsheets/reactxss.pdf