npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

v0.5.0

Published

Easily implement usual security measures in React Native Expo apps

Downloads

2,730

Readme

⚠️ 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

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:

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

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 😁