Tablet UI und FhemWeb mit SSL und Form Authentication

Thorsten Pferdekaemper · 10 Dezember 2015, 22:20:34

Hi,
ich befasse mich zur Zeit etwas mit der Absicherung meines Zugangs zu FHEM, inklusive Benutzer-Anmeldung und SSL-Verschlüsselung. Dabei soll man sich nur einmal anmelden müssen und trotzdem Tablet-UI und FhemWeb verwenden können. Das ganze funktioniert so einigermaßen, aber noch nicht perfekt. Vielleicht will es sich ja mal jemand anschauen, der sich mit solchen Dingen wirklich auskennt.
Ausgehend von http://forum.fhem.de/index.php/topic,29909 und http://forum.fhem.de/index.php/topic,27171 habe ich folgendes gemacht.

Voraussetzungen

Ein aktueller apache2. Wahrscheinlich mindestens 2.4.
FHEM mit installiertem Tablet-UI und einer funktionierenden index.html
Ein Zertifikat für den eigenen Server, z.B. wie in https://gist.github.com/gbirke/8608543 beschrieben.
Eine Portweiterleitung auf Port 443 des FHEM-Rechners und eine DynDNS-Lösung, um von außen eben diesen Port 443 zu erreichen. Bei mir ist das blablabla.hopto.org:9046, was auf 192.168.nnn.mmm:443 weitergeleitet wird. (Natürlich nicht wirklich blablabla...)
Eine FHEMWEB-Instanz, bei der weder "global" noch "basicAuth" gesetzt ist. Damit kann man zwar ohne Passwort, aber nur vom FHEM-Server selbst zugreifen. (D.h. normalerweise kann man das Ding gar nicht benutzen.) Bei mir läuft das auf Port 8082.

www-Verzeichnis von FHEM für Apache zugreifbar machen
Das geht per Symlink in /var/www. Also in etwa als root:

Code Auswählen


cd /var/www
ln -s /opt/fhem/www fhemweb

index.html des Tablet-UI anpassen
Der Anfang meiner index.html sieht in etwa so aus:

Code Auswählen


<html>
<head>
	<title>FHEM-Tablet-UI</title>
	<meta name="fhemweb_url" content="https://blablabla.hopto.org:9046/fhem">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=10.0, user-scalable=yes" />
	<meta name="widget_base_width" content="50">
	<meta name="widget_base_height" content="50">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
	<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
	
	<link rel="stylesheet" href="/fhemweb/tablet/lib/jquery.gridster.min.css" />
	<link rel="stylesheet" href="/fhemweb/tablet/css/fhem-tablet-ui.css" />
	<link rel="stylesheet" href="/fhemweb/tablet/lib/font-awesome.min.css" />
	<link rel="stylesheet" href="/fhemweb/tablet/lib/jquery.toast.min.css" />
	<link rel="stylesheet" href="/fhemweb/tablet/lib/powerange.min.css" />
	
	
	<script type="text/javascript" src="/fhemweb/pgm2/jquery.min.js"></script>
        <script type="text/javascript" src="/fhemweb/tablet/lib/jquery.knob.mod.min.js"></script>
	<script type="text/javascript" src="/fhemweb/tablet/lib/jquery.toast.min.js"></script>
	<script type="text/javascript" src="/fhemweb/tablet/lib/jquery.circlemenu.js"></script>
	<script type="text/javascript" src="/fhemweb/tablet/lib/powerange.min.js"></script>
	<script type="text/javascript" src="/fhemweb/tablet/lib/jquery.gridster.min.js"></script>
        <script type="text/javascript" src="/fhemweb/tablet/lib/fa-multi-button.min.js"></script>
	<script type="text/javascript" src="/fhemweb/tablet/js/fhem-tablet-ui.js"></script>
	
	<!-- Enable this lines for usage with WebViewControl --><!--
	<script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
	<script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script>
	<script type="text/javascript">var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
	--><!-- End for WebViewControl -->

</head>
<body>

<!-- available class: container,left,right,cell,narrow,darker,big,bigger,small,thin,large,wider -->
<!-- available data-type: symbol,dimmer,homestatus,label,push,slider,switch,thermostat,volume,weather -->

<a href="/fhem">FHEM</a> <a href="/logout">Logout</a>
<br>

