Enhance React Native’s networking API protection without touching your Javascript code or manually editing the native code projects. Beginning in July 2018 with the 68 release, Chrome began marking all sites not running HTTPS (TLS over HTTP) as “not secure”. TLS uses site certificates to establish a chain of trust and encrypt communication at the transport layer. (Source: ) Google Security Blog This is a significant boost in networking and API security, but especially on mobile devices, it may not be enough. Unfortunately, it is too easy to spoof mobile devices into trusting certificates signed by unexpected certificate authorities. should be used to limit trust to website leaf certificates or only those intermediate or root authorities trusted by the app itself. Certificate Pinning Certificate pinning is not as popular as it should be because of the perceived implementation and maintenance difficulties. With React Native, it is even more challenging, because the networking interface required to implement pinning is not exposed at the javascript layer. Currently available packages supporting certificate pinning in React Native require or . This npm package, , pins network fetches without requiring any changes to the javascript code. Underlying native code used to pin the connections is fully generated from a developer-specified JSON configuration file. This is a work in progress, currently available on Android, with iOS to follow, along with additional package automation and security. replacement of the built in networking package manual changes to native code react-native-cert-pinner Preventing Man in the Middle Attacks does a nice job of describing risks to a mobile connection, even when using TLS. Compromises to a certificate authority or mobile device can cause an app to improperly trust a spoofed server certificate and allow an attacker to insert itself in the middle of the connection, silently decrypting, observing, possibly modifying, and re-encrypting supposedly secure communications. A Year of React Native: SSL Pinning Certificate Pinning builds on existing HTTPS (SSL or TLS over HTTP) techniques. With TLS, the mobile device follows the chain of certificates until it reaches a certificate signed by an authority it trusts. Certificate pinning is used to identify specific certificates or limit the number of certificate authorities trusted to sign for a target website. By pinning a limited list of trusted server certificates within the app, fraudulently signed certificates, even if their certificate authorities are trusted by the device, will be rejected by the app. The app can pin a server’s leaf and intermediate certificates. It is generally recommended to pin multiple certificate’s public keys so that the app can still trust one key if other keys are compromised. SSL pinning is a mitigation method designed to reduce the effectiveness of MiTM attacks enabled by spoofing a back-end server’s SSL certificate. Pinning on intermediate keys eases certificate rotation and renewals. Checking the hash of a public key is convenient and hides certificate information from any attackers. React Native Example App The npm react-native-cert-pinner module contains an example app which we will use to demonstrate certificate pinning. The app checks the HTTPS connection to thedemo-server.approovr.io server: Hello World! $ curl https: //demo-server.approovr.io Because TLS is not exposed through React Native networking calls such as fetch(), a native module must be introduced, and the Expo environment cannot be easily used for development. Start by initializing a React Native project using react-native-cli: Installing react-native... $ react-native init example Next install the package and link the certificate pinner native module: react-native-cert-pinner $ npm install -S react-native-cert-pinner $ cd example + react-native-cert-pinner@ 0.3 .0 added 4 packages from 2 contributors and audited packages in 6. 689s found 0 vulnerabilities rn-pinning/rncp-test/example/node_modules (13ms)
rnpm-install info Linking react-native-cert-pinner ios dependency been successfully linked
rnpm-install info Linking react-native-cert-pinner android
  dependency has been successfully linked $ react-native link Scanning folders for symlinks in /Users/skiph/Projects/ rnpm-install info Platform 'ios' module react-native-cert-pinner has rnpm-install info Platform 'android' module react-native-cert-pinner Delete the default index.js and App.js files and install index.js and src/ files from the example directory in the cert pinner package: $ cp ./node_modules/react-native-cert-pinner/example/index.js ./
