React Native ssl pinning and cookies handling based on okhttp3 on (Android). and AFNetworking on (iOS)
React-Native ssl pinning & public key pinning using OkHttp 3 in Android, and AFNetworking on iOS.
[email protected]
$ npm install react-native-ssl-pinning --save
If you are using
React Native 0.60.+the link should happen automatically. in iOS run pod install
$ react-native link react-native-ssl-pinning
Libraries➜
Add Files to [your project's name]
node_modules➜
react-native-ssl-pinningand add
RNSslPinning.xcodeproj
libRNSslPinning.ato your project's
Build Phases➜
Link Binary With Libraries
Cmd+R)<
Add maven { url "https://jitpack.io" } to project level build.gradle like this:
allprojects { repositories { maven { url "https://jitpack.io" } } }1. Open up
android/app/src/main/java/[...]/MainActivity.java- Add
import com.toyberman.RNSslPinningPackage;to the imports at the top of the file - Add
new RNSslPinningPackage()to the list returned by the
getPackages()method 2. Append the following lines to
android/settings.gradle:
include ':react-native-ssl-pinning' project(':react-native-ssl-pinning').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-ssl-pinning/android')3. Insert the following lines inside the dependencies block in
android/app/build.gradle:
compile project(':react-native-ssl-pinning')
openssl s_client -showcerts -servername google.com -connect google.com:443 </dev/null
Copy the certificate (Usally the first one in the chain), and paste it using nano or other editor like so , nano mycert.pem
convert it to .cer with this command openssl x509 -in mycert.pem -outform der -out mycert.cer
For more ways to obtain the server certificate please refer: https://stackoverflow.com/questions/7885785/using-openssl-to-get-the-certificate-from-a-server
Only if using certificate pinning : place your .cer files under src/main/assets/
For public key pinning the public key should be extracted by the following options : (replace google with your domain)
openssl s_client -servername google.com -connect google.com:443 | openssl x509 -pubkey -noout | openssl rsa -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64
javascript fetch("https://publicobject.com", { method: "GET" , pkPinning: true, sslPinning: { certs: ["sha256/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA="] } })
javax.net.ssl.SSLPeerUnverifiedException: Certificate pinning failure! Peer certificate chain: sha256/afwiKY3RxoMmLkuRW1l7QsPZTJPwDS2pdDROQjXw8ig=: CN=publicobject.com, OU=PositiveSSL sha256/klO23nT2ehFDXCfx3eHTDRESMz3asj1muO+4aIdjiuY=: CN=COMODO RSA Secure Server CA sha256/grX4Ta9HpZx6tSHkmCrvpApTQGo67CYDnvprLg5yRME=: CN=COMODO RSA Certification Authority sha256/lCppFqbkrlJ3EcVFAkeip0+44VaoJUymbnOaEUk7tEU=: CN=AddTrust External CA Root Pinned certificates for publicobject.com: sha256/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA= at okhttp3.CertificatePinner.check(CertificatePinner.java) at okhttp3.Connection.upgradeToTls(Connection.java) at okhttp3.Connection.connect(Connection.java) at okhttp3.Connection.connectAndSetOwner(Connection.java)
### Certificate Pinning
import {fetch} from 'react-native-ssl-pinning';fetch(url, { method: "POST" , timeoutInterval: communication_timeout, // milliseconds body: body, // your certificates array (needed only in android) ios will pick it automatically sslPinning: { certs: ["cert1","cert2"] // your certificates name (without extension), for example cert1.cer, cert2.cer }, headers: { Accept: "application/json; charset=utf-8", "Access-Control-Allow-Origin": "*", "e_platform": "mobile", } }) .then(response => { console.log(
response received ${response}
) }) .catch(err => { console.log(error: ${err}
) })
### Public Key Pinning ```javascript import {fetch} from 'react-native-ssl-pinning';
fetch("https://publicobject.com", { method: "GET" , timeoutInterval: 10000, // milliseconds // your certificates array (needed only in android) ios will pick it automatically pkPinning: true, sslPinning: { certs: ["sha256//r8udi/Mxd6pLO7y7hZyUMWq8YnFnIWXCqeHsTDRqy8=", "sha256/YLh1dUR9y6Kja30RrAn7JKnbQG/uEtLMkBgFF2Fuihg=", "sha256/Vjs8r4z+80wjNcr1YKepWQboSIRi63WsWXhIMN+eWys=" ] }, headers: { Accept: "application/json; charset=utf-8", "Access-Control-Allow-Origin": "*", "e_platform": "mobile", } })
### Disable Pinning ```javascriptfetch("https://publicobject.com", { method: "GET" , timeoutInterval: 10000, // milliseconds disableAllSecurity: true, headers: { Accept: "application/json; charset=utf-8", "Access-Control-Allow-Origin": "*", "e_platform": "mobile", } })
fetch("https://publicobject.com", { method: "GET" , timeoutInterval: 10000, // milliseconds caseSensitiveHeaders: true, //in case you want headers to be case Sensitive headers: { Accept: "application/json; charset=utf-8", "Access-Control-Allow-Origin": "*", "e_platform": "mobile", SOAPAction: "testAction", } })
### Cookies Handling
import {removeCookieByName} from 'react-native-ssl-pinning';removeCookieByName('cookieName') .then(res =>{ console.log('removeCookieByName'); })
getCookies('domain') .then(cookies => { // do what you need with your cookies })
## Multipart request (FormData)
let formData = new FormData()#You could add a key/value pair to this using #FormData.append:
formData.append('username', 'Chris');
Adding a file to the request
formData.append('file', { name: encodeURIComponent(response.fileName), fileName: encodeURIComponent(response.fileName), type: this._extractFileType(response.fileName), uri: response.uri })
fetch(url, { method: "POST" , timeoutInterval: communication_timeout, // milliseconds body: { formData: request, }, sslPinning: { certs: ["cert1","cert2"] }, headers: { accept: 'application/json, text/plain, /', } })
don't add 'content-type': 'multipart/form-data; charset=UTF-8', Setting the Content-Type header manually means it's missing the boundary parameter. Remove that header and allow fetch to generate the full content type.
This project is licensed under the terms of the MIT license.