Mit fremden Federn

von | Mai 23, 2017 | ASPX, Webdesign | 0 Kommentare

[Achtung, nicht alle Objekte auf dieser Seite sind im Sinne des https-Protokolls von sicheren Quellen.]

Ich war es immer gewohnt, Webseiten selbst herzustellen. Meist so, wie das Techniker tun: bis die Sache funktioniert, also etwa 80% eines perfekten Produkts, der Rest ist Kosmetik aber wahrscheinlich zeitaufwändiger als diese ersten 80%. Daher funktionieren viele meiner Seiten nur „im Prinzip“ und würden zahlreiche (ästhetische) Verbesserungen benötigen.

Mit iframe fremde Inhalte in der eigenen Seite einbetten

Sehr oft wendete ich die Technik an, Inhalte, die bereits fertiggestellt worden sind, mit einem iframe in eine neue Seite einzubinden. Ein Beispiel dafür ist die (ständig in Bearbeitung befindliche) Familienchronik. Ein davon getrenntes Projekt ist ein Familienstammbaum und einzelne Seiten dieses Stammbaums sollen in der Familienchronik aufscheinen. Natürlich könnte man einen Screenshot einbinden aber dieser hätte den Nachteil, dass nach eventuelle Änderungen im Stammbaum man auch das Bild neu herstellen und uploaden müsste. Damit man das erspart, wird die betreffende Stammbaumseite mit einem iframe in die Chronik eingefügt. Als Beispiel hier die Beschreibung meiner Großmutter und hier als Screenshot:

Der grüne Stammbaum stammt aus familie.fiala.cc, die sonstige Seite ist die WordPress-Seite fiala.cc/franz/erinnerungen/grosseltern-generation/grosseltern-kvacek/pohan-julie-kvacek/, in die man ganz problemlos solche Frameseiten einbetten kann.

Der in der Seite eingefügte Kode ist :

<iframe src="https://familie.fiala.cc/detail.aspx?id=173&hide=0&detail=0" width="600" height="400" scrolling="auto"></iframe>

Sicherheit verhindert Einbettungen

Diese Arbeitstechnik funktioniert bestens in allen Seiten, die mit dem http-Protokoll das Auslangen finden.

Als wir aber mit der Clubwebseite auf WordPress umgestiegen sind, wollten diese eingebetteten Fremdseiten nicht mehr funktionieren. Der Grund ist (wie mir Thomas Moritz erklärt hat), dass clubcomputer.at mit dem https-Protokoll verschlüsselt und daher nur solche Seiten in einem iframe-Tag eingebettet werden können, die ebenfalls mit dem https-Protokoll arbeiten. In allen anderen Fällen wird das Einbetten verweigert, die Seite bleibt leer – so wie im folgenden Beispiel:

Beispiel pcnews.at, funktioniert nicht (weil http und die Mutterseite https benutzt)

Ich wollte auf der Seite von ClubComputer die erste Seite von pcnews.at einbetten. Das ginge so:

<iframe src="https://pcnews.at"></iframe>


Man sieht hier zwar den Rahmen des Frame aber keinen Inhalt. Wie schon erwähnt, scheitert diese Zeile daran, dass unser ClubComputer-Web mit https arbeitet aber die PCNEWS-Seite nicht.

Beispiel digisociety.at, funktioniert (weil https)

Wenn man dagegen die Seite der Digital Society in einem iframe einfügt, gelingt das, weil diese Seite ebenfalls das https-Protokoll verwendet.

<iframe src="https://digisociety.at"></iframe>

Hier sieht man den Inhalt, wenn auch nur ganz wenig davon; es geht ja nur ums Prinzip.

Beispiel /relay.aspx?target=pcnews.at, funktioniert (weil relay.aspx auf einem https-Server liegt)

Damit auch das erste Beispiel mit der PCNEWS-Seite funktioniert, muss man den Inhalt der PCNEWS-Seite durch ein Programm auf einer Hilfsseite „holen“. Diese Hilfsseite heißt relay.aspx und befindet sich im Web clubcomputer.at, wird also mit https gerufen. Man übergibt der Seite relay.aspx als Parameter die Adresse jener Seite, die man einbetten möchte und das Programm auf dieser Hilfsseite bewerkstelligt diesen Service. Überspringen wir jetzt einmal das Programm selbst; es ist weiter hinten beschrieben.

Wenn also auf einer verschlüsselt übertragenen Seite (https) ausnahmsweise eine unverschlüsselt übertragene Seite (http) eingebettet werden soll, dann kann man das so ausführen.