$ cp -r ./node_modules/react-native-cert-pinner/example/src ./ $ rm ./index.js ./App.js You should be ready to build and run the app. Ensure an Android emulator is running or an Android device is connected and launch the app: ... BUILD SUCCESSFUL ... $ react-native run-android installing APK 'app-debug.apk' on 'Pixel_2_API_25' for app:debug Installed on 1 device. Total time: 15.768 secs Running adb -s emulator- 5554 reverse tcp: 8081 tcp: 8081 Starting the app on emulator- 5554 (adb -s emulator- 5554 shell am start -n com.example/com.example.MainActivity) Starting : Intent { cmp=com.example/.MainActivity } From the opening screen, push the TEST HELLO button. A successful connection will show a smiley face: Although the connection was made successfully over TLS, certificate pinning was not used. Pinning a Trusted Certificate To add certificate pinning, start by initializing a pinset configuration file in the home directory of the example project: $ npx pinset init File './pinset.json' initialized. Next, determine several public key hashes from the chain of certificates used for demo-server.approovr.io. has a convenient look up service at . As this was being written, the available public key hashes are: Report URI https://report-uri.com/home/pkp_hash Edit pinset.json to pin a few of these key hashes: ] 
    } 
  } 
} { "domains" : { "*.approovr.io" : { "pins" : [ "sha256/oq+Uj+2TYMg13txh1pXW0/VLAkonU3TnoPr5hfxPZVc=" , "sha256/8Rw90Ej3Ttt8RRkrg+WYDS9n7IS03bk5bjP/UXPtaY8=" In a production app, you would add pins for each server domain your app communicates with. If you connect to many servers, consider using an to improve API protection and reduce the number of pin sets you need to manage. API proxy gateway Generate the required native project files by running pinset gen: $ npx pinset gen Reading config file './pinset.json' . Writing java file './android/app/src/main/java/com/criticalblue/reactnative/ GeneratedCertificatePinner.java' . If you consider publishing hashes of public key certificates to be a security breach, you may want to remove or ignore the pinset configuration and generated files from your repository. In your root `.gitignore` file, add: ./pinset.json ./android/app/src/main/java/com/criticalblue/reactnative/GeneratedCertificatePinner.java # default configuration file # default generated android source Rebuild and launch the modified app. You should again see a successful connection, but this time the connection is pinned by at least one of the public key hashes. Rejecting an Unrecognized Certificate To test certificate pinning, change the *.approovr.io public key hashes in pinset.json so they do not match any of the expected values: ] 
    } 
  } 
} { "domains" : { "*.approovr.io" : { "pins" : [ "sha256/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" Regenerate the native project files by running pinset gen: $ npx pinset gen Reading config file './pinset.json' . Writing java file './android/app/src/main/java/com/criticalblue/reactnative/ GeneratedCertificatePinner.java' . Rebuild and launch the modified app. This time you should see a connection failure, because the app could not find a public key hash which matched any of its expected pins. Wrapping Up For Now You have successfully demonstrated a pinning utility for React Native on Android which uses the built-in fetch() API without requiring any manual edits of native Android code. Future enhancements include: Adding equivalent iOS support. Automatically regenerating native source files whenever the pin set configuration changes. Adding source regeneration and git ignores to the mostly automatic react-native linking step. Adding certificate public key hash lookup to the pinset utility. Strengthening security of pinset information within the app. By simplifying certificate pinning for React Native apps, the package should help more developers use these techniques to strengthen the integrity of their mobile API connections. react-native-cert-pinner To learn more about API security and related topics, visit or follow on twitter. approov.io @critblue

Chain

Fetch

Google

Initialized

Target

Twitter

Strengthen TLS in React Native Through Certificate Pinning — iOS Edition

First experiences with React Native: bridging an iOS native module for app authentication

Read My Stories

Too Long; Didn't Read

Strengthen TLS in React Native through Certificate Pinning

Strengthen TLS in React Native through Certificate Pinning

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Tour of API Underprotection

105 Stories To Learn About Ios App Development

10 Things to check on Android code reviews

10 good rules for bad App

The Noonification: Accelerating Android Application Development With the ADB Idea Plugin (10/12/2022)

11 Tips to Save Time on App Development & Launch Processes

A Tour of API Underprotection

105 Stories To Learn About Ios App Development

10 Things to check on Android code reviews

10 good rules for bad App

The Noonification: Accelerating Android Application Development With the ADB Idea Plugin (10/12/2022)

11 Tips to Save Time on App Development & Launch Processes

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps