I run OpenHAB2 on a Raspberry Pi and use Webview to view charts created by Grafana on the same machine.
This works fine locally, i.e., if accessed with ip-address http://192.168.1.16:8080, but does not work via https://192.168.1.16:8443, since the Webview elements point to static pages that try to load the Grafana charts over plain http … so Firefox blocks them with the following error: Blocked loading mixed active content "http://192.168.1.16:8080/static/chartsTempOutsideDay.html" Note that using 8443 would not help, since the static pages still contain the http link to Grafana … however, this is not what I am writing about, but it helps understanding my problem.
Now, to access the OH from the internet, I run nginx reverse proxy on 192.168.1.6, that passes traffic to https://openhab.mysite.com to http://192.168.1.16:8080.
This way, I can access the OH, but the charts won’t load. First, I got the the same error as above, but even when I allowed loading of mixed content, the charts do not work. It looks like the local addresses do not get translated, so Firefox is trying to load content from 192.168.1.16 … while accessing the site from the internet.
I have seen in other threads that the setup with nginx should work, but they have it on the same machine as OpenHAB … is this the problem? And if so, what should I do? Is there some way to adjust the nginx setup on the other server, or should I install an nginx instance on the Raspberry pi as well and forward from one nginx to the other? (I am new to all this reverse-proxy thing.)
Note: I have also access to Grafana via https://grafana.mysite.com, with authentication by nginx (since OpenHAB requires grafana with anonymous access on the LAN). This means that I could change the links to Grafana to use the internet address, but that would mean removing the authentication … and I do not want all my charts open on the internet…
Thanks.
In the document, you write: When the Grafana panels do not properly update this is most likely caused by Same-origin policy violations. These can be resolved by for instance configuring a reverse proxy on the same host/port that proxies traffic to ESH/openHAB and Grafana. Does it mean that I should have nginx on the Raspberry pi as well, or can I do something with the Access-Control-Allow-Origin header on the main server (192.168.1.6)?
I don’t use the Access-Control-Allow-Origin (CORS) headers myself. It should be possible to use them when you can connect to both machines.
In my own setup there is one Nginx instance that proxies all the traffic to other applications (in different Docker containers). Within my own LAN I also connect through this Nginx. My Webview elements use URLs with a valid domain name. DNS is setup to resolve the domain name to the internal IP of the Nginx instance within my own LAN. On the Internet the same hostname is resolved to the IP of my home router which routes the traffic to the Nginx instance. Depending on the path, Nginx proxies the traffic to other applications.
Thank again - but doesn’t this mean that you have a Grafana instance open on the internet(since you use a valid domain name in Webview and OpenHAB does not support authentication of Grafana)?
This is exactly the solution I want to avoid, as I wrote in the original post…
It’s not open on the Internet because also the traffic to Grafana is proxied through Nginx with the same basic authentication that is used for openHAB.
Thanks, this works, even with the nginx server sitting on a different machine than openHAB and Grafana.
The only thing that does not work now is the Android app, which, according to the openHAB documentation needs absolute path in the Webview link, while I am using relative path (…/static) to avoid the complaints about http link from within https document.
Does it work for you?
(I guess I could use the domain name already in the Webview, if I get a proper ssl certificate for openHAB?)
I also got issues with the Android App when using relative paths so now I use absolute paths in all Webviews (starting with https://).
The Grafana JavaScript panels also work nicely in the Android App so you can touch parts of the graph and see particular values at a certain time. I even created a PR to get that working.
I think you can also use a self signed certificate for your domain and add the public key in the App. Mine is using a free Let’s Encrypt generated certificate.
Thanks again.
I wanted to replace OpenHAB’s self-signed certificate with a Let’s Encrypt one, but did not found a simple way to do it, other than installing nginx on the Pi.
So, instead, I use the domain url (htps) in the Webview, so it goes through the same nginx as all other OpenHAB traffic.
This also works in the Android app.
This means that having nginx on another server than OpenHAB and Grafana turns out to be no problem at all
I just wander what effect does using domain names (in my case twice, first in Webviews for the static OpenHAB pages, and then from those to Grafana) have on the connection speed (if any) - I would expect that once the name get resolved, the system should be smart enough to realize that the data are actually on the same machine?
