Flutter HTTPS Server on Mobile Phone - flutter

Question

Hi I am trying to run a server locally on the device and access via a webview - but having issue accessing the files - specially te certs on the mobile device. Here is my code:
import 'dart:io';
import 'package:flutter/material.dart' hide Router;
import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart';
import 'package:shelf_router/src/router.dart';
import 'package:webview_flutter/webview_flutter.dart';
Future<void> main() async {
await startServer();
runApp(const MyApp());
}
// Configure routes.
final _router = Router()
..get('/', _rootHandler)
..get('/www/<message>', _echoHandler);
Response _rootHandler(Request req) {
return Response.ok('Hello, World!\n');
}
Response _echoHandler(Request request) {
final message = request.params['message'];
return Response.ok('$message\n');
}
SecurityContext getSecurityContext() {
// Bind with a secure HTTPS connection
final chain =
Platform.script.resolve('certificates/server_chain.pem').toFilePath();
final key =
Platform.script.resolve('certificates/server_key.pem').toFilePath();
return SecurityContext()
..useCertificateChain(chain)
..usePrivateKey(key, password: 'dartdart');
}
startServer() async {
final ip = InternetAddress.anyIPv4;
// Configure a pipeline that logs requests.
final _handler = Pipeline().addMiddleware(logRequests()).addHandler(_router);
// For running in containers, we respect the PORT environment variable.
final port = int.parse(Platform.environment['PORT'] ?? '443');
final server =
await serve(_handler, ip, port, securityContext: getSecurityContext());
print('Server listening on port ${server.port}');
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Server Bind Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Server Bind'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void initState() {
super.initState();
if (Platform.isAndroid) WebView.platform = AndroidWebView();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: WebView(
initialUrl:
'http://127.0.0.1:8888', //'http://${server.address.host}:${server.port}/index.html',
),
),
);
}
}
Here is the error I get:
[VERBOSE-2:ui_dart_state.cc(209)] Unhandled Exception: FileSystemException: Cannot open file, path = '/certificates/server_chain.pem' (OS Error: No such file or directory, errno = 2)
#0 _File.throwIfError (dart:io/file_impl.dart:635:7)
#1 _File.openSync (dart:io/file_impl.dart:479:5)
#2 _File.readAsBytesSync (dart:io/file_impl.dart:539:18)
#3 _SecurityContext.useCertificateChain (dart:io-patch/secure_socket_patch.dart:236:40)
#4 getSecurityContext (package:server_demo/main.dart:34:5)
#5 startServer (package:server_demo/main.dart:49:67)
#6 main (package:server_demo/main.dart:11:9)
#7 _runMainZoned.<anonymous closure>.<anonymous closure> (dart:ui/hooks.dart:145:25)
#8 _rootRun (dart:async/zone.dart:1428:13)
#9 _CustomZone.run (dart:async/zone.dart:1328:19)
#10 _runZoned (dart:async/zone.dart:1863:10)
#11 runZonedGuarded (dart:async/zone.dart:1851:12)
#12 _runMainZoned.<anonymous closure> (dart:ui/hooks.dart:141:5)
#13 _delayEntrypointInv<…>

Answer 1

Assuming your certificate chain is located in assets/localhost.crt, the private key in assets/localhost.key and the assets folder listed under assets in your pubspec.yaml.
You can try with the following code:
void init() async {
var chain =
utf8.encode(await rootBundle.loadString('assets/localhost.crt'));
var key = utf8.encode(await rootBundle.loadString('assets/localhost.key'));
var context = SecurityContext()
..useCertificateChainBytes(chain)
..usePrivateKeyBytes(key);
var server =
await HttpServer.bindSecure(InternetAddress.anyIPv6, 443, context);
await server.forEach((HttpRequest request) {
request.response.statusCode = HttpStatus.ok;
request.response.write('Hello World!');
request.response.close();
});
}
The problem you are having is derived from how a dart script accesses other files vs how flutter packages and access files in the application bundle. Accessing them as assets in the bundle and passing them to the SecurityContext as Bytes did the trick for me.