javascript - studio - ¿Ignora los errores de los certificados SSL autofirmados que utilizan la API fetch en una aplicación ReactNative?

su sitio web no posee certificado ssl cloudflare

Question

Estoy construyendo una pequeña aplicación ReactNative para iOS. En él, uso la API fetch para realizar una solicitud de obtención simple a un servidor que controlo que tiene un certificado SSL válido, pero autofirmado. Comprensiblemente, esto causa un error.

Entre iOS / JSC, no estoy seguro de cómo (¡o qué!) Puedo configurar para que mi aplicación ignore este error. Todas las respuestas que he encontrado hasta ahora están relacionadas con las soluciones de Objective-C, estoy buscando algo que busque. Se puede usar con un entorno JSC.

Answer 1

Descargo de responsabilidad: esta solución debe ser temporal y documentada para que no permanezca en la fase de producción del software, esto es solo para desarrollo.

Para iOS, todo lo que tiene que hacer es abrir su xcodeproject (dentro de su carpeta iOS en RN) una vez que lo haya abierto, vaya a RCTNetwork.xcodeproj y en ese proyecto, navegue hasta RCTHTTPRequestHandler.m

En ese archivo verás una línea como esta:

 #pragma mark - NSURLSession delegate

Justo después de esa línea, agregue esta función.

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

Y listo, ahora puede hacer llamadas inseguras a su API sin un certificado válido.

Eso debería ser suficiente, pero si aún tiene problemas, puede que necesite ir a info.plist de su proyecto, hacer clic izquierdo en él y elegir abrir como ... código fuente.

y al final solo agregue

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

por lo que su archivo se verá así

    ...
    <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>

Para una solución lista para producción real, https://.com/a/36368360/5943130 esa solución es mejor

Answer 2

Esta respuesta funciona para Android.

1. encuentre OkHttpClientProvider.java en node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/network .

2. compilar ReactAndroid use NDK

Answer 3

Me encontré con este mismo problema. Como notó, parece que la única forma de hacer que una aplicación nativa de iOS funcione con un certificado autofirmado es escribiendo / modificando el código de Objective-C, lo que no es un buen enfoque para un desarrollador de JavaScript que usa React Native. Por esta razón, creo que su pregunta es un problema de X / Y , y propongo resolver su problema general con un enfoque diferente al uso de un certificado autofirmado en primer lugar.

Yo uso un certificado real para el desarrollo en su lugar. Esto es lo que hice para que mi API de desarrollo local funcionara con SSL y React Native. Es gratis y simple.

• ssh en su servidor público que su dominio está asociado con
• instalar letsencrypt
• generar un certificado para sus subdominios de desarrollo
  • dev.my-domain.com para desarrollar mi sitio web / aplicación web localmente
  • api.dev.my-domain.com para la api
  • ./letsencrypt-auto certonly --standalone -d dev.my-domain.com -d api.dev.my-domain.com
• copie fullchain.pem y privkey.pem en su máquina local
  • probablemente se encuentre en /etc/letsencrypt/live/dev.my-domain.com
  • una forma de obtener los archivos desde su máquina remota: scp -r [email protected].(...):/etc/letsencrypt/live/dev.my-domain.com ./
• reemplace su certificado autofirmado con fullchain.pem y privkey.pem
• point dev.your-domain.com y otros subdominios que usa para la ip de su máquina de desarrollo
  • Puedes modificar tu archivo de hosts en cada máquina que quieras usar el dominio
  • Si su enrutador tiene dnsmasq, puede hacer algo como address=/dev.my-domain.com/192.168.(...) para toda la red (lo recomiendo)

En este punto, debido a que está utilizando un certificado real y de confianza para el dominio al que está accediendo, su api ahora será de confianza en los navegadores y en los dispositivos en desarrollo.