Mobile App development is rapidly growing and so is the expectation of robust support. “Mobile first” is the set paradigm for many application development teams. Unlike web deployment, an app release has to go through the review process via App Store Connect and Google Play. Minor or major releases follow the app review same process, which can take 1-4 days. Hot fixes or critical security patches are also bound by the review cycle restrictions.  This may lead to service disruptions, negative app and customer reviews.

Let’s say that the latest version of an app is version 1.2. However, a critical bug was identified in version 1.1. The app developers may release version 1.3, but the challenge would be that it may take a while to release the new version (unless a forced update mechanism is implemented for the app). Another potential challenge would be the fact that there is no guarantee that the user would have auto updates on.

Luckily, “Over The Air” updates comes to the rescue in such situations.

The Over The Air (OTA), deployment process for mobile apps allows developers to push updates without going through the traditional review process. The OTA update process enables faster delivery for any hot fix or patch.

While this is very exciting, it does come with a few limitations:

• This feature is not intended for major updates or large feature launches.
• OTA primarily works with JavaScript bundlers so native feature changes cannot be deployed via OTA deployment.

Mobile OTA Deployment

React Native consists of JavaScript and Native code. When the app gets compiled, it creates the JSbundles for Android and iOS apps along with the native builds. OTA also relies on the JavaScript bundles and hence React Native apps are great candidates to take advantage of the OTA update technology.

One of our client’s app has an OTA deployment process implemented using App Center. However, Microsoft has decided to retire App Center as of March 31, 2025. Hence, we started exploring the alternatives. One of the alternate solutions on the the table was provided by App Center and the other was to find a similar PAAS solution from another provider. Since back-end stack was AWS, we chose to go with EAS Update.

EAS Update

EAS Update is a hosted service that serves updates for projects using expo-updates library. Once the EAS Update is configured correctly, the app will be listening for any targeted version of the app on the EAS dev cloud server. Expo provides a great documentation on setup and configuration.

How Does It Work?

In a nutshell;

1. Integrate “EAS Updates” in the app project.
2. The user has the app installed on their device.
3. The development team made a bug fix/patch and generated JSbundle for the targeted app version and uploaded to the Expo.dev cloud server.
4. Next time the user opens the app (frequencies can be configurable, we can set on app resume/start), the app will check if any bundle is available to be installed. If there is an update available, the newer version of the app from Expo will be installed on user’s device.

OTA deployment process

Additional details can be found at https://docs.expo.dev/eas-update/how-it-works/.

Implementation Details:

If you are new to React Native app development, this article may help Ramp Up On React/React Native In Less Than a Month. And if you are transitioning from React to React Native, you may find this React Native – A Web Developer’s Perspective on Pivoting to Mobile useful.

I am using my existing React-Native 0.73.7 app. However, one can start a fresh React Native App for your test.

Project configuration requires us to setup expo-modules. The Expo installation guide provides an installer which handles configuration.  Our project needed an SDK 50 version of the installer.

• Using npx install-expo-modules@0.8.1, I installed Expo, SDK-50, in alignment with our current React native version 0.73.7, which added the following dependencies.

"@expo/vector-icons": "^14.0.0",
"expo-asset": "~9.0.2",
"expo-file-system": "~16.0.9",
"expo-font": "~11.10.3",
"expo-keep-awake": "~12.8.2",
"expo-modules-autolinking": "1.10.3",
"expo-modules-core": "1.11.14",
"fbemitter": "^3.0.0",
"whatwg-url-without-unicode": "8.0.0-3"

• Installed Expo-updates v0.24.14 package which added the following dependencies.

"@expo/code-signing-certificates": "0.0.5",
"@expo/config": "~8.5.0",
"@expo/config-plugins": "~7.9.0",
"arg": "4.1.0",
"chalk": "^4.1.2",
"expo-eas-client": "~0.11.0",
"expo-manifests": "~0.13.0",
"expo-structured-headers": "~3.7.0",
"expo-updates-interface": "~0.15.1",
"fbemitter": "^3.0.0",
"resolve-from": "^5.0.0"

• Created expo account at https://expo.dev/signup
• To setup the account execute, eas configure
• This generated the project id and other account details.
• Following channels were created: staging, uat, and production.
• Added relevant project values to app.json, added Expo.plist, and updated same in AndroidManifest.xml.
• Scripts block of package.json has been updated to use npx expo to launch the app.
• AppDelegate.swift was refactored as part of the change.
• App Center and CodePush assets and references were removed.
• Created custom component to display a modal prompt when new update is found.

OTA Deployment:

• Execute the command via terminal:

EAS_CHANNEL=staging RUNTIME_VERSION="7.13" eas update --message "build:[QA] - 7.13.841 - 25.5.9.4 - OTA Test2 commit"

• Once the package is published, I can see my update available in expo.dev as shown in the image below.

EAS update screen once OTA deployment is successful.

Test:

1. Unlike App center, Expo provides the same package for iOS and Android targets.
2. The targeted version package is available on the expo server.
3. App restart or resume will display the popup (custom implementation) informing “A new update is available.”.
4. When a user hits “OK” button in the popup, the update will be installed and content within the App will restart.
5. If the app successfully restarts, the update is successfully installed.

Considerations:

