[Codebeispiel] smartVISU / sh.py mit SingleSignOn (via Cloudflare)

[Shai]

Hallo zusammen,

ich habe mich in den letzten Tage mal damit beschäftigt meine Visu und Smarthome-NG auf der neusten Version aufzusetzen und das ganze dann direkt in Docker zu verschieben.

Dank der super Vorlange von Henfri war das alles auch ziemlich schnell erledigt. Danke dafür henfri


Bisher hatte ich immer über VPN auf auf die VISU zugegriffen, aber so wirklich bequem war das nie. Da bin ich über den Beitrag: https://www.smarthomeng.de/nginx-als-reverseproxy gestolpert.
Jetzt fand ich Basic-Auth oder Client-Zertifikate nicht so besonders charmant. Ersteres ist irgendwie "uncool" und nicht unbedingt mit einem Passwort-Manager kompatibel, und Client-Zertifikate fand ich zu kompliziert bzw. zu aufwändig das auf jedem Gerät einzurichten.


Da ich seit geraumer Zeit meine eigene Domäne besitze hatte ich irgendwann mal Cloudflare als Dienst aufgeschaltet. Hier einfach in der kostenlosen Version als DNS / CDN. Dafür muss man erst einmal nur bei seinem Betreiber (bei mir Strato) die Standard Name-Server gegen die von Cloudflare austauschen und schon ist das Ding in Betriebt.
Soweit so gut. Die kostenlose Version bietet aber auch schon z.B. ein kostenloses Zertifikat, eine Handvoll Firewall Regeln, etc.

