SSL Pinning in React Native

What is SSL Pinning?

SSL pinning, also known as certificate pinning, is a security technique used to ensure that a client only trusts a specific server certificate and not any imposters or fake certificates. This technique helps to prevent man-in-the-middle (MITM) attacks, where an attacker intercepts communication between a client and a server and intercepts the SSL certificate, allowing them to read and modify the data being transmitted.

In SSL pinning, the client is pre-configured with the expected SSL certificate or public key of the server. When the client establishes a connection with the server, it verifies the server’s certificate against the expected certificate or public key. If the certificates match, the connection is established, otherwise, the connection is terminated.

This technique helps to ensure that the communication between the client and server is secure and free from tampering, even if an attacker tries to intercept the communication and present a fake certificate.

Overall, SSL pinning provides an additional layer of security for sensitive information transmitted over the internet. It is commonly used in mobile and web applications to protect sensitive information such as login credentials, financial transactions, and personal data.

Types of SSL Pinning:

• Certificate Pinning: In this method, the client is pre-configured with the expected X.509 certificate of the server. When the client establishes a connection with the server, it verifies the server’s certificate against the expected certificate.

• Public Key Pinning: In this method, the client is pre-configured with the expected public key of the server. When the client establishes a connection with the server, it verifies the server’s public key against the expected public key.

• Subject Public Key Info (SPKI) Pinning: In this method, the client is pre-configured with the expected SPKI of the server. When the client establishes a connection with the server, it verifies the server’s SPKI against the expected SPKI.

• Hash Function Pinning: In this method, the client is pre-configured with the expected hash of the server’s certificate or public key. When the client establishes a connection with the server, it calculates the hash of the server’s certificate or public key and verifies it against the expected hash.

Each of these methods provides a different level of security and is suited for different use cases. For example, certificate pinning provides the highest level of security, but it is also the most rigid and difficult to manage. Public key pinning, on the other hand, is more flexible and easier to manage, but provides a lower level of security.

In general, SSL pinning should be used in conjunction with other security measures, such as SSL encryption, to provide a comprehensive security solution.

Implementing SSL Pinning in React Native (Public Key Pinning)

Extract public key of a certificate

Before we set up our SSL pinning logic, we first need to retrieve the public key of our server’s certificate. Open a terminal session and enter the command below, replacing the server domain name with yours.

• First, we need public key of server certificate.

• Open Terminal and enter command below, but don’t forget to change domain name (google.co.in) with your server’s domain name.

openssl s_client -servername google.co.in -connect google.co.in:443 | openssl x509 -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64

openssl s_client -servername google.co.in -connect google.co.in:443 | openssl x509 -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64

After this you will get output similar to the one given below. Do copy the base64 key from the end of output:

...
verify return:1
depth=0 CN = *.google.co.in
verify return:1
Xthc0lj4iC4WT3stvwXerl89af709USBG3S5qJVz4fA=

Android:

The implementation on android is easy as Android already exposes the method for SSL Pinning. Under the hood React Native uses OKHttp and it comes with SSL Pinning support.

We are not creating our own OkHttpClient builder instead we are using public method exposed on React Native OkHttpClientProvider which returns OkHttpClientBuilder . So that if any changes done be React Native in future we need not change anything in our code.

In onCreate() method of MainApplication.java add the code

OkHttpClientProvider.setOkHttpClientFactory(new SSLPinnerFactory());

Your code will look something like this

iOS:

For implementing SSL Pinning in React Native for iOS we will use library called TrustKit add this line in your Podfile

pod 'TrustKit'

Open the Project in Xcode and in AppDelegate.m and make changes in your code like this

By setting the kTSKSwizzleNetworkDelegates key to YES, TrustKit will then perform method swizzling on the App's NSURLSession and NSURLConnection delegates in order to automatically perform SSL pinning validation against the server's certificate chain, based on the configured pinning policy. This allows deploying TrustKit without changing the App's source code.

By setting the kTSKSwizzleNetworkDelegates key to YES, TrustKit will then perform method swizzling on the App's NSURLSession and NSURLConnection delegates in order to automatically perform SSL pinning validation against the server's certificate chain, based on the configured pinning policy. This allows deploying TrustKit without changing the App's source code.

To read full getting started guide regarding TrustKit refer this guide

This completes the implementation of SSL Pinning in React Native using Public Key Pinning method.

Suggestions, recommendations and requests for any topic is welcome in comments.

Happy coding!