react native expo ssl pinning

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.

2 Likes