Wie kann ich das implementieren von SSL-Zertifikat-Pinning während der Verwendung Reagieren Nativen

Nach Ausschöpfung der aktuellen Spektrum der verfügbaren Optionen aus Javascript, habe ich beschlossen, einfach zu implementieren Zertifikat-pinning nativ es scheint alles so einfach jetzt, dass ich fertig bin.

Skip to Header mit dem Titel Android-Lösung und IOS-Lösung wenn Sie nicht wollen, zu Lesen, durch den Prozess zur Erreichung der Lösung.

Android

Folgenden Kudo ' s Empfehlung ich dachte, sich an die Umsetzung pinning mit okhttp3.

client = new OkHttpClient.Builder()
        .certificatePinner(new CertificatePinner.Builder()
            .add("publicobject.com", "sha1/DmxUShsZuNiqPQsX2Oi9uv2sCnw=")
            .add("publicobject.com", "sha1/SXxoaOSEzPC6BgGmxAt/EAcsajw=")
            .add("publicobject.com", "sha1/blhOM3W9V/bVQhsWAcLYwPU6n24=")
            .add("publicobject.com", "sha1/T5x9IXmcrQ7YuQxXnxoCmeeQ84c=")
            .build())
        .build();

Ich anfing, indem Sie lernen, erstellen Sie eine native android-Brücke mit reagieren nativenerstellen einer toast-Modul. Ich habe dann erweitert es mit einer Methode für das senden einer einfachen Anfrage

@ReactMethod
public void showURL(String url, int duration) {
    try {
        Request request = new Request.Builder()
        .url(url)
        .build();
        Response response = client.newCall(request).execute();
        Toast.makeText(getReactApplicationContext(), response.body().string(), duration).show();
    } catch (IOException e) {
        Toast.makeText(getReactApplicationContext(), e.getMessage(), Toast.LENGTH_SHORT).show();
    }
}

Erfolg bei senden einer Anfrage, die ich dann gedreht, um das senden einer Anfrage angeheftet.

Verwendet habe ich diese Pakete in meiner Datei

import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;

import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;
import okhttp3.CertificatePinner;
import java.io.IOException;

import java.util.Map;
import java.util.HashMap;

Kudo ' s Ansatz war nicht klar, wo ich den öffentlichen Schlüssel oder wie diese zu generieren. zum Glück okhttp3 docs neben der Bereitstellung einer klaren demonstration der Verwendung der CertificatePinner erklärte, dass, um die öffentlichen Schlüssel und alles was ich tun müssen, ist senden Sie eine Anfrage mit einem falschen pin ein, und die richtigen pins wird in der Fehlermeldung angezeigt.

Nach der Einnahme einen moment, um zu realisieren, dass OkHttpClent.- Generator() können verkettet werden, und ich kann die CertificatePinner vor dem bauen, im Gegensatz zu den irreführenden Beispiel in Kudo ' s Vorschlag (und wahrscheinlich ältere version) ich kam mit dieser Methode.

@ReactMethod
public void getKeyChainForHost(String hostname, Callback errorCallbackContainingCorrectKeys,
  Callback successCallback) {
    try {
        CertificatePinner certificatePinner = new CertificatePinner.Builder()
             .add(hostname, "sha256/AAAAAAAAAAAAAAAAAAAAAAAAAAA=")
             .build();
        OkHttpClient client = (new OkHttpClient.Builder()).certificatePinner(certificatePinner).build();

        Request request = new Request.Builder()
             .url("https://" + hostname)
             .build();
        Response response =client.newCall(request).execute();
        successCallback.invoke(response.body().string());
    } catch (Exception e) {
        errorCallbackContainingCorrectKeys.invoke(e.getMessage());
    }
}

Dann ersetzt das öffentliche Schlüsselanhänger habe ich in der Fehler ergab sich wieder die Seite des Körpers, der angibt, hatte ich eine erfolgreiche Anfrage, ändere ich einen Brief von der Taste, um sicherzustellen, dass es Arbeit war und ich wusste, ich war auf der Strecke.

Endlich habe ich diese Methode in meine ToastModule.java Datei

