NGINX, OH3 and oh-webframe-card (iframe)

Setup, Configuration and Use Installation
, ,
1

Hello,
since I was “hacked” yesterday evening (someone discovered my OH in the internet and switched on everything), I activated the nginx reverse proxy + ssl + user authentication now.

So far so good, it is running, but what does not work anymore is the webframe displaying a few values from the inverter in the same network as OH.

It was working before.

This is the config:

component: oh-webframe-card
config:
  height: 500
  src: http://10.2.129.123/#/dashboard

Question (as I could not find anything related closely here in the community):

What do I need to configure (and where) to allow/enable the OH UI to show the web page again?

2

Most modern systems will refuse to make calls to an unsecured url from a secured url. I’ve not run into this problem with the webframe so I’m not 100% sure of the best way to fix it, but if your inverter dashboard has a secured address, even just https://10.2.129.123/#/dashboard, that should do the trick.

3

Well, I am not aware of any devices which provide TLS-access, and the inverter does not either.

And also openhab has no secure protocol to connect.
That was exactly the reason to install nginx as reverse proxy.
I am quite sure that there must be a way to provide a secure web page using nginx from an unsecure connection the same way as with openhab and show the “secure” webpage from the proxy instead.

4

Might be a misunderstanding … but openhab provides a secure port that can be used to connect to openhab on port 8443. See Securing Communication and Access | openHAB

Does the browsers webconsole show any error message related to this ?

what are the results of your trial ?

5

Well, the website you are referencing is the same that I followed.
And it clearly states to either use a VPN connection, myopenHAB Cloud Service or a reverse proxy to provide secure remote access.

The UI shows exactly nothing in the iframe anymore since ngix was activated:

image
image982×573 33.6 KB

Therefore the question:

When nginx is able to proxy the local OH UI webpage, couldn’t it also proxy the inverter’s webpage and provide a secure version via the same instance and SSL certificate?
Wouldn’t that work around the “problem” of not being able to show an insecure webpage in an iframe of a secure webpage?

6

any error message in the browser’s console ?

should work.
I would setup multiple entries starting with

server {
        listen 443 ssl;
        server_name server1.domain.com;

whereas the server_name is used to distinguish between the entries.

Make sure that all related server names are part of the certificate.

I dont use the same certificate with multiple name entries but separate certificates.

7

Yeap, same certificate (letsencrypt) won’t work.

The error shown is as expected:

Mixed Content: The page at ‘https://openhab…/’ was loaded over HTTPS, but requested an insecure frame ‘http://fronius1…/#/dashboard’. This request has been blocked; the content must be served over HTTPS.

Now I need to find out how to add a second configuration and a second certificate from letsencrypt somehow.

The existing config has been done by openhabian, not me.

8

Hi,
Actually, it is just what you have already been told.
Just add another server listen block in your nginx config and do a permanent redirect from your http inverter site to SSL listen block on any port you want for the iframe to be inside your web page as long as what you redirect is set to a ssl and the cert has a valid entry for whatever you are using for openhab the inverter iframe will be same as how you did for openhab it will treat it as secure and not mixed content. I do not recall if lets encrypt allows you to do a wildcard SAN entry if it does you can use one cert if it does not you will have to add the entries for the second cert in the new SSL listen block for your inverter HTTPS redirect listen block also if you do not use a different port or FQDN for the inverter site you may have issues when nginx trys to start with binding conflicts
All you are doing is basically another reverse proxy for your local inverter http site to allow it to be accessed from outside (keep in mind an iframe is really an entirely different web site that also has to handle being behind your firewall and have a reverse proxy to get out and then you need a http to https redirect to solution the mixed content security block.

9

Just wanted to add, even if wildcard cert is not possible (usually requires dns validation), you can add multiple domains to the same cert. Just use the -d <domain> several times when running certbot. All domains will be added to the SAN field of the cert.