Ignora errori per certificati SSL autofirmati utilizzando l'API di recupero in un'app ReactNative?

Question

Sto costruendo una piccola applicazione iOS ReactNative. In esso, utilizzo l'API fetch per effettuare una semplice richiesta di ottenere un server che controllo che abbia un certificato valido, ma autofirmato, SSL. Comprensibilmente, ciò causa un errore.

Tra iOS/JSC, non sono sicuro di come (o cosa! cercando qualcosa che posso usare con un ambiente JSC.

Answer 1

Ho riscontrato questo stesso problema. Come hai notato, sembra che l'unico modo per far funzionare un'app iOS nativa con un certificato autofirmato sia scrivere/modificare il codice Objective-C, che non è un buon approccio per uno sviluppatore JavaScript che utilizza React Native. Per questo motivo, penso che la tua domanda sia X/Y problem e propongo di risolvere il tuo problema generale con un approccio diverso dall'uso di un certificato autofirmato in primo luogo.

Io invece uso un certificato reale per lo sviluppo. Ecco cosa ho fatto per far funzionare la mia API di sviluppo locale con SSL e React Native. È gratuito e semplice.

• ssh nel vostro server pubblico che il dominio è associato con
• installare letsencrypt
• generare un certificato per i sottodomini di sviluppo
  • dev.my-domain.com per lo sviluppo di mio sito/webapp localmente
  • api.dev.my-domain.com per l'API
  • ./letsencrypt-auto certonly --standalone -d dev.my-domain.com -d api.dev.my-domain.com
• copia fullchain.pem e privkey.pem alla vostra macchina locale
  • probabilmente trovato sotto /etc/letsencrypt/live/dev.my-domain.com
  • un modo per ottenere i file dal computer remoto: scp -r your_user@123.123.(...):/etc/letsencrypt/live/dev.my-domain.com ./
• sostituire la vostra auto con certificato completo con fullchain.pem e privkey.pem
• punto dev.your-domain.com e altri sottodomini che utilizzi per il tuo computer di sviluppo ip
  • è possibile modificare il file hosts su ogni macchina che si desidera utilizzare il dominio
  • se il vostro router ha dnsmasq, si può fare qualcosa di simile address=/dev.my-domain.com/192.168.(...) per l'intera rete (mi raccomando questo)

A questo punto, poiché si sta utilizzando un certificato reale e attendibile per il dominio a cui si sta accedendo, l'API verrà ora considerata attendibile nei browser e sui dispositivi in ​​fase di sviluppo.

Answer 2

Declinazione di responsabilità: questa soluzione deve essere temporanea e documentata in modo da non rimanere nella fase di produzione del software, ma solo a scopo di sviluppo.

Per iOS, tutto ciò che dovete fare è aprire il vostro xcodeproject (all'interno della vostra cartella iOS in RN) una volta aperto, andare su RCTNetwork.xcodeproj e in quel progetto, navigare a RCTHTTPRequestHandler.m

In questo file si vedrà una linea come questa:

#pragma mark - NSURLSession delegate 

subito dopo quella linea, aggiungere questa funzione

- (void)URLSession:(NSURLSession *)session didReceiveChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential *credential))completionHandler 
{ 
    completionHandler(NSURLSessionAuthChallengeUseCredential, [NSURLCredential credentialForTrust:challenge.protectionSpace.serverTrust]); 
} 

E voilà , ora puoi effettuare chiamate insicure alla tua API senza un certificato valido.

Questo dovrebbe essere sufficiente, ma se si riscontrano ancora problemi, potrebbe essere necessario andare a info.plist del progetto, fare clic con il tasto sinistro su di esso e scegliere Apri come ... codice sorgente.

e alla fine basta aggiungere

<key>NSAppTransportSecurity</key> 
    <dict> 
    <key>NSAllowsArbitraryLoads</key> 
    <true/> 
    </dict> 

modo il file sarà simile a questa

... 
    <key>UISupportedInterfaceOrientations</key> 
    <array> 
     <string>UIInterfaceOrientationPortrait</string> 
     <string>UIInterfaceOrientationLandscapeLeft</string> 
     <string>UIInterfaceOrientationLandscapeRight</string> 
    </array> 
    <key>UIViewControllerBasedStatusBarAppearance</key> 
    <false/> 
    <key>NSLocationWhenInUseUsageDescription</key> 
    <string></string> 
    <key>NSAppTransportSecurity</key> 
    <dict> 
    <key>NSAllowsArbitraryLoads</key> 
    <true/> 
    </dict> 
</dict> 
</plist> 

Per una soluzione pronta produzione reale, https://stackoverflow.com/a/36368360/5943130 tale soluzione è meglio lavorare

Answer 3

Questa risposta per Android.

1. find OkHttpClientProvider.java su node_modules\react-native\ReactAndroid\src\main\java\com\facebook\react\modules\network.

2. compilare uso ReactAndroid NDK