SSL pinning with certificate and without certificate verification

SSL pinning in React Native enhances the security of your application by ensuring that the client only accepts the server’s certificate or public key, protecting against man-in-the-middle (MITM) attacks. There are two main approaches to SSL pinning: pinning with a certificate and pinning with a public key.

SSL Pinning with Certificate

In this method, the client holds a copy of the server’s SSL certificate. When the app makes a network request, it compares the server’s certificate with the stored certificate.

Steps:

Install a library: Use a library such as react-native-ssl-pinning.

bash

Copy code

npm install react-native-ssl-pinning

Add the SSL certificate:

Obtain the server certificate (e.g., server_cert.cer).

Add the certificate file to your project. For example, place it in the assets directory.

Configure network requests.

import { fetch } from 'react-native-ssl-pinning';

fetch('https://example.com/api', {
  method: 'GET',
  sslPinning: {
    certs: ['server_cert'], // Name of the certificate file without extension
  },
})
.then(response => response.json())
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error(error);
});

SSL Pinning with Public Key

This method involves extracting the public key from the server’s SSL certificate and storing it in the client. The app verifies the server’s public key during SSL handshake.

Steps:

Install a library: You can use the same react-native-ssl-pinning library.

npm install react-native-ssl-pinning

Extract the public key:

You can use tools like OpenSSL to extract the public key from the server certificate.

openssl s_client -connect example.com:443 </dev/null 2>/dev/null | openssl x509 -pubkey -noout > public_key.pem

Add the public key to your project:

Place the extracted public key file in the assets directory (e.g., public_key.pem).

Configure network requests:

import { fetch } from 'react-native-ssl-pinning';

fetch('https://example.com/api', {
  method: 'GET',
  sslPinning: {
    // This time using the public key
    keys: ['public_key'], // Name of the public key file without extension
  },
})
.then(response => response.json())
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error(error);
});

SSL Pinning without a Certificate Library

If you prefer not to use a specific SSL pinning library, you can use the react-native-fetch-blob library, although it requires more manual work and careful handling.

Install the library:

npm install – save rn-fetch-blob

Setup SSL pinning manually:

import RNFetchBlob from 'rn-fetch-blob';

RNFetchBlob.config({
  trusty: true,
  // Here, you would add your custom SSL pinning logic
})
.fetch('GET', 'https://example.com/api')
.then(response => {
  console.log(response.json());
})
.catch(error => {
  console.error(error);
});

Security Considerations

Certificate Rotation: SSL certificates have expiration dates and may be rotated. Ensure your app can handle certificate updates without breaking.

Security Updates: Regularly update libraries and dependencies to incorporate the latest security patches.

Handling Errors: Properly handle network errors and SSL pinning failures to provide a good user experience.

By following these steps, you can implement SSL pinning in your application, providing an additional layer of security against network attacks.