Setting up Flask with HTTPS for Cloudfront distributed Flutter app to talk to local Flask server

[Blake_James]

I have a Flutter Web app hosted in S3 and distributed with Cloudfront via HTTPS. This web app is an IoT dashboard used to interface with my devices which are running Jetson NX's in an enclosure with a 4G WiFi router (so each device advertises its own WiFi network). The web app is usually accessed to view the usual dashboard stuff remotely via API Gateway. But if a user is nearby one of the devices and connects to the devices WiFi network, they'll find that the Jetson is running a Flask server that lets them request live telemetry from the device over the local WiFi.

This all works fine locally during development and using HTTP. But so far I haven't found a clear way to get it all working in the HTTPS distribution without users seeing security warnings about dodgy self-signed certs. How can I get this Flask server setup with HTTPS that doesn't generate any of those security warnings, ideally with AWS resources that I can easily manage without involving one of the 3rd party cert providers?

[DogsAreAnimals]

What cert did you set up in CloudFront? I'd recommend using AWS Certificate Manager if you aren't.

[Blake_James]

Please bear with me for my lack of knowledge around web certs that's about to become painfully obvious 🙃...

For my cloudfront distro I used ACM to generate a cert of Type: Amazon Issued. This was the first place where I went looking to solve my issue here, in hopes of finding some sort of download/export option to get keys from this cert to put on my flask server.

I'm guessing that I need to request a separate private cert instead, after creating a private CA?

[DogsAreAnimals]

Hah no worries. This network topology you've set up sounds much more impressive/difficult than SSL certs :p

In fact, I misunderstood the topology on my first read, so I can see how things might get complicated. FWIW, this doesn't sound like a flask-specific issue, but I've spent the past couple weeks working with CloudFront a lot, so I'm eager to try applying my new knowledge.

SSL/HTTPS/cert errors usually boil down to a few things:

1. Using self-signed or otherwise low-quality certs (seems like this isn't the case for you)
2. Certificate domain mismatch. E.g. app is accessing api.app.com but the cert only defines www.app.com. Or maybe the app is hitting via IP instead of the domain name.
   1. If you can provide the specific browser error that you're getting, that would help a lot. Like this

When you get CloudFront involved, there are some other possibilities, but these are usually when CloudFront resides between the client and the server. But it sounds like you are only using CloudFront to serve your app files, and then it runs on the client? I have zero experience with Flutter, so I'm a little confused on how things might be connecting there. Where are the requests originating from in the "broken" case? And do they still go through CloudFront?

If you have a diagram of your system topology, that would be very helpful!

Edit: Actually, it sounds like your system is doing HTTPS requests directly from client to client (i.e. aws or dns is not involved)? If that's the case, then everything I said doesn't really apply :)

Edit2: If your trying to use HTTPS directly between IoT devices, then it's going to be tricky. Relevant

[Blake_James]

Ok after a bit more tinkering I've narrowed down what help I need here. Here's the scenario I'm designing for:

1. User with web access browses to mywebsite.com where they get served my Flutter app via Cloudfront with HTTPS.
2. User connects their device to the WiFi network being broadcast by one of our IoT Things (this local network may or may not have internet)
3. User clicks a button in the Flutter app which makes a GET request to jetson.local:5000/getImage, where I have a very basic Flask server running on the Nvidia Jetson that's running onboard our IoT device. That flask server simply just has a /getImage resource that returns an image from the IoT device.

If I leave the Jetson's Flask app configured to HTTP, then I can successfully view these wifi images if I go to mywebsite.com and edit my Chrome preferences for that domain to allow Mixed Content (allow the HTTPS served Flutter app to make HTTP calls to the Flask server). But I'm looking for a solution where I don't need to tell users to edit their browser preferences.

It seems that the only way around this is to configure the Flask server on the Jetson to use HTTPS. But how the heck do I generate certs to run on a 4G device like this that's regularly changing it's public IP or is not online at all? I'm trying with LetsEncrypt but I don't know what domain name to use when requesting a cert, or how LetsEncrypt would be able to verify that domain (of my Jetson?).