Using https with a self signed certificate will display a ugly warning message to the user that makes it unsuitable for my use case.
I’ve also tried to embedded an iframe in an https web page hosted online with a valid certificate using a service worker so that the encryption is done by the parent page of the iframe through postmessage api but when the https page go offline the subtlcrypto API become unavailable on some browser.
So can you propose some hacks please?
Please don’t kill me, I’m a beginner.
The only way to avoid the ugly warning displayed by the browser is to have a certificate signed by a CA trusted by the browser. So you can roll your own CA as suggested by B. Fleming, but this is a lot of work to maintain and make it trusted on all major browsers.
The main and decisive security thread I have found is the ability for any attacker to control the code of your embedded crypto library by using something like a MITM attack.
So as others suggested, using a Let’s Encrypt certificate is a good idea, but you will have to define a domain name you control for each of your LAN servers (may be changing only subdomains) and bind it to a local IP address on your router.
Also, be aware that other attacks exists and a single point of failure is very dangerous in this kind of configuration.