<div class="gridster">
<ul>

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">

Die wesentlichen Änderungen sind:

Die meta-Angabe "fhemweb_url". Hier muss die von außen erreichbare URL angegeben werden, da das Tablet-UI am Frontend (also im Browser) läuft.
Bei den Pfadangaben, wo vorher /fhem/www stand muss jetzt /fhemweb stehen.
Irgendwo habe ich noch "<a href="/fhem">FHEM</a> <a href="/logout">Logout</a>" eingefügt, um direkt nach FhemWeb navigieren zu können. Außerdem ist eine Logout-Möglichkeit ganz nett.

Die Login-Seite
Wesentlich ist hier, dass die Seite ein Formular mit Benutzername und Passwort hat und das ganze per POST mit leerer "action" abschickt. Also in etwa so:

Code Auswählen


<html>
<head>
  <meta charset="UTF-8">
   <title>FHEM - Home, Sweet Home</title>
</head>
<body>
    <h1>Home, Sweet Home</h1>
    <form method="POST" action="">
    	<input type="text" name="httpd_username" placeholder="Username" required="required" />
        <input type="password" name="httpd_password" placeholder="Password" required="required" />
        <button type="submit" name="login">Let me in.</button>
    </form>
</body>
</html>

Die Datei ist bei mir /var/www/login.html.

Passwort-Datei anlegen
Das sollte so gehen:

Code Auswählen


htpasswd -c /<verzeichnis>/htpasswd.fhem <username>

Das Verzeichnis sollte wahrscheinlich am Besten eins sein, das nicht vom Webserver erreichbar ist. (Denke ich mal...)

Apache-Konfiguration
Im Verzeichnis /etc/apache2/sites-available die folgende Datei anlegen. (Bei mir heißt das Ding fhemtablet.conf. Ich glaube, dass es wichtig ist, dass die Datei auf .conf endet.)

Code Auswählen


# 443 ist der Standard-Port fuer SSL (HTTPS)
<VirtualHost *:443>
# unsere Dateien liegen in /var/www  
	DocumentRoot /var/www
	<Directory /var/www >
		Options FollowSymlinks
		AllowOverride None
		Require all granted
	</Directory>

# Die folgende Zeile sorgt dafuer, dass immer ein "P3P"-Header in der 
# Response zurueck geschickt wird. Man braucht das nur, wenn man vor hat,
# das ganze im Internet-Explorer in einem frame oder iframe laufen zu lassen. 
# Ansonsten hat der IE ein Problem, das Session-Cookie zu schreiben.
# Was genau im P3P-Header steht scheint egal zu sein.	
	Header always set P3P 'CP="Thank you MSIE for making this complicated."'

# SSL einschalten und Zertifikate setzen. Das bestimmt, was beim 
# Browser als Zertifikat ankommt. 	
	SSLEngine on
	SSLCertificateFile /root/ca/servercert.pem
	SSLCertificateKeyFile /root/ca/serverkey.pem
	SSLCertificateChainFile /root/ca/cacert.pem
	SSLCACertificateFile /root/ca/cacert.pem
	
# Wir wollen Authentifizierung und Session-Verwaltung fuer alle Pfade 	
	<Location />
#       Authentifizierung soll ueber eine HTML-Form passieren	
		AuthFormProvider file
		AuthType form
		AuthName "FHEM - Home, Sweet Home"
#       Nur, wenn ein Benutzer angemeldet ist		
		require valid-user
#       Falls kein Benutzer angemeldet ist, dann login.html schicken		
		ErrorDocument 401 /login.html
#      	Wo ist die Passwortdatei? (<verzeichnis> ersetzen)	
		AuthUserFile "/<verzeichnis>/htpasswd.fhem"
#       Wenn die Authentifizierung erfolgreich war nach / springen		
		AuthFormLoginSuccessLocation "/"		
#       Zeugs fuer's Session-Cookie		
		Session On
		SessionCookieName session path=/
		SessionCryptoPassphrase lksdfifkjfbsfmfjsakl
		SessionCryptoCipher aes256
	</Location>

# Logout-Behandlung	
# d.h. der Pfad /logout sorgt fuer ein Abmelden
    <Location /logout>
   		SetHandler form-logout-handler
		AuthType form
		AuthName "FHEM - Home, Sweet Home"