Da ich von meinem ISP eine "quasi" statische IPv6 Adresse bekomme und für die Visu ja schon einen sprechenden Namen haben wolle hab ich mich mal wieder bei Cloudflare eingeloggt und eine neue Sub-Domain mit AAAA Record angelegt.
Außerdem wollte ich natürlich meine Visu nur per HTTPS erreichen. Hier ist "Let's Encrypt" natürlich perfekt, noch besser: mit einem Cloudflare-Account kann man die ACMEv2 Challenge durchführen und sich auch ein Wildcard-Zertifikat erstellen lassen. (dafür gibts dann certbot-dns-cloudflare => https://certbot-dns-cloudflare.readt....io/en/stable/). Außerdem muss kein Webserver auf Port 80 auf der Domäne erreichbar sein.

Damit habe ich dann erst mal angefangen:

- Subdomain mit Ziel meinen lokalen Server eingerichtet
- Let's Encrypt ein Wildcard Zertifikat erstellt und SSL in Cloudflare auf "full (strict)" gestellt. (Damit ist nicht nur der Weg bis zum Cloudlfare-Server per SSL abgesichert, auch eigentliche Web-Server muss mit einem vertrauenswürdigem Zertifikat ausgestattet sein)
- lokal einen weiteren Docker-Container mit Nginx und der SSL Config (aus dem Blog-Post open aufgesetzt)
- in der Firewall meines Routers Port 80 bzw. 443 zu meinem Webserver freigegeben


Getestet -> Läuft! Leider ohne Absicherung, also erst mal wieder den NGINX gestoppt.


Dann bin ich beim stöbern auf den Punkt "Access" im Cloudflare gestoßen. Laut Beschreibung ermöglich das einen SSO über ettiche bekannte Dienste (Google, Facebook, Github, etc...) ohne Anpassung der Application. Das klang interessant! Bis zu 5 User sind auch noch kostenlos möglich, perfekt!

Also hab ich das ganze einfach mal aktiviert, schnell eine Access Policy angelegt mit "allow all" für meine eMail-Adresse, dann noch Google Oauth nach der im Cloudflare vorhanden Anleitung konfiguriert und den ersten Aufruf gestartet.

Was soll ich sagen, funktioniert einwandfrei. Wenn man nun meine VISU aufruft wird man automatisch von Cloudflare zu Google Login weitergeleitet, und nach erfolgreichem Login gehts dann ganz normal los. (Lediglich den "Hack" der io_smarthome.js musste ich noch integrieren)
Anschließend noch mal mit einem zweiten Konto getestet, -> Access Denied. Was will man(n) mehr.

Als Feintuning habe ich dann noch das "Client" Zertifikat von Cloutdflare in der NGINX Config "ssl_client_certificate" hinterlegt, so sind direkte Aufrufe auf meine IPv6 Adresse des Servers nicht mer möglich.
Zusätzlich habe ich nur die Cloudflare IPs in der Firewall freigegeben.

=> Damit denke ich sollte die Absicherung ausreichend gegeben sein und nur noch Aufrufe über Cloudflare zu einem Ergebnis führen.


Klingt wahrscheinlich beim Lesen irgendwie konfus, aber vielleicht ist das auch für den ein oder anderen interessant.
Wer keine statische IP Adresse hat, kann natürlich einen DynDNS Dienst verwenden und statt eines A / AAAA Eintrags auch einen CNAME Eintrag verwenden.
(Eine eigene Domain bei der man den NameServer anpassen kann setzt das ganze allerdings voraus, kostet bei Strato glaub ich ca 10 Euro im Jahr)


Ein paar Screenshots aus Cloudflare hab ich mal gemacht, die NGINX Konfiguration kann aus dem Blog-Post übernommen werden - bei Bedarf kann ich die aber auch noch mal anhängen.


Falls Fragen bestehen, einfach mal melden - ich werde versuchen es so gut es geht zu beantworten.



Grüße,


dns.PNG crypto.PNG access.PNG

[mayrjohannes]

Hallo Shai,
ich weiß dein Beitrag ist eine weile aus, aber ich versuche gerade genau das gleich wie do damals realisiert hast. Nur verstehe ich nicht so ganz wie ich mit dem websocket von smarthomeng umgehen soll. Ich hab in cloudflare neben smartVisu eine zweite "public hostename" für smarthomeng angelegt das ich im lokalen Netz an die IP von smarthomeng leite. Aber egal wie ich diesen zweiten public hostname konfiguriere, ich komme zwar auf die smartvisu seite, aber dort bekomme ich immer den Fehler das die Verbindung zum smarthomeNG Server nicht hergestellt werden konnte (Websocket-Fehler: undefined).
In der Smartvisu Config habe ich bei Host/IP den public hostname eingetragen. Bei SV Hostname ebenfalls den public hostename.
Mach ich das alles im lokalen Netz ohne cloudflare und trage die lokalen hostenamen in beide felder ein (also keine IP's sondern die Hostenamen die über meinen lokalen DNS des Pi-hole laufen), dann funktionert alles wunderbar.

Ich gehe also davon aus, dass es sich rein um eine falsche Konfiguration von cloudflare handelt und ich da den websocket von smarthomeNG nicht korrekt durchreiche.

Danke für deine hilfe

[Shai]

Danke für deine hilfe

Hey,

ich befürchte das ich Dir leider gar nicht mehr wirklich weiterhelfen kann.
Ich habe vor gut zwei Jahren das ganze System gegen "Home Assistant" ausgetauscht. Ich benutze zwar immer noch Cloudflare, allerdings gibt es für HA ein Addon (Cloudflared) was einen sicheren "Argo Tunnel" aufbaut, so dass man sich um Freigaben oder Konfiguration nicht mehr kümmern muss.

https://developers.cloudflare.com/cl...nect-networks/

Man kann Cloudflared auch einzeln (ohne HA) nutzen, das Projekt gibt es hier:
https://github.com/cloudflare/cloudflared

Aber: der Tunnel macht nur den lokalen Server zugänglich vom außen, es wird keine Authentifizierung hinzugefügt. (HA hat halt Login inkl. 2FA mit an Board)
Ob Cloudflare noch "Access" anbietet und ob das mit dem Argo zusammen funktioniert kann ich leider nicht sagen.


Grüße
Lars

[wvhn]

Moin mayrjohannes,

In smartVISU gibt es in der Datei ./driver/hints_smarthomeng.md ein paar Hinweise zur Konfiguration. Der smarthomeNG-Treiber der aktuellen smartVISU ist gegenüber dem Stand von 2019 weiter entwickelt, so dass die damalige Vorgehensweise von Lars nicht mehr 100%-ig passt.

Der Websocket-Client läuft auf dem Endgerät, d.h. er kommt von außerhalb nur über Port 80 bzw. 443 mit dem Protokoll ws:// bzw. wss:// ins lokale Netz. Cloudflare bzw. der nginx müssen diese Verbindung dann an die IP-Adresse von shNG auf die Ports 2424 und 2425 routen. Ich vermute, dass die Umsetzung auf die Ports nicht richtig konfiguriert ist.

Gruß
Wolfram

[mayrjohannes]

Hallo wvhn danke für deine rasche Antwort!
laut hints_smarthomeng.md werden 3 Fälle unterschieden. Die ersten beiden konnt ich bisher immer erfolgreich verwenden (aber nur von intern).
Verstehe ich die 3 Variante richtig: wenn ich von extern (also z.B. über Cloudflare) zugreifen will, dann darf ich in der smartVisu Config den von außen erreichbaren hostenamen gar nicht angeben?
Smartvisu versucht dann wenn ich von extern z.b. über smartvisu.example.com aufrufe den Websocket zu smarthomeng über ws://smartvisu.example.com:80 bzw. wss://smartvisu.example.com:443 an.
Wie kommt der dann aber in meinem internen Netz zu smarthomeNG der ja auf Port 2424 und 2425 und nicht auf Port 80 und Port 443 hört?

Laut Debug Ausgabe von Chrome versucht mein Browser auch laufend den Socket mit wss://smartvisu.example.com:443 zu öffnen, kommt aber halt nicht durch.

[mayrjohannes]

Habs geschafft!!!

Habe jetzt folgendes gemacht:
Lokal: nichts verändert, alles wie früher. Ich kann weiterhin über smartvisu.home.local/smartvisu zugreifen.

Extern (cloudflare): in meinen Tunnel hab ich zwei public domains eingefügt:

1. smartvisu.example.com/smartvisu --> http://IP_SMARTVISU
2. smartvisu.example.com --> http://IP_SMARTVISU:2424

wenn ich jetzt von extern im browser https://smartvisu.example.com/smartvisu aufrufe, funktioniert alles wunderbar.
Beim aufruf von https://smartvisu.example.com kommt halt jetzt eine Fehlermedlung das vom Browser aus der Websocket nicht geöffnet werden kann.

Vielleicht kann mir noch wer ein paar Fragen zu dem Konstrukt beantworten:

1. Wie kann ich es hier jetzt noch schaffen, das smartvisu.example.com vom Browser aus nicht eine Fehlermeldung, sondern die Visualisierung anzeigt? Eigentlich gar nicht oder? Cloudflare müsste hier ja jetzt unterscheiden ob https:// oder wss:// request und diesen unterschiedlich behandeln. Das wird vermutlich nicht funktionieren oder?
2. Ich hab in cloudflare "Access" wie im ersten Post beschrieben eingerichtet. Deswegen denke ich das ganz ist jetzt halbwegs sicher und niemand kann ungewollt zugreifen und meine Lichter von Geisterhand schalten.
3. Ohne "Access" könnte jetzt aber doch das Internet über wss://smartvisu.example.com ohne jegliche Authentifizierung auf meine smarthomeNG zugreifen und meine Items verändern. Wie könnte man das unterbinden?
4. Wäre es eleganter das ganze mit einem lokalen nginx zu lösen und smartvisu.example.com --> http://IP_NGINX zu nutzen und dann nginx das "verteilen" zu überlassen? Liese sich da ev. dann Punkt 1 auch erschlagen?