Karten-Iframe auf einer Seite beim betrachen verändern

Hi Helmut,
Ich hätte gleich noch eine technische Frage: weißt du einen Weg,
per Javascript die aktuelle Center- und Zoom-Einstellung der Karte
abzufragen? Oder könnte man per Skript das aktuelle Suchwort
verändern? Wäre schön, wenn ich im Glossar einen Begriff wechsle,
wenn dann die Karte ihre aktuelle Einstellung behalten würde.
VG
Heiko

Antwort von Florian (Softwareentwickler):
Die einzige Möglichkeit, etwas über den Inhalt des Iframes
herauszufinden, von außerhalb, ist die Adresse.

Das heißt, Du kannst die aktuelle Adresse des Iframes in Javascript
abfragen.

Mehr geht nicht. Dies wird aus Sicherheitsgründen vom Webbrowser
unterbunden.

Da aber die Karte die Aktuelle Center-Position und das Zoom-Level und
auch den Suchbegriff in die Adresse schreibt, und auch auf Änderungen
des Suchbegriffes in der Adresse reagiert, kannst Du natürlich alle
Deine Anforderungen durch lesen und ändern der Adresse erfüllen.

Bauchgefühl von Helmut
Damit die Karte beim nächsten Aufruf wieder die gleiche Position hat, müssten wir vermutlich cookies setzen, wo dann die letzte Position abgespeichert wird und beim nächsten Aufruf wieder dorthin zurück springt.
Allerdings finde ich es sogar angenhem, dass, selbst wenn ich vorher irgendwo ein Detail aufgerufen hatte, wenn die Karte danach wieder in eine schöne Übersicht zurückspringt...

gruß
Helmut