<iframe src="/relay.aspx?target=pcnews.at"></iframe>

Und damit ist diese Hürde überwunden und die Einbettung von http-Seiten ist auch auf https-Webs möglich geworden.

relay.aspx

Das Programm auf der Seite relay.aspx bekommt als Argument target die einzubettende Seite (weitere Argumente sind möglich, zum Beispiel pcnews.at?id=pcn151). relay.aspx holt den Inhalt von pcnews.at und schreibt diesen Inhalt in den Frame.

Bei einer Seite, die ausschließlich Text enthält, kann das so funktionieren. Aber Webseiten sind sehr komplex. Eine Html-Seite enthält – wie wir wissen – Stylesheets, Scripts, Bilder uvam. und diese Objekte haben ihrerseits Webadressen; absolute, relative und auf das Wurzelverzeichnis bezogene Adressen. Und da die meisten dieser Objekte ihrerseits ebenfalls unverschlüsselte Übertragung mit http verwenden, muss man alle diese Links im Kode der Html-Datei korrigieren. Hier einige Beispiele:

http://pcnews.at/script.js -> /relay.aspx?target=pcnews.at/script.js
/script.js -> /relay.aspx?target=pcnews.at/script.js
pfad/script.js -> /relay.aspx?target=pcnews.at/pfad/script.js

Daher muss man in weiterer Folge (also wenn der Browser alle im Html-Kode angegebenen Objekte aufruft) damit rechnen, dass nicht nur Html-Kode sondern auch andere Textdateien aber auch Multimedia-Objekte, vor allem also Bilder zu verarbeiten sind. Sonstige Textdateien werden nicht weiter bearbeitet. Bilder dürfen nicht als Text sondern mit gleichbleibendem Mime-Type gesendet werden. Alle diese kleinen Hürden muss das Programm relay.aspx meistern. Und die hier aufgezählten sind sicher nicht alle erforderlichen Maßnahmen, denn ich habe mich auf meine wenigen und überschaubaren Anwendungsfälle beschränkt.

Sicherheitsapekt

Was das Programm relay.aspx macht, ist nicht im Sinne des Erfinders des https-Protokolls. Man sollte daher einschränken, dass diese Funktionalität nicht von jedermann in Anspruch genommen werden kann und deren Zugriff verhindern. Das geschieht, indem man einen Aufruf nur vom lokalen Server erlaubt. Auch diese Schutzmaßnahme ist in relay.aspx mit Hilfe der Eigenschaften Request.IsLocal und Request.ServerVariables["HTTP_REFERER"] implementiert worden..

relay.aspx zeigt sich selbst an

An dieser Stelle sollte die Seite relay.aspx mit dem C#-Programm eingefügt werden, doch dieses Copy&Paste hat in WordPress bei Programmen seine Grenzen. Klar, man kann PlugIns dazu verwenden aber alles. was man ohne PlugIns erledigen kann, ist übersichtlicher und macht ein bisschen unabhängiger. Das Programm relay.aspx liest eine als Argument angegebene Datei, deren Inhalt man über den Serverpfad Request.PhysicalPath holen kann. Es ist daher weiter kein Problem, diesen Text so aufzubereiten, dass man ihn anzeigen kann. Es geschieht über die zusätzliche Variable s in der Kommandozeile.

<iframe src="/relay.aspx?s=s&target=relay.aspx"></iframe>

Der Vorteil dieser Darstellung ist, dass man immer die aktuelle Version dieser Datei sieht. Sollte sich am Kode etwas verändern, würde man das in dieser Webseite sehen, weil tatsächlich der Text der realen Datei im iframe angezeigt wird.

Selbstverständlich könnte man das Programm auch mit PHP formulieren, aber C# mit dem DotNet-Framwork ist einfach schöner.

Link

Mit fremden Federn

„Mit fremden Federn“ ist ein bereits lange geplantes Schwerpunktthema der PCNEWS, aber damit es auch einmal fertig wird, müssen einzelne Beiträge dazu fertiggestellt sein. Dieses Einbetten fremder Inhalte in einem iframe war ein erster Abschnitt zu diesem Thema und es werden weitere folgen.

Der Indianer im Beitragsbild ist bereits für diese zukünftige PCNEWS-Ausgabe vorbereitet worden und die roten Federn sind eben diese eingebetteten Inhalte von anderen Seiten.

Kommentar absenden

Zur Werkzeugleiste springen