@ReactMethod
public void getKeyChainForHost(String hostname, Callback errorCallbackContainingCorrectKeys,
  Callback successCallback) {
    try {
        CertificatePinner certificatePinner = new CertificatePinner.Builder()
             .add(hostname, "sha256/+Jg+cke8HLJNzDJB4qc1Aus14rNb6o+N3IrsZgZKXNQ=")
             .add(hostname, "sha256/aR6DUqN8qK4HQGhBpcDLVnkRAvOHH1behpQUU1Xl7fE=")
             .add(hostname, "sha256/HXXQgxueCIU5TTLHob/bPbwcKOKw6DkfsTWYHbxbqTY=")
             .build();
        OkHttpClient client = (new OkHttpClient.Builder()).certificatePinner(certificatePinner).build();

        Request request = new Request.Builder()
             .url("https://" + hostname)
             .build();
        Response response =client.newCall(request).execute();
        successCallback.invoke(response.body().string());
    } catch (Exception e) {
        errorCallbackContainingCorrectKeys.invoke(e.getMessage());
    }
}

Android-Lösung, die sich Reagieren Native OkHttpClient

Haben herausgefunden, wie zum senden angeheftet http-Anforderung war gut, jetzt kann ich die Methode verwenden, die ich erstellt habe, aber im Idealfall dachte ich, es wäre am besten, um eine Erweiterung der existierenden client, so dass Sie sofort profitieren von der Umsetzung.

Diese Lösung ist gültig ab RN0.35 und ich weiß nicht, wie es wird fair in die Zukunft.

Beim Blick auf die Möglichkeiten für eine Ausweitung der OkHttpClient für RN stieß ich auf dieser Artikel erklären, wie das hinzufügen von TLS 1.2-Unterstützung durch austauschen der SSLSocketFactory.

Lesen lernte ich reagieren, verwendet eine OkHttpClientProvider für die Erstellung der OkHttpClient Instanz vom XMLHttpRequest-Objekt und daher, wenn wir ersetzen Sie das Beispiel, würden wir gelten pinning, um alle der app.

Ich habe eine Datei namens OkHttpCertPin.java zu meinem android/app/src/main/java/com/dreidev Ordner

package com.dreidev;

import android.util.Log;

import com.facebook.react.modules.network.OkHttpClientProvider;
import com.facebook.react.modules.network.ReactCookieJarContainer;


import java.util.concurrent.TimeUnit;

import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;
import okhttp3.CertificatePinner;

public class OkHttpCertPin {
    private static String hostname = "*.efghermes.com";
    private static final String TAG = "OkHttpCertPin";

    public static OkHttpClient extend(OkHttpClient currentClient){
      try {
        CertificatePinner certificatePinner = new CertificatePinner.Builder()
             .add(hostname, "sha256/+Jg+cke8HLJNzDJB4qc1Aus14rNb6o+N3IrsZgZKXNQ=")
             .add(hostname, "sha256/aR6DUqN8qK4HQGhBpcDLVnkRAvOHH1behpQUU1Xl7fE=")
             .add(hostname, "sha256/HXXQgxueCIU5TTLHob/bPbwcKOKw6DkfsTWYHbxbqTY=")
             .build();
        Log.d(TAG, "extending client");
        return currentClient.newBuilder().certificatePinner(certificatePinner).build();
      } catch (Exception e) {
        Log.e(TAG, e.getMessage());
      }
     return currentClient;
   }
}

Dieses Paket hat eine Methode erweitern, die dauert ein vorhandenes OkHttpClient und Umbauten, durch die certificatePinner und gibt die neu gebaute Beispiel.

Ich dann meine modifizierten MainActivity.java Datei folgenden diese Antwort ist Beratung durch hinzufügen der folgenden Methoden

.
.
.
import com.facebook.react.ReactActivity;
import android.os.Bundle;

import com.dreidev.OkHttpCertPin;
import com.facebook.react.modules.network.OkHttpClientProvider;
import okhttp3.OkHttpClient;

public class MainActivity extends ReactActivity {

  @Override
  public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     rebuildOkHtttp();
  }

  private void rebuildOkHtttp() {
      OkHttpClient currentClient = OkHttpClientProvider.getOkHttpClient();
      OkHttpClient replacementClient = OkHttpCertPin.extend(currentClient);
      OkHttpClientProvider.replaceOkHttpClient(replacementClient);
  }
.
.
.

Diese Lösung wurde durchgeführt, zu Gunsten von ganz reimplementing die OkHttpClientProvider createClient Methode, wie das prüfen der Anbieter erkannte ich, dass die master-version hatte implementiert TLS 1.2 zu unterstützen, aber noch nicht eine verfügbare option für mich zu nutzen, und so den Wiederaufbau zu finden, um das beste Mittel zur Erweiterung des client. Ich Frage mich, wie dieser Ansatz fair, da ich aktualisieren, aber jetzt funktioniert es gut.