• In metro.config.js – the @rnx-kit/metro-serializer had to be commented out due to compatibility issue with EAS Update bundle process.
• @expo/vector-icons package causes Android release build to crash on app startup. This package can be removed but if package-lock.json is removed the package will reinstall as an expo dependency and again, cause the app to crash. The issue is described in the comments here: https://github.com/expo/expo/issues/26521. There is no solution available at the moment. The expo vector icons package isn’t being handled correctly during the build process. It is caused by the react-native-elements package. When removed, the files are no longer added to app.manifest and the app builds and runs as expected.
• Somehow the font require statements in node_modules/react-native-elements/dist/helpers/getIconType.js are being picked up during the expo-updates generation of app.manifest even though the files are not used our app. The current solution is to go ahead and include the fonts in the package but this is not optimal. Better solution is to filter those fonts from expo-updates process.

Deployment Troubleshooting:

• Error fetching latest Expo update: Error: “channel-name” is not allowed to be empty.

The headers “expo-runtime-version”, “expo-channel-name”, and “expo-platform” are required. They can also be set with the query parameters “runtime-version”, “channel-name”, and “platform”. Learn more: https://github.com/expo/fyi/blob/main/eas-update-missing-headers.md

The configuration values for iOS app are maintained in Supporting/Expo.plist. The above error indicates that the EXUpdatesRequestHeadersblock in the plist might be missing.

OTA deployment is very useful when large number of customers are using the app and any urgent hot fix or patch needs to be released. You can set this for your lower environments as well as the production.

In my experience, it is very reliable and the expo team is doing great job on maintaining it.

So take advantage of this amazing service and Happy coding!

For more information about Perficient’s Mobile Solutions expertise, subscribe to our blog or contact our Mobile Solutions team today!

Time spent on mobile apps has increased exponentially in the past few years. The development team must safeguard with the tools and technology available at their disposal. We will review techniques for mobile app security. You may also reference Give Your React Native Apps a Titanium Shield Against Vulnerabilities and OWASP Mobile Top 10 for more information.

8 Steps to Improve Your Mobile App Security

Step 1: Implement SSL Pinning

SSL Pinning is used in client apps to prevent a Man-in-the-middle attacks (MITM) by validating server certificates. The certificate is evaluated even after the SSL handshake. Developers pin a trusted certificate(s) to the client application which gets compared against server certificate(s) at run time. If there is a mismatch, the app will refuse the connection to that server. SSL pinning can be done using a certificate or public key. Depending on your case you may choose one over another.

NOTE: The certificate gets bundled with the app, so certificate renewals will require the repackaging of your app.

Step 2: Jailbroken/Rooted Device Detection

Jailbroken/Rooted devices open the gate to vulnerabilities for apps. With Rooted access, the hacker app/individual can get access to the protected file system/data. The risk is even higher when someone can alter the app program files underneath. By supplementing jailbreak/root verification, we can block the app usage and prevent access to jailbroken(iOS) devices or rooted(Android).

Step 3: Restrict “Insecure” Connections (iOS)

<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

In iOS apps, during development cycles we use Info.plist configurations to communicate with the localhost. The development of React Native apps requires the localhost server to be running. NSExceptionAllowsInsecureHTTPLoads allows insecure HTTP loads to localhost. This setting should NOT be bundled with a distributed app.

Step 4: Obfuscate the App While In Multi Select Screen

A malicious entity might retrieve background screenshots using privileged access to the application library folder. If an attacker is able to access the storage of the device, either through physical access or logical access to the file system, they may be able to extract sensitive information including but not limited to credit card number, address or other information.

• Android: When the state of the App changes to “background”, the “Flag_Secure” can be used to display the overlay screen.
• iOS: For iOS Apps, this can be achieved by creating a custom overlay screen, often, reusing the design as the ‘Splash’ screen.

Step 5: Block Screenshot Capture

Malicious actors can steal the data either by acquiring the device physically or logically. One can steal “Personal Identifiable Information” (PII)/ “Personal Health Information” (PHI)/ “Payment Card Information” (PCI) data by capturing screenshots from the App while it’s is running in the background. The “Flag_Secure” will ensure that when Android OS takes a screenshot, either manually or automatically, it will result in solid blank image. One may have to implement custom solution to achieve in iOS apps.

Step 6: Restrict API Access

Google Maps API is a paid service which allows applications to embed and search from the Google Maps Database. The usage can be abused by threat actors which will result into increasing costs to the API Key owners. The Apps would have to consume an API Key(unique identifier) to configure the Map. Untrusted sources should be restricted access the keys. Restrictions can be applied at the App level by using bundle identifier for Android or iOS Apps. Apart from that the API restrictions can also be implemented manually.

Step 7: Limit the Usage of Device Permissions

The user’s privacy is important, while the app may require device permissions for features, developers need to confirm the exact permissions the app would require. For example, Android offers two types of location permissions. We should determine the pertinent use cases when requesting permission.

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

Step 8: Execute Regular Security Tests

Due to the types and amounts of threats emerging each day, it becomes a constant hustle to identify them and remediate. In order to ensure security, we need to run constant checks or security tests to identify threats. We should also perform “Penetration Testing” to identify any weakness that an attacker might use to potentially harm the app or users.

Few examples of tools can be used for Penetration Testing:

• White Jaguars
• Synopsys
• Qualys

Tools can be used for code scanning:

• Snyk
• SonarCube

Wrapping up

Privacy and data safety are paramount to an organization and user base. Practicing the guidelines above you can safeguard your mobile app to ensure user data is secure. Security should be baked into product roadmap to account for an ever growing feature set requiring increased mobile data transactions. New vulnerabilities/security threats are discovered daily, it is the company’s responsibility to protect their customers. I recommend regularly running security tests to detect new threats and make necessary changes in a timely manner.

Perficient’s Mobile App Expertise

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

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

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!