#       beim Abmelden wieder nach login.html springen		
		AuthFormLogoutLocation "/login.html"
		Session On
		SessionCookieName session path=/
		SessionCryptoPassphrase lksdfifkjfbsfmfjsakl
		SessionCryptoCipher aes256
    </Location>
		
# Das Folgende sorgt dafuer, dass wenn noetig nach FhemWeb 
# umgebogen wird. Das gilt sowohl fuer Anfragen vom TabletUI 
# als auch fuer den Benutzer		
	RewriteEngine On
#   Wenn nicht angemeldet, dann nach / springen
#   Nur wenn nicht sowieso schon auf /	
	RewriteCond %{REQUEST_URI} !^/$
#   ...und nicht wenn man zur Login-Seite will	
	RewriteCond %{REQUEST_URI} !^/login.html$
#   Nur wenn nicht angemeldet	
	RewriteCond %{LA-U:REMOTE_USER} ^$
#   Fuer alle Pfade nach / umbiegen	
	RewriteRule (.*) / [R,END] 
	
#	Nur wenn eingeloggt: fhem-Anfragen nach FhemWeb schicken
#   Nicht fuer's Verzeichnis fhemweb (da sind die Tablet-UI-Dateien)
	RewriteCond %{REQUEST_URI} !^/fhemweb(.*)
#   ...aber sonst alles, was mit /fhem anfaengt 	
	RewriteCond %{REQUEST_URI} ^/fhem(.*)
#   Nur wenn angemeldet	
	RewriteCond %{LA-U:REMOTE_USER} !^$
#   Alles auf localhost:8082 schicken (als Reverse-Proxy)	
	RewriteRule (.*) http://127.0.0.1:8082%{REQUEST_URI} [P,END]
#   Wenn schon eingeloggt, dann die Login-Seite nicht zeigen.
#   Ansonsten schickt man User und Passwort sonstwo hin
    RewriteCond %{REQUEST_URI} ^/login.html$
	RewriteCond %{LA-U:REMOTE_USER} !^$
	RewriteRule (.*) / [R,END]
	
</VirtualHost>

Wahrscheinlich muss man ein paar Apache-Module aktivieren. Das geht mit a2enmod <modul>:

Code Auswählen


a2enmod session
a2enmod auth_form
a2enmod request
a2enmod session_cookie
a2enmod session_crypto
a2enmod authn_file
a2enmod authn_core
a2enmod proxy
a2enmod proxy_connect
a2enmod proxy_http
a2enmod rewrite
a2enmod ssl
a2enmod headers

Jetzt noch den VirtualHost selbst aktivieren und Apache durchstarten

Code Auswählen


a2ensite fhemtablet
service apache2 restart

Wie sollte das jetzt aussehen
Es sollte jetzt moeglich sein, mit folgender URL auf's Tablet-UI zu kommen.

Code Auswählen

https://blabla.hopto.org:9046/
...natürlich erst nachdem man User und Passwort eingegeben hat.
Direkt auf die FhemWeb-UI geht mit

Code Auswählen

https://blabla.hopto.org:9046/fhem
...und abmelden mit

Code Auswählen

https://blabla.hopto.org:9046/logout

Es wäre schön, wenn sich das ganze mal jemand ansehen könnte (ich weiß, es ist viel). Insbesondere die Apache-Konfiguration ist wahrscheinlich nicht ganz optimal.
Problemchen dabei:

Das ganze ist leider ziemlich lahm. Möglicherweise kann man die Apache-Konfiguration etwas geschickter machen.
Internet Explorer 11 bietet mir nicht an, das Passwort zu speichern. Mit Chrome funktioniert das sowohl unter Windows 7 als auch auf Android.
Chrome scheint das Zertifikat nicht zu akzeptieren, auch nachdem es im Zertifikatspeicher steht. Das wiederum klappt beim Internet Explorer.

So, das war's jetzt erstmal. Der Beitrag ist schon etwas lang.

Gruß,
Thorsten

Thorsten Pferdekaemper · 10 Dezember 2015, 22:34:14

