Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[D3ltoroxp]

@oliverio
Das hat ein Dev vom Programm geschrieben. Aber wenn ich die ioBroker App für die Visualisierung nutze, kann ich das da irgendwo einstellen ? Oder nutzt er dann die Engine vom Firefox oder Chrome was auf dem Tablet läuft ?

" you generally cant open random pages in iframes from another site due to COEP policy. firefox for example is very strict about this
you of course can disable security in your browser, about:config - browser.tabs.remote.coep.credentialless set this to false
but no there is nothing on app side that lets you dictate random cores/coep stuff "

[OliverIO]

@D3ltoroxp

wie schon mal geschrieben, kann man das vom browser her nur begrenzt beeinflussen.
nur in deinem web-interface oder per proxy kann man das beeinflussen

@D3ltoroxp sagte in Webseite im Dialog öffnen, teilweise geblockt.:

Das

Was ist "das"? dein browser, dein webinterface? dann kann dein dev das auch anpassen.

du vermischelst da auch verschiedene Lösungen.
Das mit der Erweiterung Tampermonkey dient nur dazu, falls du dein webinterface nicht anpassen kannst, in das bereitgestellte html noch einen zurückknopf automatisiert einzubauen, so das du das webinterface normal (nicht im iframe) zu öffnen
das beeinflusst die sicherheit nicht

[D3ltoroxp]

@oliverio Ich hab jetzt mal gestern mit node.js und Proxy herum gespielt. Ich kann nun die Seite öffnen, zumindest ohne Login. Mit Login bin ich in einem Loop.

Ich würde mir da noch mal ngix anschauen, ob es damit vllt besser läuft.

Jetzt hab ich noch die Zigbee Seite vom ioBroker hinzugefügt über das iFrame Dialog Fenster, teile der Seite gehen, aber z.b. die Zigbee Seite oder Backup gehen nicht. Wird blockiert. Das kommt doch aber vom selben System. Dachte immer durch den Proxy lässt man ja die Anfrage vom System auf dem auch die VIS läuft anfragen und deshalb geht es dann.

[OliverIO]

@D3ltoroxp

Für einfache Seiten gilt das.
Am besten man schaut mit den Browser Developer Tools im networktab nach welche requests nicht funktionieren und biegt die dann in der Proxy Konfiguration um.
Bspw benötigt eine websocket Verbindung eine gesonderte Behandlung im Proxy

[D3ltoroxp]

Bist du da Fit mit dem Proxy über node ? Hab proxy und request installiert.

Würde das nginx besser machen ? Oder kann man das einfacher konfigurieren ?

[OliverIO]

@D3ltoroxp

Nicht wirklich fit.
Habe mich vor einiger Zeit mal beschäftigt.
Ich würde nginx empfehlen, da das sicherlich den meisten konfigurationsumfang anbietet.
Mit Node wäre evtl. auch alles umsetzbar, aber ggfs. mit zusätzlichen Plugins, programmieren,etc.

Bei der Erstellung der Konfiguration kann dir ChatGPT helfen.
Da beschreibst du möglichst detailliert das Szenario
Mit möglichst detaillierten Angaben,
Also am besten deine vis url
Die quell url
Das du das als iFrame einbinden möchtest

Wenn dann Fehler entstehen dann einfach aus der Web dev console die Fehlermeldungen und auch gern mal die ganzen response header kopieren.
Das geht auch mit einem kostenlosen Account. Ggfs wirst du auf ein weniger intelligentes Modell heruntergestuft, aber dafür müssten die auch schon reichen.

[D3ltoroxp]

Ich hab mich da mal mit Copilot versucht. Aber bisher noch nicht zu einem Ergebnis gekommen. Das muss irgendwie an der Seite liegen : http://xxx.xxx.xxx.xxx.8081/#tab-zigbee-0 Die wird einfach blockiert. Vorher stand geblockt jetzt steht Cannot GET. Andere Tabs gehen ohne Probleme.
Das doch alles mist. Ich will nur auf diese blöde Seite. Warum wird es einem so schwer gemacht.

Eine andere Möglichkeit kenne ich nicht, diese Webseite im Vis auf zu rufen. Es geht mir ja eigentlich nur um die Möglichkeit zurück zu kommen. Aber ohne die App neu zu laden oder über die Back Taste. Oft mals geht das nicht.

