Bilder nur in Seite eingebettet anzeigen

[Stefan E.]

Hallo,

auf dieser Seite sieht man ein Bild. Allerdings wird beim Zugriff nicht nur die Bilddatei angezeigt, sondern diese ist eingebettet in einer HTML-Datei. In den Seiteneigenschaften ([STRG]+[I] bei Firefox) kann man sehen, dass das eigentliche Bild genau diese Adresse hat, auch gelingt es beim Kopieren der Bild-URL diese z.Bsp. in einem neuen Tab einzeln zu öffnen. Wenn man [F5] drückt, wird das Bild aber wieder eingebettet angezeigt.

Meine Frage ist jetzt, wie genau kann man sowas realisieren? Also verhindern, dass die Bilder nicht direkt angezeigt werden, sondern nur in einer umgebenden HTML-Datei?

Viele Grüße, Stefan

[Rolf B]

Hallo Stefan,

it's a kind of magic

Header beim Abruf der HTML Seite:

accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
accept-encoding: gzip, deflate, br
accept-language: de-DE,de;q=0.9,en;q=0.8
sec-fetch-dest: document
sec-fetch-mode: navigate
sec-fetch-site: cross-site
sec-fetch-user: ?1
upgrade-insecure-requests: 1

Header beim Abruf der Bilddatei:

accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
accept-encoding: gzip, deflate, br
accept-language: de-DE,de;q=0.9,en;q=0.8
referer: https://fichtelbergwetter.files.wordpress.com/2016/12/01-fichtelberg-keilberg-230km.jpg
sec-fetch-dest: image
sec-fetch-mode: no-cors
sec-fetch-site: same-origin

Irrelevante oder identische Header habe ich herausgenommen.

Ich würde mutmaßen, dass Wordpress den accept-Header abfragt. Wird HTML oder XML akzeptiert, liefert es das Rahmen-HTML aus.

Den referer kann man - meine ich - per Browsereinstellung unterdrücken und ob die sec-fetch Header immer da sind, weiß ich auch nicht.

Ein img Element akzeptiert das nicht und dann liefert es die Datei selbst.

Clever 😉

Falls Du Bilder von dieser Seite grabben und vielleicht sogar anderswo darstellen möchtest: NUR MIT EINWILLIGUNG DES BESITZERS

Rolf

[Robert B.]

Moin,

Ich würde mutmaßen, dass Wordpress den accept-Header abfragt. Wird HTML oder XML akzeptiert, liefert es das Rahmen-HTML aus.

