Enhance React Native’s networking API protection on Android and iOS without touching your Javascript code or manually editing the native code projects. The implemented TLS certificate pinning for React Native apps on Android. Since then, the package has been enhanced to support pinning on iOS devices, and this edition of the post walks through the previous example for iOS. first edition of this article react-native-cert-pinner 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, API and , 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. mobile security 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 and iOS, with additional package automation and security to follow. 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 module contains an example app which we will use to react-native-cert-pinner demonstrate certificate pinning. The app checks the HTTPS connection to the demo-server.approovr.io server: $ curl https: Hello World! //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: $ react-native init example
Installing react-native… Next install the package: react-native-cert-pinner $ cd example
$ npm install -S react-native-cert-pinner
+ react-native-cert-pinner@ added packages contributors and audited packages s
found vulnerabilities 0.3 .0 4 from 2 in 6.689 0 Use react-native to automatically link the cert pinner native module: $ react-native link
Scanning folders symlinks /Users/skiph/Projects/
  rn-pinning/rncp-test/example/node_modules ( ms)
rnpm-install info Linking react-native-cert-pinner ios dependency
rnpm-install info Platform ‘ios’ react-native-cert-pinner has
  been successfully linked
rnpm-install info Linking react-native-cert-pinner android
  dependency
rnpm-install info Platform ‘android’ react-native-cert-pinner
  has been successfully linked for in 13 module module 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: $ rm ./index.js ./App.js
$ cp ./node_modules/react-native-cert-pinner/example/index.js ./
$ cp -r ./node_modules/react-native-cert-pinner/example/src ./ For iOS, copy in the example podfile and install the pod manually: $ cp ./node_modules/react-native-cert-pinner/example/ios/podfile ./ios/
$ cd ios && pod install You should be ready to build and run the app. Ensure an iOS simulator is running or an iOS device is connected, and launch the app: $ react-native run-ios
…
** BUILD SUCCEEDED **
The following commands produced analyzer issues:
 Analyze …/RCTModuleMethod.mm normal x86_64
 Analyze …/RCTImageCache.m normal x86_64
 Analyze …/RCTNetInfo.m normal x86_64
( commands analyzer issues)
Installing build/Build/Products/Debug-iphonesimulator/example.app
Launching org.reactjs.native.example.example
org.reactjs.native.example.example: 3 with 9252 From the opening screen, push the Test Hello button at the bottom of the screen. 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+ TYMg13txh1pXW0/VLAkonU3TnoPr5hfxPZVc=”,
        “sha256/ Rw90Ej3Ttt8RRkrg+WYDS9n7IS03bk5bjP/UXPtaY8=”
      ] 
    } 
  } 
} 2 8 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’.
Updating plist file ‘./ios/example/info.plist’. 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: # configuration file
./pinset.json
# generated source files
./ios/example/info.plist default default 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’.
Updating plist file ‘./ios/example/info.plist’. 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 iOS which uses the built-in fetch() API without requiring any manual edits of native iOS code. See the to follow the same example in Android. first edition of this article Future package enhancements include: 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

Consider gRPC for Mobile APIs

Strengthen TLS in React Native through Certificate Pinning

Read My Stories

Too Long; Didn't Read

Strengthen TLS in React Native Through Certificate Pinning — iOS Edition

Strengthen TLS in React Native Through Certificate Pinning — iOS Edition

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Tour of API Underprotection

socat: patch for OpenSSL certificate hash verification

Strengthen TLS in React Native through Certificate Pinning

The Noonification: Does Size Matter If You an Have iPhone 15? (11/11/2023)

105 Stories To Learn About Ios App Development

A Tour of API Underprotection

socat: patch for OpenSSL certificate hash verification

Strengthen TLS in React Native through Certificate Pinning

The Noonification: Does Size Matter If You an Have iPhone 15? (11/11/2023)

105 Stories To Learn About Ios App Development

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps