Webseite im Dialog öffnen, teilweise geblockt.

OliverIO

Leider sind wir hier noch beim raten, beziehungsweise du hast vergessen das Ergebnis aus der Browser Konsole hier zu posten
Hier mehr Details zum nachlesen

https://developer.mozilla.org/en-US/docs/Web/Security/Defenses/Mixed_content

https://developer.mozilla.org/de/docs/Web/HTTP/Guides/CSP

Im speziellen
https://developer.mozilla.org/de/docs/Web/HTTP/Guides/CSP#clickjacking-schutz

Leider hast du auch noch nicht verraten, was für Webinterfaces das sind. So kann man natürlich auch nichts nachschauen.

D3ltoroxp

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

Leider sind wir hier noch beim raten, beziehungsweise du hast vergessen das Ergebnis aus der Browser Konsole hier zu posten

Meinst du sowas hier ?

Bin mit rechter Maustaste drauf -> Untersuchen.

Das ist das Webinterface von einem DL Programm. Das ganze läuft auf Linux.
Wenn ich das hier deaktivere,

komme ich zumindest auf das Webinterface, aber die Anmeldung bringt nichts, er lässt mich nach der Eingabe nicht weiter. Gebe ich die Daten falsch ein kommt, falscher User oder Passwort. Aber wenn alles
richtig ist, kommt einfach nichts und die Felder sind wieder leer.

OliverIO

@D3ltoroxp

Fast.
Errors und Warnungen wären interessant. Aber nur kurz nach dem Abruf

Am besten, auf die Seite gehen, in der du dein "Web Interface" eingebettet hast.
Dann F12 drücken.
Dann auf der Konsolenseite das kleine Verbotsschild drücken um das Log zu leeren.
Dann F5 drücken um die Seite neu zu laden
evtl. 30 Sekunden warten bis alles geladen wurde
Dann nach den Errors und Warnings schauen.
Wenn du willst das kopieren und hier in Code-Tags kopieren.
Da müsste dann die Meldung stehen warum das nicht geladen werten konnte.

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

Das ist das Webinterface von einem DL Programm. Das ganze läuft auf Linux.

Dein Web Interface scheint wohl sehr geheim oder peinlich zu sein, das du es nicht benennen willst.
Aber gut, dann wirst du den Punkt in der Doku selber finden müssen bzw. die Prüfung ob es überhaupt umstellbar ist

D3ltoroxp

@oliverio
Ich glaube du suchst nach dem hier ?

daswetter.0.NextHours.Location_1.Day_1.moonIconURL
6Refused to display '<URL>' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
(index):1 Refused to display 'http://192.168.178.101:8080/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
(index):1 Refused to display 'http://192.168.178.101:8080/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
(index):1 Refused to display 'http://192.168.178.101:8080/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
(index):1 Refused to display 'http://192.168.178.101:8080/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
(index):1 Refused to display 'http://192.168.178.101:8080/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
(index):1 Refused to display 'http://192.168.178.101:8080/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
index-Bu-u_NdN.js:7403 [2026-01-06T09:51:55.950Z] +SUBSCRIBE:

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.

Schalte ich es aus, wird die Seite angezeigt, komme aber nicht weiter.
Folgende Meldungen werden mehr.

alexa2.0.Echo-Devices.G091ET06039404PA.Player.controlPlay
5Blocked autofocusing on a <input> element in a cross-origin subframe.
login/:36 Blocked autofocusing on a <input> element in a cross-origin subframe.
login/:36 Blocked autofocusing on a <input> element in a cross-origin subframe.
login/:36 Blocked autofocusing on a <input> element in a cross-origin subframe.
login/:36 Blocked autofocusing on a <input> element in a cross-origin subframe.
login/:36 Blocked autofocusing on a <input> element in a cross-origin subframe.
index-Bu-u_NdN.js:7403 [2026-01-06T09:57:18.459Z] +SUBSCRIBE: alexa2.0.Echo-Devices.G091ET06039404PA.Player.controlPause

Das hier hab ich auch noch gefunden.

Version vis-materialdesign: 0.5.9
widgets.min.js:1 vis-materialdesign: sentry datapoint 'vis-materialdesign.0.sentry' not exist! Go to the adapter settings to activate it.

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

Community Forum

NEWS

Webseite im Dialog öffnen, teilweise geblockt.

Support us

384

32.6k

82.1k

1.3m