Flutter Image.network(...) throws HandshakeException

Question

I have started working with flutter and dart a few days ago and it's going well so far. Really nice tool, but for the app, I'm building I need a picture from a webserver a whenever I'm trying to call it with new Image.network(URL) this exception is thrown:

HandshakeException:

Handshake error in client (OS Error: CERTIFICATE_VERIFY_FAILED: unable to get local issuer certificate(ssl_cert.c:345)).

Thanks in advance if anyone could help me.

Solution 1

This is working fine for me

var image = new Container(
    width: 100.0,
    height: 100.0,
    decoration: new BoxDecoration(
      borderRadius: new BorderRadius.circular(3.0),
      color: const Color(0xff7c94b6),
      image: new DecorationImage(
        image: new NetworkImage(
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwlzVkvBV1EA_w87NFvYAhT-EC2HMRpfTuRFtHE7nXE5GPvnsQ"),
        fit: BoxFit.cover,
      ),
    ),
  );

please do check this answer as well to add badCertificateCallback

_client = new HttpClient();
_client.badCertificateCallback = (X509Certificate cert, String host, int port) => true;

Solution 2

A way to skip the problem of SSL certification and solve the Image.network(url) issue is to use the following code:

import 'dart:io';

class MyHttpOverrides extends HttpOverrides{
  @override
  HttpClient createHttpClient(SecurityContext context){
    return super.createHttpClient(context)
      ..badCertificateCallback = (X509Certificate cert, String host, int port)=> true;
  }
}

void main(){
    HttpOverrides.global = new MyHttpOverrides();
    runApp(new MyApp());
}

Solution 3

I got same issue ! Able to solve it app (It's a server related problem, so Better solve it on server side! ) sol: Add user trust certificate locally ! or skip checking ! I choose to add certificate. Add your certificate(for your specific domain) as an asset in your pubsec.yaml file. (You can collect it form web browser)

assets:
   - assets/raw/certificate.pem

Then add the following code somewhere in your application before making network requests. For example, in the main function.

void main() async{
 await WidgetsFlutterBinding.ensureInitialized();
  ByteData data = await 
  rootBundle.load('assets/raw/certificate.pem');
  SecurityContext context = SecurityContext.defaultContext;
  context.setTrustedCertificatesBytes(data.buffer.asUint8List());
  runApp(MyApp());
}

Comments

[JokingWolf]

thanks for the help. I found my problem, it was a certificate issue, somehow my app didn't find the right certificate on my phone (maybe because it was seeing it as an emulator?). I tried to do it with the badCertificateCallback and a normal HttpRequest but couldn't get the image from the data. The server now transmits intermidiate certificates, this fixed the problem for me.

[JokingWolf]

I am not using Kaspersky thanks for the input though.

[JokingWolf]

I tried your code and it worked fine. It was just the server i was asking for the image I guess.

[Kira]

Agree with @JokingWolf : its better to add the intermediate certificates to the .pem file in the webserver / load balancer terminating SSL connections. Had the same issue with a cert issued by Comodo. My flutter app was failing with the error CERTIFICATE_VERIFY_FAILED certificate verify failed: unable to get local issuer certificate. Adding intermediate certificates fixed the issue

[Mitul Varmora]

That's perfect solution to override for all API calls using HttpClient.

[miguelps]

Doesn't this method create vulnerabilities? man in the middle and stuff.

[miguelps]

Seems like the problem should be solved in the server, instead of doing this.

[Nuqo]

!!!this is a bad solution as miguelps points out, should not be used for production code!!!

[Jay-flow]

In null safety, you should write down the SecurityContext? for type hint