@bam.tech/react-native-app-security

react-native-app-security 🔐

Easily implement usual security measures in React Native Expo apps

• Installation and setup
• Features
  • SSL Pinning
    • Configuration
      • Pinning subdomains
    • Generating the public key hashes
    • Testing
  • Certificate transparency
    • Configuration
  • Prevent "recent screenshots"
    • Configuration
  • Safe Keyboard Detector
  • [EXPERIMENTAL - iOS only] Disable Default Caching in Cache.db
• Contributing
• 👉 About BAM

⚠️ Disclaimer
This package is intended to help implement a few basic security features but does not in itself guarantee that an app is secure.
Refer to OWASP's resources for more information on mobile app security.
You can also contact us if you need help with securing your app.

Installation and setup

This package is designed for use in expo apps with development builds.

yarn add @bam.tech/react-native-app-security

Add the config plugin to app.config.ts / app.config.js / app.json:

{
  "plugins": [
    [
      "@bam.tech/react-native-app-security",
      {
        "sslPinning": {
          "yahoo.com": [
            "TQEtdMbmwFgYUifM4LDF+xgEtd0z69mPGmkp014d6ZY=",
            "rFjc3wG7lTZe43zeYTvPq8k4xdDEutCmIhI5dn4oCeE="
          ]
        },
        "preventRecentScreenshots": {
          "ios": { "enabled": true },
          "android": { "enabled": true }
        }
      }
    ]
  ]
}

Anytime you change the config, don't forget to run:

yarn expo prebuild

Features

SSL Pinning

🥷 What's the threat? Attackers intercepting your app's network requests and accessing private data or sending malicious responses. More details

This package implements public key pinning using TrustKit on iOS and the certificate pinner included in OkHttp on Android.

Configuration

[
  "@bam.tech/react-native-app-security",
  {
    "sslPinning": {
      // The hostname you want to pin, without `https://`
      "yahoo.com": [
        // The public key hashes for the pinned certificates, without a `sha256/` prefix
        "TQEtdMbmwFgYUifM4LDF+xgEtd0z69mPGmkp014d6ZY=",
        "rFjc3wG7lTZe43zeYTvPq8k4xdDEutCmIhI5dn4oCeE="
      ]
    }
  }
]

Please note that you'll need to provide 2 public key hashes. This is to encourage having proper procedures in place to avoid locking users out, as described here in the TrustKit docs.

Pinning subdomains

To pin a specific subdomain, simply include it in the string you provide, eg:

    "sslPinning": {
      "subdomain.domain.com": [/* ... */]
    }

To pin a domain and all its subdomains, use a wildcard:

    "sslPinning": {
      // domain.com and all its subdomains will be pinned
      "*.domain.com": [/* ... */]
    }

The wildcard can only be used for the full lefmost part of the hostname.

These are invalid: *domain.com, domain.*.com, sub.*.domain.com

Generating the public key hashes

You'll need the certificates (.cer or .crt)

openssl x509 -in certificate.cer -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64

Testing

To test that SSL pinning is working as expected, you can:

• break (change) a certificate and check that the connection fails (don't forget to yarn expo prebuild then yarn ios or yarn android to rebuild the app)
• set up a proxy (we love Proxyman) and check that the connection fails

Certificate transparency

🥷 What's the threat? Compromised certificate authorities. More details

• On iOS, certificate transparency is enabled by default since iOS 12.1.1
• On Android, this package enables it using appmatus/certificatetransparency for Android >= 8.0

Configuration

None, enabled by default.

Prevent "recent screenshots"

🥷 What's the threat? When the OS terminates the app, it may take a screenshot and store it on the device to display in the app switcher. This screenshot could leak sensitive data

Mitigating this threat is achieved by:

• Using FLAG_SECURE on Android < 13
• Using Activity.setRecentScreenshotsEnabled on Android >= 13
• Covering the app with the splashscreen on iOS (requires expo-splash-screen to be setup)

Configuration

[
  "@bam.tech/react-native-app-security",
  {
    "preventRecentScreenshots": {
      "ios": { "enabled": true },
      "android": { "enabled": true }
    }
  }
]

Safe Keyboard Detector

🥷 What's the threat? A third-party keyboard might embed a malicious keylogger to record passwords and sensitive data. More details

Mitigating this threat is achieved by:

• On Android, comparing the current keyboard id with a list of keyboard packages that we deem safe.
• On iOS, doing nothing specific since iOS already prevent the use of third-party keyboard on sensitive fields such as passwords.

import { SafeKeyboardDetector } from "@bam.tech/react-native-app-security";

const { isInDefaultSafeList, inputMethodId } = getCurrentInputMethodInfo(); // Will always return {isInDefaultSafeList: true, inputMethodId: "iosKeyboard"} on iOS
if (!isInDefaultSafeList) {
  console.warn(`Your current keyboard (${inputMethodId}) is not safe`);
}

// Prompt the user to change the current keyboard
SafeKeyboardDetector.showInputMethodPicker(); // can only be called on Android

[EXPERIMENTAL - iOS only] Disable Default Caching in Cache.db

⚠️ DISCLAIMER: This experimental feature may impact app behavior. Use it at your own risk. Disabling caching can cause unexpected issues.

Possible side effects:

• Slower performance due to lack of cached responses
• Higher network usage from repeated requests
• Crashes in components expecting cached data
• Features failing in offline mode

🥷 Threat: On iOS, every NSURL request may be cached by default in Cache.db, potentially storing sensitive data unless explicitly disabled. This can lead to unintentional data leaks.

Mitigating this threat is achieved by:

• Fully clearing the existing cache
• Remove the cache by setting it to an empty cache:

URLCache.shared = URLCache(memoryCapacity: 0, diskCapacity: 0, diskPath: nil)

Configuration

If you want to enable this functionality, it need to be enabled in the app configuration file (by default it's disabled)

[
  "@bam.tech/react-native-app-security",
  {
    "disableCache": {
      "ios": { "enabled": true },
    }
  }
]

Contributing

Contributions are welcome. See the Expo modules docs for information on how to build/run/develop on the project.

When making a change to the plugin folder, you'll need to run yarn prepare before prebuilding and building the example app.

👉 About BAM

We are a 100 people company developing and designing multi-platform applications with React Native using the Lean & Agile methodology. To get more information on the solutions that would suit your needs, feel free to get in touch by email or through our contact form!

We will always answer you with pleasure 😁