In 2015, it was officially launched as an open source platform, following an idea that was born during a Facebook Hackathons in 2013. Since then, it has grown into one of the most popular application development frameworks. Native apps can be built using React Native using JavaScript, supporting iOS and Android. This project uses React JavaScript (ReactJS), a free and open-source JavaScript library for development of User Interfaces (UI) and components for mobile applications and websites, is described here. We discuss security issues associated with react native apps that are built using open-source technology.

React Native app architecture

Let’s start at the beginning. React Native: What is it??

Using React Native (JavaScript or TypeScript) you can create native apps on any platform. In the native app, JavaScript code is executed in a separate thread using the native JavaScript engine or the custom JavaScript engine. A JS engine that is native uses the .jsbundle file to store the source code, while an engine that is custom may have different behavior.

A bridge monitors the native part of the app and the JavaScript engine asynchronously handles communications. For example, when some native app events occur, they are converted to serialized messages, batched, and passed to the JavaScript engine. For native apps, the process is similar to the one described for JavaScript engines.

The React Native app from a security perspective should be examined one component at a time, as well as the ways in which the components communicate with each other. In order to create this app, you must be familiar with iOS and Android native platforms as well as JavaScript engines, as well as how they connect – A Bridge.

React Native Security

Security threats can be posed to react native and other JavaScript-based frameworks. As a react native security analysis, it is important to consider the relationships between various parts of the framework. A frontend JS application’s source code is accessible to the user, which makes them prone to being tampered with or having sensitive information compromised. JS applications are susceptible to a number of security issues, such as:

Cross-site scripting:

Attackers use XSS to trick websites into executing random JS code in a user’s browser, also known as a cross-site scripting attack. XSS attacks come in two types: reflected XSS attacks, where information in the text is transformed into a code by the browser, and stored XSS attacks, where an intruder gains access to the server and runs any code run on that server on the client’s browser.

Links and randomness that is insecure:

It happens when malicious code is embedded in the JS code that produces the links based on information entered by the client. An attack script is launched on the browser when clicking on the link.

Attacker-controlled rendering state on the server:

When a server-side app renders an app, this occurs. A document variable can also be created from the JSON string when the page is first created. Using the JSON.stringify () function can be dangerous, as it will convert any data into a string that will be displayed on the page.

Arbitrary code execution (ACE):

A program called arbitrary code execution exploit permits an attacker to execute arbitrary code on the target. It can have extremely negative effects since all users are exposed to the malware.

Zil slip:

The attacker can unzip malicious code or files located outside the target directory if the security of the code library is compromised. By doing so, the attacker could even alter or overwrite important system files.

In other words, the security of native apps built with react native should be of primary concern when creating them. The React Native framework does not come with any methods in-built for storing sensitive data, but there are solutions that can be implemented for both iOS and Android apps to increase security. Here is a closer look at some of them.

Securing App-to-Server Connection

Due to the open-source nature of React Native, client-server communication needs to be secured. Clients and servers communicate using RESTful HTTP-based web services most frequently. When using HTTPS to transfer sensitive data, two important issues are paramount: a server certificate and the cipher of encryption used during transmission.

Servers use certificates to prove their identity. An untrusted Certificate Authority (CA) present inside the client will be required to issue a valid certificate before the connection will be accepted. Using this mechanism, attackers can trick users to trust any CA certificates that are signed by them or compromise a CA system from within by installing the malicious root CA certificate.

A realm attribute should be assigned to every user with a separate code variable to prevent mismatches in authentication. It is possible for servers and realm attributes to differ by even a small amount, therefore, the app will be compromised and unauthorized users could access it.

SSL Pinning in React Native

Authenticated and encrypted links between computers are established using the Secure Sockets Layer (SSL). As part of SSL, the transport layer security (TLS) protocol was developed in 1999, but these protocols are often called just “SSL” or “HTTPS”. In SSL pinning, it is validated after the SSL handshake is complete even by the client.

The client app embeds a list of trusted certificates for comparison with the server certificate during development. A connection will be interrupted instantly if the server certificates are not in sync with the local certificate list.

By using this method, only trusted servers are being accessed by the clients. If, however, a pinned certificate expires, a new certificate must be sent to vendors before they release the application. No further communication can be established if the updated certificate is not pinned.

‘App bricking’ is what happens when this happens. It is usually possible to pin SSL certificates in two different ways: either the entire certificate or its hashed key. Using the same key in both cases is more desirable, since a bricking effect can be avoided.

Advanced React Native Security

Due to the fact that apps run on multiple platforms, some threats relate to network requests. As rooted and jailbroken devices are inherently insecure, you should avoid using them. A rooted device allows an attacker to circumvent the OS security mechanism that controls data storage and spoofs data. You can use JailMonkey to detect if an application is jailbroken or rooted. Detection of a mock location is also possible. The Android-only SafetyNet API identifies rooted devices and unlocks bootloaders.