React Native XMLHttpRequest request fails if ssl (https) certificate is not valid

Question

When i am doing XMLHttpRequest to https server with not valid certificate React Native throws exception \"The operation couldn’t be completed. (NSURLErrorDomain error -1202.)\"<

Answer 1

That's happening because of the new App Transport Security (ATS) feature in iOS 9 (and 8.4 too). ATS was put in place make sure that your app comforms to the best practices for secure connections. If you are hitting this error it means that you are not using a secure connection and you should really do something about this.

However, you can override the default behavior by editing the Info.plist file of your application.

There are many different flags that you can set and they are all described in an Apple official technote.

The simplest modification that will let you turn off ATS all together is the following one:

1. Open your project in Xcode
2. On the left, where all the files for your project are listed search for Info.plist
3. Right click on that file and select Open as > Source Code
4. Add the following piece of code to under the first <dict> tag

You should really really really not leave this here if you plan on releasing your app.

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

Answer 2

Disclaimer: This solution should be temporary and documented so that it won't stay in the production phase of the software, this is for development only.

For iOS, all you have to do is, open your xcodeproject (inside your iOS folder in RN) once you have that open, go to RCTNetwork.xcodeproj and in that project, navigate to RCTHTTPRequestHandler.m

In that file you will see a line like this:

 #pragma mark - NSURLSession delegate

right after that line, add this function

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

And voila, you can now make insecure calls to your API without a valid certificate.

That should be enough, but if you are still having problems, you might need to go to your project's info.plist, left click on it and choose open as... source code.

and at the end just add

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

so your file will look like this

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

For a real production ready solution, https://stackoverflow.com/a/36368360/5943130 that solution is better

Answer 3

As far as I can tell you can't do this in web XHR either, so React Native won't expose it. I've had a check through the source code which seems to confirm this.