Hi,
ich habe noch etwas draufgesetzt. Es hat mich gestört, dass man immer "https://blabla.hopto.org:9046/" eingeben muss. Mit folgender Lösung kann ich (zumindest mit Chrome) einfach "home.<mysite>.com" eingeben. Mein Provider hat keine transparente Weiterleitung oder sowas. Daher habe ich einfach folgende Datei als index.html hinterlegt:

Code Auswählen


<html>
<head>
<title>Daheim</title>
</head>
<frameset cols="100%,*" rows="*" frameborder=0 border=0>
<frame src="https://blabla.hopto.org:9046/">
</frameset>
</html>

Das funktioniert unter Chrome (einigermaßen), aber mit Internet Explorer erst einmal gar nicht. Erst als ich den P3P-Header in die fhemtablet.conf aufgenommen hatte ging das auch. Das Problem ist, dass der IE normalerweise keine Cookies aus einem frame oder iframe einer "fremden" Seite speichert. Das muss die eingebettete Seite explizit erlauben.

Aaaaber: Wenn ich jetzt über den fhem-Link in der index.html vom Tablet-UI nach FhemWeb navigiere, dann scheint der IE trotzdem die Anmeldung zu verlieren. Die erste Seite kommt noch (zumindest ein Teil davon) und dann nichts mehr. Jeder Versuch, irgendwohin zu navigieren, geht auf's Anmeldebild. Ich habe mir die HTTP-Header angeschaut und der P3P-Header kommt immer. Wenn man das ganze ohne die Frame-Seite macht (also direkt mit https://...:9046), dann geht's. Das Tablet-UI funktioniert auch.
Jetzt kommt das ganz Erstaunliche: Wenn man die "F12 Entwicklertools" aktiviert, dann funktioniert alles, inklusive FhemWeb.
Kann sich das jemand erklären?

