react native expo ssl pinning

I’m studying React Native Expo for the first time, and while looking for security, I saw ssl pinning. I wonder how to use it and whether it can be used in expo

thank you :slight_smile:

Hi! What exactly are you looking for? There are ssl pinning libraries, so you can use them for sure

I’ve been looking for information about ssl pinning before, but it said that I had to eject to do it. I want to know if it is possible with expo, which library to use, and how to use it.

thank you :slight_smile:

Hi @dbekdud

A few months ago, ejecting would have been the only possibility. These days with EAS Build it is often possible to use dependencies that include native code. You might need a config plugin to get it to work, though.

If I search for “react native ssl pinning” I find a library called react-native-ssl-pinning.

The instructions for the above are a little confusing at times, but all you need from the Getting Started section is one of the following:

If you use npm:

npm install react-native-ssl-pinning
or
npm install --legacy-peer-deps react-native-ssl-pinning

If you use yarn:

yarn add react-native-ssl-pinning

The Usage section is where things get more confusing. But basically you get the certificate and convert it to DER format. There’s one way to do that under the “Create the certificates” subsection.

Up until this point there’s nothing that indicates that a config plugin would be needed, but then we get to the iOS subsection:

iOS

  • drag mycert.cer to Xcode project, mark your target and ‘Copy items if needed’
  • (skip this if you are using certificate pinning) no extra step needed for public key pinning, AFNetworking will extract the public key from the certificate.

I have trouble understanding exactly what they mean by the above, but either way it seems you need to change the Xcode project for this to work. This means that you would indeed need to either eject or write a config plugin to get this to work. :frowning:

The Android subsection could also be written more clearly, but it seems that if you want to use public key pinning you might not need to eject or use a config plugin. If you want to use certificate pinning you apparently need to copy the cert(s) under src/main/assets. I’m not sure if Expo’s asset handling does anything automatically (in which case you might be able to add “.cer” to the list of asset extensions and e.g. save them in your assets directory). But if not, you could use a build hook to copy them into place.

I was able to add SSL Pinning via Certificate Pinning into my app by creating a custom config plugin and using eas build.

Here are some tips for doing this.

On iOS:
I created the native build locally with expo run:ios which created the ios folder within my project. I committed the iOS directory to git. This just makes it easier for me to compare what lines were modified in the next step. I launched the ios directory in xcode. Next follow the instructions from GitHub - MaxToyberman/react-native-ssl-pinning: React Native ssl pinning and cookies handling based on okhttp3 on (Android). and AFNetworking on (iOS) for setting up the library, i.e. drag the certs into xcode, selecting copy to project etc. Now I compared the changes that xcode made to the ios directory which consists of modifying a few lines in the project.pbxproj file. To make these changes you will need to insert/replace lines using a config plugin. Expo does have a mergeContents function, but I found that the inline comments it makes breaks the project since it expects comments to be in /* */ format instead of //.
I used this person’s function for inserting lines: EAS - React Native Branch - example config plugin (Working on iOS and Android), and his method of opening up the project.pbxproj file and writing to it.
iOS expects the certificate to be in the ios directory so you can create a build hook as @wodin mentioned to copy the certs from one directory into the ios directory. I used the cpx - npm library to do so after eas-build-post-install

On Android:
Android is a bit easier. All it needs is the certificate in src/main/assets, which you can also use eas-build-post-install + cpx to do. Then to pin the cert you just have to add the file name here GitHub - MaxToyberman/react-native-ssl-pinning: React Native ssl pinning and cookies handling based on okhttp3 on (Android). and AFNetworking on (iOS) where you use react-native-ssl-pinning.

3 Likes

Great! :slight_smile: thanks for posting this

1 Like

Also be sure to check out some examples of plugins: config-plugins/packages at master · expo/config-plugins · GitHub.

There’s more than one way you can go about this, but after you write one plugin, the next feels a bit more natural.

expo-cli/generateCode.ts at 4477bdde3c768e4ab822fb43224e94f85453683b · expo/expo-cli · GitHub has the mergeContents function I mentioned which may or may not be helpful to you.

1 Like

See also: expo/packages at master · expo/expo · GitHub

1 Like

Nice work! Glad my function helped you :+1:

2 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.