[OliverIO]

@D3ltoroxp

Du musst mehr Informationen liefern.
Du weißt wie ein proxy funktioniert?

Dein Browser fragt beim proxy an, und dieser erstellt einen neuen Request an das eigentliche Ziel.
d.h. du musst auch in das Log des proxy schauen um evtl Fehler von dort auch noch zu sehen. Wichtig sind auch die http-request codes.
404 - Ressource nicht vorhanden dürfte dir geläufig sein.
Die restlichen kannst du hier nachschauen
https://de.wikipedia.org/wiki/HTTP-Statuscode
Das musst du dann der KI zur Fehlerbehebung mitgeben.
Wie gesagt, am besten dann den response Header (da steht das mit drin) mitkopieren

[D3ltoroxp]

Ich habe es geschafft alles kann ich nun in dem iFrame öffnen. Mit Copilot schien das nicht zu klappen. Hatte gestern dann mit ChatGPT probiert und ruck zuck sind wir auf eine Config für Nginx gekommen die alles abdeckt was ich da brauche, das lokale WebInterface die Zigbee Seite. Ich bin happy. Vielen Dank für deine ganzen Infos !!

[Samson71]

@D3ltoroxp sagte in Webseite im Dialog öffnen, teilweise geblockt.:

Hatte gestern dann mit ChatGPT probiert und ruck zuck sind wir auf eine Config für Nginx gekommen die alles abdeckt was ich da brauche, das lokale WebInterface die Zigbee Seite.

Wie wäre es das Ergebnis hier zu teilen und für andere, die ein ähnliches Problem haben bereitzustellen?

[D3ltoroxp]

Ich hab nginx installiert auf dem ioBroker Host. Unter Sites Enabled eine conf angelegt.

############################################
# SmartHome Reverse Proxies (LAN only)
# Host: 192.168.178.151
############################################

############################################
# 8090 → Externes Webinterface (192.168.178.101)
############################################
server {
    listen 8090;
    server_name 192.168.178.151;

    # 🔒 Nur LAN erlauben
    allow 192.168.178.0/24;
    deny all;

    location / {
        proxy_pass http://192.168.178.101:8080;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        proxy_set_header Host 192.168.178.101;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # 🔥 iFrame-Blocker entfernen
        proxy_hide_header X-Frame-Options;
        proxy_hide_header Content-Security-Policy;

        # ✅ iFrame erlauben
        add_header X-Frame-Options "ALLOWALL";
        add_header Content-Security-Policy "frame-ancestors *";
    }
}

############################################
# 8091 → ioBroker selbst (iframe-fähig)
############################################
server {
    listen 8091;
    server_name 192.168.178.151;

    # 🔒 Nur LAN erlauben
    allow 192.168.178.0/24;
    deny all;

    location / {
        proxy_pass http://127.0.0.1:8081;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        proxy_set_header Host 127.0.0.1;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # 🔥 iFrame-Blocker entfernen
        proxy_hide_header X-Frame-Options;
        proxy_hide_header Content-Security-Policy;

        # ✅ iFrame erlauben
        add_header X-Frame-Options "ALLOWALL";
        add_header Content-Security-Policy "frame-ancestors *";
    }
}

############################################
# 8092 → Direkt-Zugriff Zigbee-Seite
############################################
server {
    listen 8092;
    server_name 192.168.178.151;

    # 🔒 Nur LAN erlauben
    allow 192.168.178.0/24;
    deny all;

    location / {
        return 302 http://192.168.178.151:8091/#tab-zigbee-0;
    }
}

############################################
# Hier kannst du später beliebig erweitern:
# 8093 → Kamera
# 8094 → Wechselrichter
# 8095 → Router
############################################

Unter proxy_pass die URL eingeben, die ihr aufrufen wollt und nicht geht.
Unter listen schreibt ihr den Port. Für jede Seite habe ich einen anderen Port benutzt.
Im iFrame gebt ihr dann einfach nur die IP vom ioBroker Host oder wo euer nginx liegt und den Port dahinter, hinter der die URL liegt.

Danach einmal

sudo nginx -t

und

sudo systemctl daemon-reload