lokale HTML mit iframes - XSS Protection deaktivieren

[DKK007]

Ich habe eine kleine HTML Datei mit mehreren iframes gebastelt, die z.B. das Wetter einzeigen.

Bei einem der iframes müsste ich jedoch nach dem Laden der Seite mit JS noch ein Suchformular ausfüllen und alle Minute auf den Update Button klicken.
Das Problem ist jedoch, dass mich der Browser nicht an den Inhalt des iframes ran lässt.

Ich habe nun schon folgendes probiert:

chromium --args --disable-web-security --user-data-dir="~/develop/web_frames" --allow-running-insecure-content

Allerdings kommt weiterhin eine Fehlermeldung:

Uncaught (in promise) SecurityError: Failed to read a named property 'document' from 'Window': Blocked a frame with origin "file://" from accessing a cross-origin frame.

Kann ja nun nicht Sinn der Sache sein dafür eine Automatisierung mit Selenium schreiben zu müssen.

 

[tiga05]

Kannst du uns noch etwas mehr zum Kontext deiner Aufgabe erzählen?

Ich stand letztens auch vor dem Problem. Für mich war allerdings die Deaktivierung von Sicherheitsmechanismen kein Weg.

Planst du das als dauerhafte Lösung? Gehören die eingebetteten Webseiten dir? Wenn du Zugriff auf die Einstellungen der anderen Webseite hast, kannst du auf der anderen Webseite die Cors-Einstellungen so ändern, dass sie den Zugriff zulässt.
Danach kannst du mit
mit windows.postMessage() und Eventlistenern zwischeneinander kommunizieren.

Es gibt da sogar eine library dafür: iframeresizer. Die kann nicht nur resizen, sondern übernimmt die Kommunikation auch schön standardisiert. Damit es richtig funktioniert muss man es aber auch auf der eingebetteten Seite installieren.

Alternativ, wenn dir der Code der anderen Seite gehört, könntest du die andere Webseite auch als Webcomponent bei dir einbinden. Dann ist es ja eh Code, der in deinem Fenster läuft der Zugriff ist problemlos möglich.

Edit: Grundsätzlich muss ich sagen: "die schlaue Box" konnte mir bei der Lösungsfindung erheblich weiterhelfen. Wenn du also konkrete Codebeispiele brauchst, fragst du am besten mal Chatgpt

Und da du von Selenium und Automatisierung geschrieben hast: Wenn du automatisiert etwas in die Webseite eingeben willst, stellt sich die Frage: Hat die Webseite auch eine API, die du ansprechen kannst? Das wäre wohl der richtige Weg dafür. Aber hängt eben von deinem Usecase ab.

 

[DKK007]

Ich möchte auf einem Tablet im Flur eine Seite mit dem Wetter und den Abfahrten der Straßenbahn anzeigen lassen.

An den Seiten in den iframes kann ich keine Einstellungen verändern.


Die BVG hat auch eine API habe ich gesehen, aber dann müsste ich halt selbst noch ein Frontend schreiben.

 

[kali-hi]

Das Problem ist jedoch, dass mich der Browser nicht an den Inhalt des iframes ran lässt.

Doch das geht schon...

function iframeRef( frameRef ) {
    return frameRef.contentWindow
        ? frameRef.contentWindow.document
        : frameRef.contentDocument
}

var inside = iframeRef( document.getElementById('one') )

https://stackoverflow.com/questions/1452871/how-can-i-access-iframe-elements-with-javascript

 

[DKK007]

Habe es in der Entwicklerkonsole gleich mal ausprobiert.

function iframeRef( frameRef ) {
    return frameRef.contentWindow
        ? frameRef.contentWindow.document
        : frameRef.contentDocument
}

var framecontent = iframeRef( document.getElementById('HAFAS_WEBAPP_IFRAME_0') )

VM72:3 Uncaught SecurityError: Failed to read a named property 'document' from 'Window': Blocked a frame with origin "null" from accessing a cross-origin frame.
    at <anonymous>:7:20
(anonymous) @ VM72:7

Geht leider nicht.

 

[kali-hi]

