SSL Pinning in React Native

Before Implementing SSL pinning in our Project, we must have basic knowledge of SSL, how SSL Works.

What is SSL?

  • SSL (Secure Sockets Layer), is an encryption-based Internet security protocol.
  • It secures the connection & data transfer between two network devices.
  • It works under transport layer protocol.

What is an SSL Certificate?

  • It is a data file hosted on website server
  • It contains some information like:
    • Website public key
    • website identity
    • Issue and expiry date
    • and other related information
  • It is issued by Certificate authority

HOW SSL Certificate is generated

  1. The Server first creates a Public and Private key and generates a certificate.
  2. The Server generates a CSR (Certificate signing request) to CA
  3. The CA then signs the Certificate with its own private key and issues it.
  4. The SSL Certification can now be installed on server

How does an SSL Certificate work?

  • This process contains two keys:
    • Public Key which is publicly distributed by SSL Certificate. 
    • Private key: which is kept privately by Server
  • The data is encrypted by public key and decrypted by private key only.

Steps of SSL Communication:

  1. Browser request a web page to Server
  2. Server sends the ssl certificate which contains the public key to browser
  3. Browsers check the validation of certificates by connecting to CA.
  4. Once the certificate is validated, browser knows that it can be trusted and a green padlock is displayed by the browser
  5. Two keys are generated by the client. One key is encrypted by the public key and send to server
  6. The server uses its private key to decrypt the shared key.
  7. Now the keys are used by the browser and web server in order to communicate with each other.

How hackers attack SSL?

  • If a hacker wants to interpret the data which is under transmission, because it is encrypted, the hacker will get garbage data.
  • When we request for a particular website, the hacker interprets and routes the requests to his/her server.
  • As the browser dont know the Certificate public key is of the requested server. Browser will normally follow the procedure and seems to be a valid server and starts communicating.
  • If the browser already knows the public key then this can be avoided.

What is SSL Pinning & why it can be required?

  • SSL pinning is the process of pinning the ssl certificate public key in the app itself.
  • During Handshaking if the server public key is different from what is pinned in the app, the transmission will be rejected by the client.

There are two types of SSL Pinning

  • Pinning the full certificate: Which required the app to re publish if the certificate expires/
  • Pinning the Public Key: Which will not change if it is renewed properly.

Implementation in React Native – Android

In android it is implemented by using okhttp library

There are few steps to be followed:

  • Extracting the public key from certificate

By executing the above command you will have the certificate public key.

Example public key:

dz0GbS1i4LnBsJwhRw3iuZmVcgqpn+AlxSBRxUbOz0k=

  • Pinning this key in React native for Android

React native already used the okhttp library under the hood for performing network calls, it is much simpler to pin it.

In the same folder as your Android app’s MainApplication.java file, create a new Java file and name it SSLPinnerFactory.java, paste in the following content.

Add the following line in onCreate Method in MainApplication.java

Add the following import method in MainApplication.java

  • Sample React Native Code App.js

Warning

Pinning certificates limits your server team’s abilities to update their TLS certificates. By pinning certificates, you take on additional operational complexity and limit your ability to migrate between certificate authorities.

To be done

Implementation in IOS

Library for ssl pinning in ios is AF Networking

Sample Code

Demo Project

Ref:

https://itnext.io/react-native-security-ssl-pinning-cde086210d58

Comments