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

[OliverIO]

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

Also, dann liegt es am 2. Punkt.

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

Wenn ich jetzt in den Optionen "x_frame_options" von on auf off schalte, zeigt es mir die Seite an, beim eingeben des PW's passiert aber nichts.

Wo hast du das umgestellt?
Alle Anpassungen/Einstellungen können eigentlich nur im "Web Interface" gemacht werden.
Dort werden die ganzen Header gesetzt an die sich der Browser halten muss.

Auch beim Login ist der Hinweis "Blocked ... in a cross-origin subframe" einen Hinweis auf Probleme mit dem iframe, das da Sachen geblockt werden.

Es gibt da eigentlich nur 2 Möglichkeiten:

A) Wenn es das WebInterface kann, dort entsprechende Einstellungen machen, das es auch in einem iframe funktioniert. Wenn du hier im Forum mitliest ist das eines der Standardprobleme bspw bei Grafana. Da muss auch eine Option gesetzt werden, das der Server die Daten richtig austeilt.

oder

B) du musst ein proxy einsetzen, bei dem die entsprechenden Headers umgeschrieben/angepasst werden. Deine iframe Abfrage lautet dann auf eine Adresse auf dem proxy, dieser Fragt dann für dich das Webinterface ab

Hier mal ein paar mehr Informationen aus der KI

Same-Origin herstellen (Reverse Proxy)
Statt die App “nackt” von 192.168.178.101:8080 einzubetten, legst du sie hinter einen Reverse Proxy, so dass Einbettungsseite und Zielapp gleiche Origin haben (gleiche Domain, idealerweise auch gleiches Scheme https).
Beispiele:
https://deinhost.example.local/ (Hauptseite)
https://deinhost.example.local/app/ (proxied Webapp, die du einbettest)
Vorteile:
X-Frame-Options: SAMEORIGIN funktioniert dann sogar ohne Abschalten.
Cookies sind First-Party, SameSite-Probleme verschwinden meist.
Weniger CORS/Storage/JS-Probleme.
Wichtig: Der Proxy muss ggf. Header/Paths sauber umschreiben (Base-URL), sonst brechen relative Links/Redirects.

[D3ltoroxp]

Uff, hab noch nie was mit Proxy zu tun gehabt. Dann müsste ich schauen, das ich das auch ohne iFrame nutzen kann. Geht das ? Das ich einfach in der VIS bleibe ? Wenn ich es wie bisher im Browser öffnen lasse, also quasi nut ein Link Widget, komme ich halt schlecht zurück in die ioB App am Tablet, ohne viel geklicke.
Ich bräuchte nicht zwingend den iFrame, wenn das so Probleme macht. Eine Option hab ich so im WebInterface nicht gefunden.

[OliverIO]

@D3ltoroxp

technisch einfache Lösungen fällt mir nicht so ohne weiteres ein, evtl haben andere Ideen.
Je nachdem wlchen Browser du verwendest, könnte mach per tampermonkey erweiterung einen zurückknopf in das webinterface vom browser hinzufügen lassen.
ist aber auch nicht ganz so simpel, da man sich mit greasemonke/tampermonkey/userscripts/javascript/html auskennen muss

hängt auch davon ab ob man die browser extension im verwendeten browser überhaupt laden kann
https://www.tampermonkey.net/

[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