(Falls das jemand ausprobiert und es mit Chrome nicht gleich klappt: Das liegt daran, dass Chrome das Zertifikat nicht gleich akzeptieren will. Also erstmal direkt über https://...:9046 reingehen und bestätigen, dass man weiß was man tut. Danach sollte es auch über home.<mysite>.com klappen.)

Gruß,
Thorsten

chris1284 · 11 Dezember 2015, 06:35:31

ich habe es ähnlich:

port 80 extern per dyndns ansprechbar wird auf 433 des apache mit eigenem zertifikat geleitet. eine pw abfrage über htaccess wenn ich über den apache komme. als startseite habe ich eine kleine seite über die ich auf fhem, tui und meine webcams komme. für die tui wird dann alles über den reverseproxy des apache umgelitet so das die mit der externen url funktioniert

so muss man weder an der index.html der tui noch fhem etwas verändern und es läuft ganz wunderbar von intern (ohne den apache zu nutzen) und von außen (apache only).
symlinks braucht man so auch nicht

ich hatte erst auch eine anmeldung über clientzertifikate + passwort im apache konfiguriert, dies war aber sehr aufwändig (zertifikate auf devices importieren, was auf iphone und android ein krampf ist wenn man keine offiziellen hat. dazu kommen zwänge in android die man nicht abschalten kann --> pin abfrage beim logscreen)

Thorsten Pferdekaemper · 11 Dezember 2015, 10:17:49

Hi,
das klingt ja ganz gut, aber das habe ich so nicht hinbekommen. Vielleicht kannst Du mir da auf die Sprünge helfen. Insbesondere Deine Apache-Konfiguration wäre da interessant. Das könnte vielleicht einige meiner Fragen auf einmal klären.

Zitat von: chris1284 am 11 Dezember 2015, 06:35:31
port 80 extern per dyndns ansprechbar wird auf 433 des apache mit eigenem zertifikat geleitet.

D.h. die Weiterleitung <extern>:80 -> <fhem-server>:443 ist im Router hinterlegt. Korrekt?

Zitateine pw abfrage über htaccess wenn ich über den apache komme.

Das ist dann Basic Authentication, oder? Außerdem: Wo liegt die .htaccess-Datei? Im Root-Verzeichnis des VirtualHost? Ach ja: Was ist bei Dir das root-Verzeichnis des VirtualHost? Vielleicht /opt/fhem/www?
Ich hatte mit der Authentication folgendes Problem: Im Apache werden die rewrite-Rules vor der Authentication abgearbeitet. Dadurch wurde bei mir /fhem auch auf den Fhem-internen Webserver weitergeleitet, wenn der Benutzer gar nicht angemeldet war. Wie hast Du das Problem gelöst oder warum hast Du das Problem nicht?

Zitatals startseite habe ich eine kleine seite über die ich auf fhem, tui und meine webcams komme.

Diese Startseite ist bei mir im Prinzip das Tablet-UI selbst. Dort kann ich ja auch alle sonst noch benötigten Links anbringen.

Zitatfür die tui wird dann alles über den reverseproxy des apache umgelitet so das die mit der externen url funktioniert
so muss man weder an der index.html der tui noch fhem etwas verändern und es läuft ganz wunderbar von intern (ohne den apache zu nutzen) und von außen (apache only).

Das verstehe ich jetzt nicht. Das Tablet-UI läuft ja im Prinzip auf dem Frontend, also dem Browser. Wenn jetzt das Tablet-UI seine FHEM-Abfragen macht, dann muss es also eine von außen funktionierende URL verwenden. Deshalb ist bei mir die Meta-Angabe fhemweb_url auf die externe URL gesetzt. Das funktioniert allerdings von intern nicht, zumindest wenn die interne Adresse keine Authentifizierung erfordert. Außerdem ist es unschön, wenn man von intern über eine externe Adresse beim FHEM-Zugriff geht. Das wird relativ langsam. (...oder Du hast tatsächlich das Problem, dass die FHEM-Zugriffe eigentlich gar nicht abgesichert sind. Dann geht's wahrscheinlich auch, aber das will man nicht wirklich.)

Zitatsymlinks braucht man so auch nicht

Dann musst Du aber das Root-Verzeichnis des Virtual Host auf /opt/fhem/www oder so setzen. Richtig? ...oder hast Du da entsprechende rewrite-Rules gesetzt?

Zitatich hatte erst auch eine anmeldung über clientzertifikate + passwort im apache konfiguriert, dies war aber sehr aufwändig (zertifikate auf devices importieren, was auf iphone und android ein krampf ist wenn man keine offiziellen hat.

Ja, das hatte ich auch mal probiert und bin jetzt auf die Version mit der Passwort-Anmeldung zurück gegangen.

Gruß,
Thorsten

chris1284 · 11 Dezember 2015, 15:47:07

Zitat von: Thorsten Pferdekaemper am 11 Dezember 2015, 10:17:49
D.h. die Weiterleitung <extern>:80 -> <fhem-server>:443 ist im Router hinterlegt. Korrekt?

jawohl. der apache auf dme fhemserver hört auf 433

mein apache ist wie folgt eingestellt:

- ein virual host für 433
- ein directory mit DocumentRoot /var/www/ wo eine index.html liehgt mit den links zu den locations

Zitat
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Startseite</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style>
      body {background-color: #e5e5e5;color: #4c4c4c; text-align:center}
      div {width:150px; margin: auto; }
      ul, li { /* Normalisierung */ list-style: none; margin: 0; padding: 0; border: 0; }
      ul { width: 12em; padding: 0.2em; background-color: silver; }
      li { margin: 0.4em; padding: 0.2em; background-color: #e5e5e5; text-align:center}
      li a { text-decoration: none; font-weight: bold; }
   </style>
</head>
<body>
   <h1>Liste der Sites</h1>
   <div>
      <ul>
         <li><a href="/fhem/ftui/">Table-UI</a></li>
         <li><a href="/fhem">FHEM</a></li>
         <li><a href="/video1">WC1</a></li>
         <li><a href="/WC2-chn1">WC2-Chn1 (1280x720)</a></li>
         <li><a href="/WC2-chn2">WC2-Chn2 (640x360)</a></li>
         <li><a href="/WC2-chn3">WC2-Chn3 (320x180)</a></li>
      </ul>
   </div>
</body>
</html>

- mehrer locations
+ eine fhem-reverseproxy der alles von außen "übersetzt" um das /fhem problem zu lösen, welche auch die tui mit versorgt
+ 4 für webcam-directverbundungen)
- alle locations und directorys per htaccess gesichert

siteconfig:

Zitat
<VirtualHost *:443>
SSLEngine on
SSLCertificateFile /etc/ssl/certs/apache.crt
SSLCertificateKeyFile /etc/ssl/private/apache.key
   DocumentRoot /var/www/
   <Directory /var/www/>
      Options -Indexes FollowSymLinks MultiViews
      AllowOverride None
      AuthType Basic
      AuthName "Password for TabletUI Secure"
      AuthUserFile /etc/fhem-htpasswd
      Require valid-user
      Order allow,deny
      allow from all
   </Directory>
   <Location /fhem>
      # ProxyPass/ProxyPassReverse leitet HTTP requests auf eine andere URL um
      ProxyPass http://localhost:8083/fhem
      ProxyPassReverse http://localhost:8083/fhem
      # ProxyHTMLURLMap passt Links im HTML/JavaScript Source an
      ProxyHTMLURLMap / /fhem/
      ProxyHTMLURLMap /fhem/ /fhem/
      AuthType Basic
      AuthName "Password for Fhem"
      AuthUserFile /etc/fhem-htpasswd
      Require valid-user
      Order deny,allow
      Allow from all
   </Location>
   <Location /video1>
      # ProxyPass/ProxyPassReverse leitet HTTP requests auf eine andere URL um
      ProxyPass http://[webcam-ip]/video.cgi
      ProxyPassReverse http://[webcam-ip]/video.cgi
      AuthType Basic
      AuthName "Password for WebCam1"
      AuthUserFile /etc/webcam1-htpasswd
      Require valid-user
      Order deny,allow
      Allow from all
   </Location>
   <Location /WC2-chn1>
      .... wie wc1 nur mit anderer adresse und dass das pw der cam in der url übergeben wird
   </Location>
   <Location /WC2-chn2>
      .... wie wc1 nur mit anderer adresse und dass das pw der cam in der url übergeben wird
   <Location /WC2-chn3>
      .... wie wc1 nur mit anderer adresse und dass das pw der cam in der url übergeben wird
   </Location>
   ErrorLog ${APACHE_LOG_DIR}/error.log
   # Possible values include: debug, info, notice, warn, error, crit,
   # alert, emerg.
   LogLevel warn
   CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

mein tui header ist standard:

Zitat
-->
<title>FHEM-Tablet-UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="116">
<meta name="widget_base_height" content="131">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="longpoll" content="1"> 
<meta name="debug" content="0"> 

<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />



<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui_lite.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />

body gedönse

<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.min.js"></script>

Thorsten Pferdekaemper · 11 Dezember 2015, 17:18:02

Hi,
danke für die Antwort. Vermutlich hat bei mir ProxyPassReverse und ProxyHTMLURLMap gefehlt. Das muss ich mal ausprobieren.
Außerdem ist die ganze Sache vielleicht mit Basic Authentication etwas einfacher. Dafür ist ein Logout da etwas schwieriger.
Leider wird es ein paar Tage dauern, bis ich das ausprobieren kann...
Gruß,
Thorsten

Thorsten Pferdekaemper · 06 Januar 2016, 21:55:53

So, jetzt bekomme ich das auch mit einer "normalen" Tablet-UI-Installation hin. Hier ist mein apache conf-File:

Code Auswählen


<VirtualHost *:443>

	SSLEngine on
	SSLCertificateFile /root/ca/servercert.pem
	SSLCertificateKeyFile /root/ca/serverkey.pem
	SSLCertificateChainFile /root/ca/cacert.pem
	SSLCACertificateFile /root/ca/cacert.pem


	DocumentRoot /var/www

	<Location /fhem>
		ProxyPass http://localhost:8082/fhem
		ProxyPassReverse http://localhost:8082/fhem
		# ProxyHTMLURLMap passt Links im HTML/JavaScript Source an
		ProxyHTMLURLMap /        /fhem/
		ProxyHTMLURLMap /fhem/     /fhem/
	
		AuthFormProvider file
		AuthType form
		AuthName "FHEM - Home, Sweet Home"
		Session On
		SessionCookieName session path=/
		SessionCryptoPassphrase secret
		SessionCryptoCipher aes256
		require valid-user
		AuthFormLoginRequiredLocation "/login.html"
		AuthUserFile "/etc/apache2/htpasswd.fhem"
		AuthFormLoginSuccessLocation "/"
		
		Order deny,allow
		Allow from all
	</Location>

	<Location "/dologin">
		SetHandler form-login-handler
		AuthFormLoginRequiredLocation "/login.html"
		AuthFormLoginSuccessLocation "/fhem/tablet/index.html"
		AuthFormProvider file
		AuthUserFile "/etc/apache2/htpasswd.fhem"
		AuthType form
		AuthName "FHEM - Home, Sweet Home"
		Session On
		SessionCookieName session path=/
		SessionCryptoPassphrase secret
		SessionCryptoCipher aes256
	</Location>
	
    <Location /logout>
   		SetHandler form-logout-handler
		AuthType form
		AuthName "FHEM - Home, Sweet Home"
		AuthFormLogoutLocation "/login.html"
		Session On
		SessionCookieName session path=/
		SessionCryptoPassphrase secret
		SessionCryptoCipher aes256
    </Location>
		
	RewriteEngine On
#   Jump immediately to tablet ui
	RewriteCond %{REQUEST_URI} ^/$ [OR] 
	RewriteCond %{REQUEST_URI} ^$
	RewriteRule (.*) /fhem/tablet/index.html [R,END]

</VirtualHost>

Auf der Login-Seite musste ich dazu noch ein bisschen was anpassen:

Code Auswählen


<body>
  <div class="login">
	<h1>Home, Sweet Home</h1>
    <form method="POST" action="/dologin">
    	<input type="text" name="httpd_username" placeholder="Username" required="required" />

Bei "action" steht jetzt "/dologin".

Das ganze klappt recht gut. Blöd ist nur, dass in Chrome auf meinen Android-Geräten das Passwort nicht gespeichert wird. Bei Chrome unter Windows 7 klappt es.

Gruß,
Thorsten

Thorsten Pferdekaemper · 18 Januar 2016, 22:06:06

Hi,
da ich das mit der Form Authentication nicht wirklich zufriedenstellend hinbekommen habe, habe ich jetzt doch auf Basic Authentication umgestellt.
Mein conf-File für Apache sieht jetzt so aus:

Code Auswählen


<VirtualHost *:443>

	SSLEngine on
	SSLCertificateFile /root/ca/<crt-file>.crt
	SSLCertificateKeyFile /root/ca/<key-file>.key
	SSLCertificateChainFile /root/ca/<crt-file2>.crt
	SSLCACertificateFile /root/ca/<crt-file2>.crt

	DocumentRoot /var/www

	<Location /fhem>
		ProxyPass http://localhost:8082/fhem
		ProxyPassReverse http://localhost:8082/fhem
		# ProxyHTMLURLMap passt Links im HTML/JavaScript Source an
		ProxyHTMLURLMap /        /fhem/
		ProxyHTMLURLMap /fhem/     /fhem/
	
		AuthType Basic
		AuthName "FHEM - Home, Sweet Home"
		AuthBasicProvider file
		require valid-user
		AuthUserFile "/etc/apache2/htpasswd.fhem"
	</Location>

	# Chrome is difficult to convince not to cache
	<LocationMatch  "index.html">
		Header always append cache-control no-store
    </LocationMatch>

</VirtualHost>

Das mit dem Cache-Control hat mir folgendes Problem gelöst: Wenn ich mich unter Chrome "abgemeldet" hatte (also den Browser komplett geschlossen und neu gestartet), dann wurde das nächste Mal trotzdem die Seite angezeigt. ...und zwar ohne Passwortabfrage. Das liegt wohl daran, dass sich Chrome nur sehr schwer davon überzeugen lässt, eine Datei nicht aus dem Cache zu laden. Die Abfragen, die FTUI dann macht, lösen aber sehr wohl eine Passwortabfrage aus. Dummerweise aber parallel, so dass man ziemlich oft User und Passwort eingeben muss. (Zumindest erkläre ich mir das Verhalten so.)
Ich habe das erst weg bekommen, nachdem ich die Angane "Header always append cache-control no-store" eingefügt hatte.

Ich habe mir außerdem bei startssl.com "echte" SSL-Zertifikate geholt. Dadurch motzen die Browser nicht mehr und es funktioniert auch mit Chrome unter Android auf Anhieb und ohne irgendwelche Zertifikate extra installieren zu müssen. Dummerweise habe ich bei meinem DynDNS-Provider keine Mailbox. Startssl prüft die Identität, indem es eine Mail an postmaster@<domain> (oder so) schickt. Das geht natürlich normalerweise ins Leere. Ich konnte das umgehen, indem ich auf meinem FHEM-RasPi kurzerhand Postfix installiert hatte.

Was jetzt noch Probleme gemacht hat, war das UI unter Android als "App" zu "installieren" (Zum Startbildschirm hinzufügen). Das hat zwar funktioniert, aber komischerweise wurde das FTUI einmal als App und zusätzlich ein- bis zweimal im Browser geöffnet. Das konnte ich verhindern, indem ich eine kleine Startseite davorschalte:

Code Auswählen


<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="device-width; minimum-scale=0.8; initial-scale=0.8; maximum-scale=0.81;"/>
  	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	
	<link rel="shortcut icon" href="/fhem/icons/favicon" />
    <link rel="icon" sizes="120x132" href="/fhem/images/default/fhemicon.png">

  
  <title>Home, Sweet Home</title>
</head>


<body>
  <div >
	<h1>Home, Sweet Home</h1>
    <form action="/fhem/tablet/index.html">
        <button type="submit" >Lass mich rein.</button>
    </form>
</div>
</body>
</html>

Damit tritt das Problem komischerweise nicht mehr auf.

Gruß,
Thorsten

chris1284 · 06 Februar 2016, 17:58:31

da ich heute auch wieder mal den apache neu installieren musste inkl einrichtung muss ich sagen die seite hier hilft am besten bei der zertifikatserstellung für dne webserver
https://thomas-leister.de/allgemein/apache-webserver-ssl-verschlusselung-einrichten/

die von dir thorsten verlinkte ist doch sehr fehlebehaftet (meine meinung als unerfahrener user was ca's angeht)

ToM_ToM · 26 Juni 2018, 21:00:46

@chris1284: Ich kämpfe mich auch seit mehreren Tagen durch ReverseProxy. Hast du zufällig mittlerweile eine Konfiguration mit der du nur auf deine FTUI zugreifen kannst?
Daran versuche ich mich gerade und mir gehen langsam die Ideen aus.

Code Auswählen


<VirtualHost *:80>
	ServerName $host
	ServerAdmin webmaster@localhost
	DocumentRoot /var/www/html

	ErrorLog ${APACHE_LOG_DIR}/fhem-ftui-error.log
	CustomLog ${APACHE_LOG_DIR}/fhem-ftui-access.log combined

	ProxyRequests Off
	ProxyVia Off
	ProxyPreserveHost On
	
	<Location /ftui>

	  # ProxyPass/ProxyPassReverse leitet HTTP requests auf eine andere URL um
	  ProxyPass http://localhost:8085/fhem/ftui/tablet_pagebutton_modern
	  ProxyPassReverse http://localhost:8085/fhem/ftui/tablet_pagebutton_modern

          # ProxyHTMLURLMap passt Links im HTML/JavaScript Source an
          ProxyHTMLURLMap /        fhem/
          ProxyHTMLURLMap /fhem/     fhem/
	</Location>
	
	<Directory />
          RedirectPermanent / http://192.168.152.250:8085/
    </Directory>


</VirtualHost>

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet

Wenn ich http://192.168.152.250/ftui/index.html aufrufe, bekomme ich zwar die FUTI-Seite, jedoch ohne Inhalt (siehe Screenshot ftui.jpg). Wahrscheinlich können die JavaScript und CSS nicht sauber geladen werden.
Lasse ich mir aber den Quelltext anzeigen und klicke dort auf den Link (siehe Screenshot), öffnet er mir die korrekte *.js Datei.

Hast du eine Idee für mich?

mani · 27 Juli 2019, 14:31:22

Hi,
bin auch gerade dabei mein Tablet ui über Apache via https abzusichern...

Meine Tablet ui Hauptseite ist die index.php. Diese index.php Seite funktioniert, aber in diese index. php habe ich weitere html Seiten via iframe eingebunden und diese funktionieren seit der Umstellung von http auf https nicht mehr, woran kann das liegen?

fehlt da eine Einstellung in der apache2 .config
Hat eventuell jemand Rat?

Mfg Mani