React.js Vulnerabilities And It’s Solutions That You Should Not Ignore
At a first glance, cybersecurity appears to be intangible. App’s unique features, attractive user interface and smooth performance will be of no use unless it is safe. It is applicable to apps based on React.js too. Most of the businesses are facing issues regarding app security. If you’re also one of them, then you are at the right place. Here we came with some react.js security vulnerabilities and how to fix them? Before digging into it, let’s see some common react.js cyberattacks.
Most Common React.js Cyberattacks-
Each time when React.js is updated, new security flaws emerge that go undiscovered. Hence it is difficult to cover all the possible cyberattacks that React.js may be vulnerable to. Let’s have a look at most common react.js cyberattacks-
- Distributed Denial of Service (DDoS)-
DDoS attacks overwhelm a web app infrastructure with more traffic than it is able to handle. Their main purpose is to make an application inaccessible and unavailable to its users. Some common ways to conduct DDoS attacks are UDP, ICMP, SYN and HTTP request flooding. As an attacker tries to exhaust resources, like memory and CPU processing time, a server and firewall must process every request and respond to it.
- Cross-Site Scripting (XSS)-
Adding malicious scripts into the code of a web app is called XSS. This script gets selected by the browser and interpreted as valid, and then malicious code run as a part of app. XSS attack might allow the attacker to steal user passwords, collect sensitive data from app’s pages, make requests to servers and so on.
- XML External Entity Attack (XXE)-
This kind of attack occur in online apps that employ XML(Extensible Markup Language). Text based language used in web apps to store and organize data. XML parser needs to convert XML into understandable code and XXE injections generally target such parsers. Using XXE, a perpetrator can perform a CSRF or DDoS attack. Here the problem is that XML parsers are vulnerable to XXE by default, hence it’s upto your development team to ensure that the code is free from such vulnerabilities.
- Cross-Site Request Forgery (CSRF)-
To commit CSRF attack, a perpetrator crafts an email or web page that will convince a victim to perform a state-changing request on web app. It can be granting permissions. Generally an attacker exploits links or invisible images to conduct a GET request or a form for PUT or POST request. Javascript code provides a way to craft that requests, but it will be prevented by any modern browser unless it’s allowed on the web app server.
React.js Security Vulnerabilities And It’s Solutions-
Here are some of the most common react.js vulnerabilities- Server side rendering, Dangerous URL schemes, Broken authentication, SQL Injections, DangerouslySetInnerHTML, Escape hatches. Let’s see each one in detail.
1. Server Side Rendering-
Main advantage of React is SSR(server side rendering). This features ensures a faster page load, better performance and ease of incorporating SEO. But it makes react apps prone to attacks. But why? Lots of React apps use Redux for app state management, that uses JSON, lightweight data-interchange format, to set initial app state:
<script>
//WARNING: See the following for security issues around embedding JSON in HTML:
// https://redux.js.org/recipes/server-rendering/#security-considerations window._PRELOADED_STATE__= ${JSON.stringify(preloadedState).replace(/</g, ‘\\u003c’
)}
</script>This is harmful because “JSON. stringify” will not recognize sensitive data or XSS code. Though the above example has code to mitigate simple XSS attacks, it’s not silver bullet by any means. Also, it’s worth mentioning that SSR opens a way for hackers to exploit vulnerabilities in third-party NPM packages.
A solution to this is-
- Use Regular-Expressions
- Use serialize-javascript package
2. Harmful URL Schemes-
When hackers add harmful code starting with Javascript to URLs, links to other pages become harmful. Whenever a user clicks on a link, script in the browser is activated. React.js app security doesn’t restrict use of URLs that don’t start with “HTTP:” or “HTTPS:” and it lacks capabilities to protect against possible attacks.
Solution to this is-
- Avoid the use of URLs as input. Create an application that takes YouTube video ISs instead of YouTube video URLs.
- If the above option is not available, use trusted third-party tools like Sanitize URL NPM package to sanitize these harmful links. Ensure that everyone from the development team is using the same sanitization code.
3. Escape Hatches-
Main advantage of React is, it saves developers time from manually putting data into the browser DOM to render components. But there are some of the cases where programmers require direct access to the DOM elements.
For such cases, react offers escape hatches, like “findDOMNode” and “createRef”. App can manipulate element directly without going through React, because an escape hatch returns the native DOM elements with their full API. It leads to an XSS vulnerability.
Solution to this is-
- When direct output is required, use proper DOM APIs to generate HTML nodes.
- Don’t output the HTML code, only text
- Sanitize data with DOMPurify before putting it into page