das könnte erklären, warum wget direkt das Bild bekommt: Es sendet Accept: */*

Den referer kann man - meine ich - per Browsereinstellung unterdrücken und ob die sec-fetch Header immer da sind, weiß ich auch nicht.

Dazu kommt, dass der HTTP Refer(r)er wohl auf der Abschussliste steht.

vvvvvvvvvvvvvvvvvv

Falls Du Bilder von dieser Seite grabben und vielleicht sogar anderswo darstellen möchtest: NUR MIT EINWILLIGUNG DES BESITZERS

^^^^^^^^^^^^^^^^^^

Viele Grüße
Robert

[Stefan E.]

Hallo Rolf,

Header beim Abruf der HTML Seite:

accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9

Header beim Abruf der Bilddatei:

accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8

nur damit ich es richtig verstehe, wenn der Browser die URL (welche hier ja für HTML und Bild identisch ist) erstmalig aufruft, dann akzeptiert er dafür html, xml und bilddateien. Wenn er dann aber das in der HTML-Datei eingebettete Bild aufruft, akzeptiert er dafür lediglich Bilddateien und bekommt deshalb dieses geliefert. Ist das so ungefähr richtig verstanden?

Was ich mit der Beispielseite (nicht) machen will, habe ich ja eben Felix geschrieben, da soll auf keinen Fall etwas geklaut oder eingebunden werden. Wer es nicht weiß, dass Bild zeigt den Fichtelberg aus immerhin ca. 230 km Entfernung von der Wetterstation auf dem Brocken. Aufgrund von Automatisierung dort wird es aber leider solche Aufnahmen zukünftig wohl eher nicht mehr geben.

Viele Grüße, Stefan

[Der Martin]

Moin,

auf dieser Seite sieht man ein Bild. Allerdings wird beim Zugriff nicht nur die Bilddatei angezeigt, sondern diese ist eingebettet in einer HTML-Datei. In den Seiteneigenschaften ([STRG]+[I] bei Firefox) kann man sehen, dass das eigentliche Bild genau diese Adresse hat, auch gelingt es beim Kopieren der Bild-URL diese z.Bsp. in einem neuen Tab einzeln zu öffnen.

interessant, mir gelingt das nämlich nicht. Sogar beim Rechtsklick auf das Bild und Auswahl "View Image" kriege ich das Bild doch wieder mit dem gesamten drumherum.

Meine Frage ist jetzt, wie genau kann man sowas realisieren? Also verhindern, dass die Bilder nicht direkt angezeigt werden, sondern nur in einer umgebenden HTML-Datei?

Rolf hat ja schon nachgeforscht und Mutmaßungen geäußert. Ich hätte gemutmaßt: Da wird der Referer abgefragt, und nur wenn der auf die passende Seite verweist, wird beim Request wirklich die Bildressource ausgeliefert, sonst das HTML-Dokument.

Live long and pros healthy,
 Martin

[Robert B.]

Moin Martin,

auf dieser Seite sieht man ein Bild. Allerdings wird beim Zugriff nicht nur die Bilddatei angezeigt, sondern diese ist eingebettet in einer HTML-Datei. In den Seiteneigenschaften ([STRG]+[I] bei Firefox) kann man sehen, dass das eigentliche Bild genau diese Adresse hat, auch gelingt es beim Kopieren der Bild-URL diese z.Bsp. in einem neuen Tab einzeln zu öffnen.

interessant, mir gelingt das nämlich nicht. Sogar beim Rechtsklick auf das Bild und Auswahl "View Image" kriege ich das Bild doch wieder mit dem gesamten drumherum.

Das ist interessant. Mit welchem Browser und welchen Einstellungen passiert das?

Rolf hat ja schon nachgeforscht und Mutmaßungen geäußert. Ich hätte gemutmaßt: Da wird der Referer abgefragt, und nur wenn der auf die passende Seite verweist, wird beim Request wirklich die Bildressource ausgeliefert, sonst das HTML-Dokument.

Ganz so einfach scheint es nicht zu sein, siehe https://forum.selfhtml.org/m1789659.

Fische, die bellen, beißen nicht.

Das stimmt allerdings.

Schönen Samstag,
Robert

[Raketenprüfer]

Das ist interessant. Mit welchem Browser und welchen Einstellungen passiert das?

Bei mir nur mit Chromium „Version 87.0.4280.141 (Entwickler-Build) built on Debian 10.7, running on Debian bullseye/sid (64-Bit)“ (tatsächlich übrigens Ubuntu, aber aus dem Debian-Rep installiert, weil Ubuntu da allen Ernstes einen „snap“ installieren will…)

Mit dem aktuellen Firefox nicht.

Es ist ja bekanntlich „kein Akt“ einen Apache oder halt php dazu zu bekommen, in Abhängigkeit von den Request-Headern jeweils etwas anderes (html/jpg) zu senden…

Das Problem besteht offenbar darin, dass die Browser im Verhalten abweichen - was es schwierig macht, die Request-Header zuzuordnen.

Anders gesagt: „Vergebliche Liebesmüh“ - Doch Wordpress versucht es…

[Der Martin]

Hallo Robert,

interessant, mir gelingt das nämlich nicht. Sogar beim Rechtsklick auf das Bild und Auswahl "View Image" kriege ich das Bild doch wieder mit dem gesamten drumherum.

Das ist interessant. Mit welchem Browser und welchen Einstellungen passiert das?

Pale Moon 29.2.1 (ein Firefox-Fork) unter Linux Mint.
Ich dachte erst, es könnte vielleicht daran liegen, dass ich meinem Browser vorschreibe, sich generell nicht unreflektiert aus dem Cache zu bedienen, sondern immer erst mit einem If-Modified-Since-Header beim Server nachzufragen, ob's schon was Neues gibt.
Dieselbe Einstellung habe ich aber im Firefox 89 unter Windows 10 (auf dem Geschäft-Notebook) auch, und der verhält sich trotzdem so, wie ihr es beschreibt.

Rolf hat ja schon nachgeforscht und Mutmaßungen geäußert. Ich hätte gemutmaßt: Da wird der Referer abgefragt, und nur wenn der auf die passende Seite verweist, wird beim Request wirklich die Bildressource ausgeliefert, sonst das HTML-Dokument.

Ganz so einfach scheint es nicht zu sein, siehe https://forum.selfhtml.org/m1789659.

Mag sein; anscheinend spielen da mehrere Dinge zusammen.

Live long and pros healthy,
 Martin

[Felix Riesterer]

Lieber Stefan,

auf dieser Seite sieht man ein Bild. [...] dass das eigentliche Bild genau diese Adresse hat

bei Rechtsklick auf Deinen Link und "in neuem Tab öffnen" kam die von Dir beschriebene Seite. Mit Rechtsklick auf das dortige Bild und "Grafik in neuem Tab öffnen" kam dann tatsächlich nur das Bild. Nach Erneutem Rechtsklick auf Deinen Link kam überraschenderweise nur noch das Bild (muss mit dem Cache zu tun haben). Nach einem Reload wurde aus dem Bild wieder die ganze Seite.

Was willst Du erreichen?

Liebe Grüße

Felix Riesterer

[Stefan E.]

Hallo Felix,

Was willst Du erreichen?

"dort", also in Verbindung mit der Beispielseite, überhaupt nix. Also da weder die Bilder "grabben", noch irgendwo einbinden. Mich interessiert das technische Verhalten und wie ich sowas ggf. in eigene Projekte implementieren kann.

Die Google-Bildersuche geht z.Bsp. auf die Grafikdateien und da würde ich es gern so machen, dass der Besucher dann nicht nur die Grafikdatei aufrufen kann, sondern diese in der dazugehörigen HTML-Seite angezeigt wird. Einfach weil diese und die darin enthaltenen Texte zu dem Bild zugehörig sind. Dabei geht es mir nicht um Diebstahlschutz (spätestens Screenshot könnte man eh nicht verhindern), sondern vielmehr um die Herstellung des inhaltlichen Zusammenhangs zwischen Bild und Seite.

Viele Grüße, Stefan

[Mitleser 2.0]

Also bei mir ist es reproduzierbar der Referrer. Keine Ahnung, warum WP das für so eine gute Idee hält. Viel spannender finde ich die Frage, warum das so interessant sein soll? Ich finds blöd ;-)