Das ist leider in zweifacher Hinsicht schlecht... Xss ist nicht erlaubt (weshalb der JS-Zugriff nicht funktioniert), und du kannst daran auch nichts ändern, sofern es keinen Zugang zum Backend gibt

 

[DKK007]

Dann muss ich mir wohl doch ein Frontend für die Api basteln.

 

[kali-hi]

Mit Frontend hat das wenig zu tun, das ist eine erlaubende Einstellung im Server, dort kannst du angeben, welche xsites/embeds erlaubt sind

 

[DKK007]

Ich meinte, dass es auch eine API gibt, die ein umfangreiches JSON zurückliefert.

https://v6.bvg.transport.rest/

 

[kali-hi]

auch eine API gibt, die ein umfangreiches JSON zurückliefert

Ja, aber das ändert ja am potentiellen xss nichts... Die Vulnerabilität hast du, sobald du eine andere Ressource anforderst

 

[netzgestaltung]

Ja, aber das ändert ja am potentiellen xss nichts...

doch weil er statt einem iframe ein frontend zur api baut.

alternative: die html seite mit xhr holen und den result DOM in den inhalt packen, dann sparst dir das bauen.

 

[DKK007]

alternative: die html seite mit xhr holen und den result DOM in den inhalt packen, dann sparst dir das bauen.

Klingt interessant, wie macht man das?

Ist das dann direkt im HTML oder als ShadowRoot?

 

[ElliotAlderson]

alternative: die html seite mit xhr holen und den result DOM in den inhalt packen, dann sparst dir das bauen.

Viel Glück das bei einer SPA mit React oder Vue zu machen.

 

[netzgestaltung]

Klingt interessant, wie macht man das?

Ist bei mir auch schon lange her, früher hat man das mit jquery gemacht xD - geht aber sicher auch einfach vanilla js, ca so:

var xhr = new XMLHttpRequest()
xhr.open('GET', 'https://stackoverflow.com/questions/53661013/parsing-and-accessing-dom-elements-from-html-page-fetched-via-ajax-xhr-get-reque/53661204', true)

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    var dom = new DOMParser().parseFromString(xhr.responseText, 'text/html')
    console.log(dom.querySelector('#question-header h1').innerText)
  }
}

xhr.send()

Quelle: https://stackoverflow.com/questions...from-html-page-fetched-via-ajax-xhr-get-reque

die "dom" variable im Beispiel kann dann traversed werden und als ganzes oder teilweise dem Browser Dom hinzugefügt werden. CSS Layout mußt dann halt noch schauen...

Persönlich würde ich das vermutlich anders schreiben, mit Promises - aber grad kein Plan, auch schon länger nicht mehr angesehen. Also so in dieser Richtung: https://stackoverflow.com/questions/30008114/how-do-i-promisify-native-xhr

Wie aber @ElliotAlderson richtig anmerkt, ist das bei SPAs und dgl dann wieder nicht so einfach möglich.

 

[DKK007]

Viel Glück das bei einer SPA mit React oder Vue zu machen.

Was sind SPA, React und Vue?

 

[dewa]

@DKK007 SPA: Single Page Application, React und Vue Javascript Frameworks

 

[Bagbag]

Versuch mal --disable-xss-auditor.

Edit: scheint es nicht mehr zu geben.

 

[DKK007]

Hatte ich auch schon probiert

 

[gravitas]

Zwei Ideen! Nutze doch z.B. einen Chrome und setze es auf "disable-web-security" im Startparameter.
Oder du leitest das per lokalen Server über einen Proxy (die URL & Proxy kannst du in einen <iframe> einbauen). Gn8!

 

[DKK007]

Nutze doch z.B. einen Chrome und setze es auf "disable-web-security" im Startparameter.

Das hatte ich schon probiert, siehe erste Nachricht.

Oder du leitest das per lokalen Server über einen Proxy (die URL & Proxy kannst du in einen <iframe> einbauen).

Mit lokalem Server meinst du einen Http-Server-Dienst wie Apache unter localhost laufen zu lassen? Oder ein extra Server im Netzwerk?