Give Your React Native Apps a Titanium Shield Against Vulnerabilities

React Native is a popular and exciting framework to build robust mobile applications. React Native allows you to build cross-platform, rich UI apps that almost looks like native apps. It offers less complexity building new apps in short amount of time and ultimately with great savings at cost as well. Oh, and did I mention the smaller learning curve? That’s a big win from my perspective. All of these perks are offered as React Native is built on great JavaScript components. However, just like any JavaScript based frameworks, it is vulnerable to attacks compromising confidentiality, data availability and unauthorized access to the data as well as systems. We will cover a number of strategies to protect against the most common React Native vulnerabilities and prevent possible attacks.

4 Common React Native Vulnerabilities:

XSS Vulnerabilities

Apps using WebViews may have higher chances of cross site scripting attacks as it takes standard HTML as a source.

A few examples of XSS attacks areas are:

• <a href=“attackerControlledURL” >Click here!</a>
• <form action={data} />

We can create a validateURL check before using it or sanitize the data that’s being posted to guard against the XSS attacks listed above.

function validateURL(url){
  return url.contains("https:\\mydomainonly.com") ? true : false
}

SQL Injection

This is a very common type of attack where the hacker can inject the SQL code to the database. With respect to the React Native practices, this could occur where developers may have exposed vulnerability unknowingly.

To avoid such attacks:

• Always use sanitized input
  • Check empty/ null values before doing SQL operations. We can also leverage the validator library to sanitize inputs
• Maintain whitelist with strict guidelines
  • Maintain REGEX or list of allowed characters in a constants file
• Escape all incoming user inputs
  • Escape the quotes, backslash, space, etc
• Submit the API payload with matching API schemas only
  • Define API data schema and validate data against it before submitting to the API using Formik

Weak Authentication

Choosing a Global Software Development Partner to Accelerate Your Digital Strategy

To be successful and outpace the competition, you need a software development partner that excels in exactly the type of digital projects you are now faced with accelerating, and in the most cost effective and optimized way possible.

Get the Guide

Improper or weak authentication can result in unmanaged sessions left open or critical data left accessible on a device. Weak Passwords and usernames can potentially be exploited.

Areas of improvement:

• Secure the password using SHA-256 or 512 one way hash algorithms with 1000 times iterations along with a salt
• Enforce session timeouts
• Implement Multi Factor Authentication (MFA)
• Until MFA is performed don’t  disclose any PII or PHI data
• Clear any saved data from device upon session timeout or logout

Dependency Vulnerabilities

React Native receives extensive contributions from communities around the globe. Online libraries like NPM, Yarn have great sets of ready to use packages that developers can import into their solution. This can streamline the development lifecycle to deploy sooner. While this is a great advantage, it may also pose a risk of vulnerability into our App when these packages aren’t maintained well.

For example, we are using the package ‘abc’, which uses “Hermes-Engine 0.5.2.” However, the library hasn’t been updated since initial release. The “Hermes-Engine 0.5.2” has created a potential exposure to XSS vulnerabilities. Since that ‘abc’ package is consumed in our App, it may expose the same risk.

Another example, React-Native-Webview versions older than 11.0.0. This allows the use of any arbitrary URL, which can be exploited to redirect to another Web Site entirely. To guard against this threat, the App using this package must upgrade to the latest version of the React-Native-Webview.

Ensure Third Party Package Integrity with the following:

• Always analyze the package to verify it is maintained and doesn’t have any known vulnerabilities
• Regularly update the third party packages/ libraries in our solution
• Frequently(Bi-weekly/ Monthly) run static code scans using available tools such as Snyk, SonarQube, WhiteHat to identify potential issues 

Bonus Tip:  To fix vulnerabilities without waiting for third party library updates, patch-package will help you put a band-aid on the solution in the meantime.   

Wrapping up

We went over some of the known React Native vulnerabilities and safeguarding methods against them. Although React and React Native have strong developer communities, there can be delays in addressing the issues from library providers. App security is important and I am hoping this article provides a base-level understanding of React Native vulnerabilities and few ways to avoid them. These security practices should always be in the back of your mind. 

Perficient’s React Native Expertise

The Perficient Mobile Solutions team has extensive experience building mobile Apps on React Native. For more information about Perficient’s Mobile Solutions expertise, subscribe to our blog or contact our Mobile Solutions team today!