Build secure apps in React Native

It is predicted that there will be whopping 7.49 billion mobile phone users worldwide by 2025. With great power comes great responsibility, and every experienced software developer should thrive to follow security standards to ensure that their app is secured against cyber criminals. Technologies like RASP (Runtime Application Self-Protection) are made to shield your app against attacks that occur in the runtime. In this article, we’ll show you a RASP-based security library for your React Native app which can detect a wide range of potential attacks and vulnerabilities.

freeRASP — Community-driven In-App Protection and User Safety Suite by Talsec

But it is unlikely that someone is going to mess with my app…

Well, statistically yes. But reality is quite different. When your app is republished or the data of your users are compromised, it’s too late to think about security. Your reputation is now weakened. You are that ‘one in a million’ person that was unfortunate enough. However, if you found this article, then you most likely want to find out how to make your app more secure. And this is a great starting point!

Yeah, for sure..

Just to give you an example, one of the most common security risks is reverse engineering. React Native apps are shipped as APK, AAB, or IPA files with the JavaScript code that is bundled with the application. This code can be, with a small effort of a person that knows what he is doing, easily extracted. Although the code is minified, there are utilities like JSTool that make it possible to unminify them and reveal your sensitive keys or API calls.

With a hybrid platform like React Native, the development of your application may cost less resources and time. That’s great! Unfortunately, you still have to solve platform-specific problems and focus on security on both iOS and Android. In addition to that, hybrid platforms may introduce new security flaws with adding more complexity to how your app is executed. And you don’t want to ignore them. If you want to keep your app safe, you can follow industry standards, such as OWASP MASVS (Mobile Application Security Verification Standard).

Our contribution to React Native community

When we started to think about extending our support to React Native at Talsec, we already had long-lasting experience with protection for native Android and iOS apps, as well as other frameworks like Cordova and Flutter. The only challenging part was to understand how to create the bridge between native code and JavaScript, which would expose the freeRASP to the consumer, so you don’t have to spend your time messing around with native modules, testing and verification. We did all of this for you and are proud to introduce freeRASP for React Native.

Talsec adds another supported platform for freeRASP

What is freeRASP?

freeRASP is a mobile in-app protection and security monitoring plugin. It aims to cover the main aspects of RASP (Runtime App Self Protection) and application shielding, enabling the app to defend itself against threats. It allows mobile applications to check the security state of the environment they run within, actively counteract attack attempts, and control the integrity of the app.

From the developer’s point of view, freeRASP serves as an extra protection layer that helps you to handle certain attack vectors with ease, while you can aim your focus on other areas. You are also protecting the users of your app as freeRASP is able to detect and take actions if the app is being executed on a rooted or jailbroken device, whether the app is tampered, etc.

freeRASP is designed to combat many significant attack vectors, thus creating an obstacle that prevents your app from intrusion. This gives you a real advantage against other apps which do not protect themselves in any way.

Some well-known attack vectors freeRASP can help you with

So far so good, but how do I use it?

It’s quite simple, actually. Just follow the 4-step tutorial below. You can also find a detailed step-by-step guide in our GitHub repository, check it out if you want to learn more.

Step 1: Install the package

You can add freeRASP the same way as you would with any other package. The plugin is installed via your favorite package manager. With yarn, for example, you can do it like this:

$ yarn add freerasp-react-native

Furthermore, for Android apps you need to modify android/build.gradle to add our maven repository containing freeRASP. iOS requires Pods to run our plugin. Find out more here.

Step 2: Configure the freeRASP

This is a place where you set up required fields (package name, signing certificate hashes, bundleId, teamId), which will help freeRASP to detect threats correctly. Don’t forget to add also your email address so you don’t miss your regular security report (more on that later). The configuration might look like this:

// app configuration
const config = {
  androidConfig: {
    packageName: 'com.awesomeproject',
    certificateHashes: ['your_signing_certificate_hash_base64'],
  },
  iosConfig: {
    appBundleId: 'com.awesomeproject',
    appTeamId: 'your_team_ID',
  },
  watcherMail: '[e-mail]',
};

Step 3: Set up threat reactions

After a threat is detected, freeRASP fires an event that is consumed by your app. With freeRASP, it’s the developer’s responsibility to configure what should happen after such event is registered. You can for example kill the application, notify the user that a threat has been detected or just ignore the threat. It’s all in your hands. Just create an object that has threat name as a key and function as a value, like it is shown in the example below:

// reactions to detected threats
const actions = {
  // Android & iOS
  'privilegedAccess': () => {
    console.log('privilegedAccess');
  },
  // Android & iOS
  'debug': () => {
    console.log('debug');
  },
  // Android & iOS
  'simulator': () => {
    console.log('simulator');
  },
  // Android & iOS
  'appIntegrity': () => {
    console.log('appIntegrity');
  },
  // Android & iOS
  'unofficialStore': () => {
    console.log('unofficialStore');
  },
  // Android & iOS
  'hooks': () => {
    console.log('hooks');
  },
  // Android & iOS
  'device binding': () => {
    console.log('device binding');
  },
  // iOS only
  'deviceID': () => {
    console.log('deviceID');
  },
  // iOS only
  'missingSecureEnclave': () => {
    console.log('missingSecureEnclave');
  },
  // iOS only
  'passcodeChange': () => {
    console.log('passcodeChange');
  },
  // iOS only
  'passcode': () => {
    console.log('passcode');
  },
};

Step 4: Start the freeRASP

Good, all setup is done! The last missing part is to start looking for threats. We provide a custom hook that handles all required logic for you, as is registering and unregistering of the listeners. The hook is a part of the freeRASP package and needs to be imported:

import { useFreeRasp } from 'freerasp-react-native';

Now pass your config and threat reactions to the imported hook:

useFreeRasp(config, actions);

The hook will now initialize freeRASP with your configuration and start to look for threats. That’s it!

Additional information

There are the dev and release versions of the library. The dev version should be used only during the development process of the application as it disables some of the checks (e.g. if you would implement killing of the application on the debugger callback). In other cases, you always want to use the release version. On Android, it is handled automatically, whereas, on iOS, the step is a matter of adding a pre-built script into the run phases and embedding a symlink to the correct framework. Do not worry, it is quite easy ;)

freeRASP is available to everyone, free of charge. However, it uses a bridge between JavaScript and native code, which is essentially an additional place that could be exploited. We are able to remove this redundant communication while still keeping your app safe. You can read more in the Enterprise Services section down below.

Example of a security report

This example presents a report of a mid-sized FinTech app:

Summary

The demand for secured apps nowadays is already high and will only increase in the future. Therefore developers should thrive for secure solutions. freeRASP is a tool that can help you to achieve this task. With all its security checks, it can be your good friend and keep you out of trouble. freeRASP is a powerful tool that gives you freedom of choice in how you set up the reactions to detected incidents. What’s more, it is available as a package, which makes the integration pretty straightforward. Don’t forget, freeRASP is available free of charge, why don’t you try it then?

written by Tomas Psota, developer at Talsec

https://talsec.app | [e-mail] | Read also 5 Things John Learned Fighting Hackers of His App — A must-read for PM’s and CISO’s | Mobile API Anti-abuse Protection: AppiCrypt® Is a New SafetyNet and DeviceCheck Attestation Alternative