Flutter web, problem making request to a server with self signed certificate

8
votes

I am facing the first big problem with Flutter Web.

I have to login with oauth2 through a post call to my server that has a self signed ssl certificate.

Using http and dio clients to make the request, i receive net::ERR_CERT_AUTHORITY_INVALID. The only way that I found on the web is to use HttpClient, it works for android and IOs but dart:io is not working in web build. Is there a way to trust my ssl certificate for flutter web?? 

       // My simple line of code
      var response = await client.post(authorizationEndpoint.toString(), body: body, headers: headers);
      // What I am looking for 
      var response = await client.post(authorizationEndpoint.toString(), 
                               body: body, headers: headers, 
                       --->    trustanyCA: true);
4
flutterssl-certificateself-signedflutter-web
github.com/flutterchina/dio/issues/32 - Karthik
It uses HttpClient, in fact in the new dio package (from version 3) the changelog says that now supports flutter web and the function onHttpClientCreate does not exist. pub.dev/packages/dio#-changelog-tab- - Stefano Miceli
Did you find a solution for this? DIO on Web(Error: Expected a value of type 'DefaultHttpClientAdapter', but got one of type 'BrowserHttpClientAdapter') - Daniel Hernandez
Why don’t you move to let’s encrypt certificates? They are free but they are fully valid and trusted. So you just fix the issue removing it - Lelio Faieta
@StefanoMiceli I get the same problem with you, have you found the right one? - uyhaW

4 Answers

7
votes

There's no way to do that in a web version. Browser's XMLHttpRequest just doesn't allow to bypass not trusted certificates, though it's possible to do that with other http clients.

If it's only needed for debugging purpose, you can try adding an SSL certificate to your system's trusted certificates (for macOS, drop it to System certificates in Keychain Access), as well as overriding browser's security options. Refer to this question to find out how to override it in Chrome.

For production use, you will still need a trusted valid certificate.

1
votes

You can use the https://pub.dev/packages/universal_io package. It supports the web in addition to Android and iOS.

dependencies:
  universal_io: ^1.0.1

Do the following import instead of dart:io:

import 'package:universal_io/io.dart';

It works the same way.

import 'package:universal_io/io.dart';

Future<void> main() async {
  final request = HttpClient().getUrl(Uri.parse('https://example.com/path'));

  if (request is BrowserHttpClientRequest) {
    request.credentialsMode = BrowserHttpClientCredentialsMode.include;
  }

  final response = await request.close();
  // ...
}

EDIT:

Try this, as it doesn't seem to work with String, try to use Bytes method and follow the path to certificate.

ByteData data = await rootBundle.load('assets/raw/certificate.crt');
SecurityContext context = SecurityContext.defaultContext;
context.setTrustedCertificatesBytes(data.buffer.asUint8List());
client = HttpClient(context: context);

EDIT2:

What if you use HttpClient.badCertificateCallback
Here is a code to accept any cert:

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

EDIT3:

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());
}
1
votes

If you're using self-signed certificates for development and testing you can set your operating system to always trust the certificate, and the browser will respect that.

Alternatively you can generate a valid certificate with Let's Encrypt and then have a local web server use that.

Finally - if you want a quick and easy solution ngrok will give you a secure tunnel to localhost that you can use for development and testing.

0
votes

Also, if you are using google chrome, going to your localhost site setting and chaning insecure content from blocked to allow could help.