Update Es scheint, dass ab 0.43 dieser trick nicht mehr funktioniert. Für timebound Gründen werde ich einfrieren mein Projekt mit 0,42 für jetzt, bis der Grund für Wiederaufbau aufgehört zu arbeiten, ist klar.

Lösung IOS

Für IOS ich hatte gedacht, dass ich brauchen würde, um Sie eine ähnliche Methode, wieder beginnend mit Kudo ' s Vorschlag als meinen führen.

Prüfung der RCTNetwork Modul habe ich gelernt, dass NSURLConnection verwendet wurde, so dass anstatt zu versuchen, zu erstellen ein komplett neues Modul mit AFNetworking, wie vorgeschlagen, in den Vorschlag, den ich entdeckt TrustKit

folgenden seine Erste Schritte habe ich einfach Hinzugefügt

pod 'TrustKit'

meiner podfile und lief pod install

den GettingStartedGuide erklärte, wie ich dies konfigurieren-pod aus meiner pList.Datei aber lieber code verwenden, als die Konfiguration-Dateien, die ich Hinzugefügt die folgenden Zeilen zu meiner AppDelegate.m-Datei

.
.
.
#import <TrustKit/TrustKit.h>
.
.
.
@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{


  //Initialize TrustKit
  NSDictionary *trustKitConfig =
    @{
    //Auto-swizzle NSURLSession delegates to add pinning validation
    kTSKSwizzleNetworkDelegates: @YES,

    kTSKPinnedDomains: @{

       //Pin invalid SPKI hashes to *.yahoo.com to demonstrate pinning failures
       @"efghermes.com" : @{
           kTSKEnforcePinning:@YES,
           kTSKIncludeSubdomains:@YES,
           kTSKPublicKeyAlgorithms : @[kTSKAlgorithmRsa2048],

           //Wrong SPKI hashes to demonstrate pinning failure
           kTSKPublicKeyHashes : @[
              @"+Jg+cke8HLJNzDJB4qc1Aus14rNb6o+N3IrsZgZKXNQ=",
              @"aR6DUqN8qK4HQGhBpcDLVnkRAvOHH1behpQUU1Xl7fE=",
              @"HXXQgxueCIU5TTLHob/bPbwcKOKw6DkfsTWYHbxbqTY="
              ],

          //Send reports for pinning failures
          //Email [email protected] if you need a free dashboard to see your App's reports
          kTSKReportUris: @[@"https://overmind.datatheorem.com/trustkit/report"]
          },

     }
  };

  [TrustKit initializeWithConfiguration:trustKitConfig];
.
.
.

Bekam ich die public-key-hashes von meinem android-Umsetzung und es funktionierte einfach (die version von TrustKit erhielt ich in meinem Hülsen ist 1.3.2)

War ich froh, dass IOS sich herausstellte, Atem

Als eine Randnotiz TrustKit gewarnt, dass es Auto-swizzle funktioniert nicht, wenn die NSURLSession und Verbindung sind bereits swizzled. das heißt, es scheint zu funktionieren gut so weit.

Abschluss

Diese Antwort stellt die Lösung für Android und IOS, da war ich in der Lage, implementieren diese in nativen code.

Eine mögliche Verbesserung könnte sein, Umsetzung einer gemeinsamen Plattform Modul, in dem die Einstellung der öffentlichen Schlüssel und die Konfiguration der Netzwerk-Provider von android und IOS verwaltet werden können, ist in javascript.

Kudo ' s Vorschlag erwähnt einfach hinzufügen die öffentlichen Schlüssel der js-bundle kann jedoch über eine Sicherheitsanfälligkeit, wo irgendwie der bundle-Datei, die ersetzt werden können.

Ich weiß nicht, wie, die Sie angreifen, kann der Vektor-Funktion, die aber sicherlich der zusätzliche Schritt, der Unterzeichnung des bundle.js wie vorgeschlagen, kann schützen die js-bundle.

Ein weiterer Ansatz könnte sein, einfach codieren Sie die js-bundle in 64 bit-string und fügen Sie es in das native-code direkt als die in dieser Ausgabe erwähnt Gespräch. Dieser Ansatz hat den Vorteil der Verschleierung als auch festverdrahtung der js-bundle in der app, so dass es unzugänglich für Angreifer oder so, denke ich.

Wenn Sie bis hierher gelesen-ich hoffe, ich erleuchtete du auf der Suche nach Festsetzung Ihre Fehler und wollen Sie genießen Sie einen sonnigen Tag.