Building Security Driven Apps with React Native

Application security is something that we shouldn't take lightly. In most apps, users provide sensitive data, correspondingly making the application more vulnerable to attacks. Therefore, we as developers need to think about React Native Security.

React Native is a growing and preferred technology for mobile app development due to its unmatched ease in application development for multiple platforms. Despite there are known significant security issues in some plugins.

This article will discuss the measures we need to take to build a secure application.

What is React Native?

First, I will give a brief introduction to React Native.

React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. This framework bases on React, Facebook's JavaScript library. React Native application architecture lets the developer learn once, write anywhere approach.

Thus, contributing to the main reason for its popularity.

Is React Native worth developing?

Building Security Driven Applications

Source Code Security in React Native

With the usage of NPM, many applications will be using multiple libraries. Even though the application itself is secure, there can be many vulnerabilities on third-party plugins.

These third-party plugins can or might expose the source code in a readable format. This does not mean all plugins are harmful, but there can be hidden elements among the plugins we use.

There are multiple strategies that we can follow to ensure source code security.

• Minification and Obfuscation

This is a powerful method to ensure good source code security in the application. This method will convert and simplify the code, which makes it unreadable. There are few libraries you can use, such as; Uglify JS, Closure Compiler, Webpack.

• Jscrambler

Jscrambler is a service that enables advanced JS obfuscation and protection. To enumerate, this mainly transforms the code into a form that has protection against reverse-engineering. This service is based on automated static analysis attacks and provides several security layers for code protection. The use of Jscrambler in Reach Native offers a higher level of obfuscated code.

1. Polymorphic JS,
2. and HTML obfuscation,
3. code locks for domains,
4. browser, time frame locks,
5. anti-tampering and debug proofing layers.

• Hermes

Hermes was unravelled in React Native 0.60.1 by Facebook as a new JS Engine for mobile applications. It started with only Android, but since React Native 0.64, you can run Hermes on iOS.

Android: add enableHermes: true in the android/app/build.gradle file

iOS: Hermes_enabled => true in the ios/Podfile.

Hermes provides precompiling of the code to bytecode which makes the entry file unreadable. This might not be as reliable as the other methods because the bytecode can be decompiled via HBCDump.

Hermes adds more complexity to entry file code, which has nothing to do with code tampering and theft.

Server Connection Security in React Native

Most of the applications built on React Native uses an API connection to the backend systems. Most applications do not protect network traffic, and it might expose data to various risks with session interceptions.

Therefore the most recommended way to protect the data is to use SSL/TLS connections. Especially during the authentication process.

The developers need to detect the fundamental flaws and examine the phone network traffic when designing the application. Service connection issues can be very costly for any organisation.

Therefore, we need to protect the data using SSL certificates and ensure that the plugins use secure connections.

Storage Security in React Native

I mentioned the source code and network security, but one of the essential parts of the application is storage.

Data protection in storage is critical.

Users can have easy access to the mobile's file system and can manipulate the data. The storage vulnerabilities open doors for any hacker to exploit the application.

Even though the data gets saved in servers and the data gets backed up, we need to ensure the application has good storage security.

Hackers can exploit the data by simply uploading malicious software to the application. Also, they can use access_token and refresh_token, which will lead them to access the API.

iOS, Android devices are protected by Keychain and SharedPreferences/Keystores. Even though they are the best solutions, we can encrypt the data to be safer.

For example, 256-bit AES, SQLCiphers can be used.

There is another approach which is integrating Realm. It is proven to be a powerful tool for data protection. Realm leverages the AES256 algorithm and verifies the encrypted Realm via SAH2 HMAC hashes.

Few other plugins:

• RN KeyChain: It enables access to Keychain for iOS, Key store for Android application, and conceal. This supports biometric authentication and storage of username & Pass.
• React Native Sensitive Info: Like RN KeyChain and based on Keychain and shared preferences for data storage. It allows you to store multiple key-value parts.
• RN Security Storage: Similar to React Native Sensitive Info and provide multiple key-value pair storage via Keystore and Keychain

Want to check for alternatives for React Native? You can read it from the article Technologies for App Development.

Conclusion

React Native gives us the ability to develop mobile applications in a rapid development process. But as developers, we need to ensure the application is safe and our users' data is protected.

However, there are multiple approaches to ensure application security. We can integrate various security plugins I mentioned above. One thing I did not mention above is regular application updates. In fact, the automated or weekly updates can limit hackers from breaking into the application.

Even though we protect the application, we might unknowingly integrate a vulnerable plugin or library. Therefore, keep an eye on those check for any potential vulnerabilities in the applications.

We at Fonseka Innovations have developed many mobile applications and were one of the first agencies to adopt React Native into its application development.

We made sure that the applications are up to date with the latest technologies and security plugins. From source code to storage are encrypted and secure. If you have an idea to develop a mobile application or to migrate to React Native, please do not hesitate to contact us today.