Bookmark Bookmarked
    1. 22 Comment
  • Heiko Hoffmann

    Hallo Florian,
    das klappt leider nicht. Ich kann zwar document.getElementById("IFrameId").src abfragen, damit bekomme ich aber nur die Anfangsadresse und nicht die durch Interaktion veränderte URL. Die würde man mit ...documentWindow.location.href abfragen können, das gilt aber bereits als Cross-Site-Scripting, da ich ja in einer anderen Domain bin. Über IFrame geht es wohl nicht, schade.

    Wäre das Einbinden auch ohne IFrame möglich?
    Ich hab mal in das Frame reingeschaut und es dann einfach so probiert:
    <div id="app" style="display: inline-block;"></div><script type="text/javascript" src="https://kartevonmorgen.org/app.js"></script>

    Die Karte wird auch angezeigt, aber sie bekommt keine Server-Verbindung. (Fehlermeldung "Server nicht erreichbar.") Ich vermute mal, das geht nur innerhalb eurer Domäne.

    Viele Grüße
    Heiko

  • Helmut Wolman

    Eigentlich sollte das von überall aus abrufbar sein. Hilft dir vielleicht diese Dokumentation?
    github.com/slowtec/openfairdb

    Ansonsten poste die Frage mal als github issue Florian uwe oder markus werden dir helfen können

  • Florian (Weinheim)

    damit Heiko das machen kann, müsste man seine Domain für die Nutzung der Api freischalten um zu markieren dass der Webbrowser das nicht als Cross-Site-Scripting betrachet. Das kann Markus machen. Sende uns die Domain auf der Du das einbinden willst an it@kartevonmorgen.org - Sicher muss es diskutiert werden ob das gewünscht ist.

    Zum erstem Punkt: Die durch interaktion veränderte URL sollte durchaus sichtbar sein, aber es kann sein dass der Hash, als der Teil hinter der # nicht zugänglich ist :-(

  • Florian (Weinheim)

    immerhin kannst Du die URL des iframes ändern... aber leider halt nicht lesen.

  • Helmut Wolman

    Ja Heiko. Das dein Gloassar auf die Openfair-DB zugreift ist auf jeden Fall erwünscht und muss nicht weiter diskutiert werden. Diskutiert werden müsste nur, wenn du auch reinspeichern möchtest, also änderungen Vornehmen. Aber solange das über das gleiche Eingabeformular passiert, sollten auch da keine Fehler auftreten, also stört das auch keinen. Mir ist aber wirklich neu, dass man andere Domains für den Zugriff auf die Datenbank freischalten muss, denn http://map.transition-muc.de/ greift ja auch von einer anderen Domain drauf zu und ich glaub da haben wir nicht was freischalten müssen.
    Schreib aber am besten die Mail und wir leiten sie an Markus zur Freischaltung weiter, wenn das das einzige problem ist.

  • Heiko Hoffmann

    Danke für die Rückmeldungen. Ok, dann versuchen wir das mal mit der Freischaltung für die Domäne, das ist denke ich die einfachste Variante.
    Der API-Zugriff über Swagger funktioniert bei mir. Auch die Münchner Karte lässt sich direkt verwenden, einfach mit
    <div id="app"></div><script type="text/javascript" src="https://map.transition-muc.de/app.js"></script>
    Das app.js von kartevonmorgen.org ist aber offenbar anders eingestellt, ich vermute mal, dass da relative URL-Pfade verwendet werden (sieht man auch an den fehlenden Bildern, wenn man das Menü aufklappt und runterscrollt).

  • Florian (Weinheim)

    Ja das stimmt, die neueste app.js von der kartevonmorgen greift direkt über kartevonmorgen.org/api auf die karte zu und nicht mehr wie früher über ofdb.io/api weil wir im login-bereich noch viel mehr probleme mit cross site scripting haben.

    Kein wunder, dass man vor über 10 Jahren sich jsonp ausgedacht hat um diese probleme zu umgehen ;-)

    Vielleicht sollten wir auch eine jsonp-api anbieten....

  • Florian (Weinheim)

    Du kannst dir natürlich auch einen reverse-proxy einrichten, der die api unter deiner eigenen domain zur verfügung stellt, um cross site scripting fehler zu umgehen....

  • Florian (Weinheim)

    Aber wie Helmut schreibt, es liegt dann wohl tatsächlich nur an den relativen Links in der App.js und nicht an der Freischaltung.

    MArkus hat wohl inzwischen in der API standardmäßig den Header

    access-control-allow-methods: OPTIONS,GET
    access-control-allow-origin: *

    so dass Du von überall auf die API zugreifen kannst. Sorry, da war ich nicht ganz up to date.

    Tja, dann müssten wir wohl jetzt noch eine app.js mit absoluten pfaden für solche zwecke irgendwo hosten.

    Gibt es denn garkeine Möglichkeit das doch noch mit dem Iframe hinzubekommen... das wäre gegenüber der Einbindung der app.js absolut zu bevorzugen, da dies ja auch weitere nachteile hat.

    Sendest Du mir mal die URL wo Du das derzeit eingebunden hast? Hast Du eine Test-URL?

  • Florian (Weinheim)

    Ah stimmt ich errinnere mich dunkel. Damit Du diesen Zugriff bekommst, müssen beide Seiten, also der äußere Frame und auch der innere Frame den selben Wert in document.domain schreiben.

    Wenn beide Frames auf einer Domain laufen, die mit .org endet, könnten theoretisch beide document.domain='org' setzen. Dann könnte man von außen auf den inneren iframe zugreifen. Aber das könnte dann halt jeder, der eine .org domain hat, und das wollen wir nciht.

    Mit anderen Worten: Nein, es geht wirklich nicht mit Iframes.

  • Heiko Hoffmann

    Hmm, ok. Domains freischalten für XSS geht also gar nicht. Die Mail an it@... habe ich vorhin jedenfalls abgeschickt, also falls Markus noch eine Idee hat... ;) Ansonsten wäre das hier vielleicht noch eine Möglichkeit: Nutzung des localStorage, siehe https://stackoverflow.com/questions/938180/get-... , 3. Antwort.
    Dazu müsstet ihr also im App.js so etwas wie localStorage.setItem("url", myUrl); eintragen. Und das könnte ich dann abfragen.

  • Heiko Hoffmann

    Ich glaube jetzt brauche ich erstmal einen Crash-Kurs in Domainenverwaltung... ;) Also eine Subdomain mit externer Umleitung kann ich einrichten, kein Problem. Jetzt habe ich eine Auswahl für Umleitungstyp: Permanente Weiterleitung 301, Temporäre Weiterleitung 302, Proxy, Frameset. Hmm... Bei Frameset steht als Erklärung: "Bei der Frame-Weiterleitung wird im Browser die aktuelle Domain und nicht das Weiterleitungsziel in der Adresszeile angezeigt. Die Inhalte der Zieldomain werden bei dieser Art der Umleitung per HTML-IFrame eingebunden." Hilft uns das weiter? Mal sehen...

  • Heiko Hoffmann

    Hmm, also es scheint mir nicht möglich zu sen, das Problem durch Subdomains zu lösen. Das wäre sonst ja auch eine Hintertür für XSS. Die Weiterleitung ändert einfach nur die URL, oder die Zielseite wird eben in einem Frame versteckt (bei Typ Frameset). Die Seiten müssten schon zusammen auf einer Domain gehostet werden.
    Dann beibt wohl doch nur der Weg, dass ich mal versuche das App.js anzupassen. Inwieweit spielt da die Domain überhaupt eine Rolle? Das Script wird doch im Webbrowser auf dem Client ausgeführt, und der Client mit seiner IP-Adresse macht dann einen Request zur Backend-API.

  • Florian (Weinheim)

    Nein, eine Weiterleitung hilft nicht.

    Es gibt wie gesagt die Möglichkeit, dass BEIDE Frames den SELBEN Wert als per Javascript unter document.domain einstellen.

    Man DARF aber immer nur eine domain unter document.domain einstellen, die man nutzt.

    Wenn also die Website des äußeren Frames über dresden.kartevonmorgen.org aufgerufen wird (nicht weitergeleitet, sondern dresden.kartevonmorgen.org bleibt wirklich oben in der Adressleiste stehen!), und der innere Frame under kartevonmorgen.org - dann sind sie beide unter *.kartevonmorgen.org verfügbar. Und dann muss der äußere frame nur noch document.domain = kartevonmorgen.org setzen und dann ist es kein XSS mehr.

  • Heiko Hoffmann

    Ach, sieh mal an: nach dem ich die IFrame-URL von www.kartevonmorgen.org zu kartevonmorgen.org korrigiert habe, verhält es sich gleich ganz anders:
    das IFrame wird bei einer erneuten Suche gar nicht mehr neu geladen, sondern nur die geänderten URL-Parameter neu verarbeitet. Wenn ich nun center und zoom einfach weglasse, dann behält die Karte die aktuelle Einstellung bei! Jetzt klappt das schon prima mit dem Durchklicken. :) Wenn man allerdings einen Eintrag ausgewählt hat, dann bleibt die Karte herangezoomt, das ist dann nicht so schön, wenn man den Begriff wechselt.
    Drauf gekommen war ich durch den Safari-Browser: wenn das IFrame dort von www.kartevonmorgen.org zu kartevonmorgen.org weitergeleitet wird, dann funktioniert die Suche per Parameter überhaupt nicht. Bei anderen Browsern werden die Parameter immerhin weitergereicht, aber das IFrame wird jedesmal komplett neu aufgebaut.
    Korrigiert doch bitte mal das Beispiel unter http://bildungsagenten.org/kartevonmorgen/3/#Wi.... Dort steht bei "Vollständiges Karten-Widget mit Suchleiste" die URL mit "www.kartevonmorgen.org" drin.