Bild aus externer URL wird nicht geladen

[Steffen Peters]

Hallo,

ich möchte auf meiner Webseite das Bild der folgendenden externen URL anzeigen:

<img src="https://www.google.com/chart?chs=200x200&chld=M|0&cht=qr&chl=otpauth://totp/GEHEIM?secret=AABBCCDDEEFFGGHHJJKKLLMMNN&issuer=TEST" width="100" />

Die URL erzeuge ich über PHP. (Es wird der Parameter secret ausgetauscht)

Die Webseite zeigt mir das Bild aber als Broken Link an. Wenn ich dort aber mit rechter Maustaste "Grafikadresse kopieren" wähle und in einem neuen Tab eintrage, wird die Grafik korrekt angezeigt. Rufe ich danach nochmal meine Seite auf, wird hier die Grafik dann auch korrekt dargestellt (vermutlich aus dem Cache).

Wie muss ich die URL encodieren, damit diese korrekt geladen wird?

LG Steffen

[Robert B.]

Moin Steffen,

ich habe deinen Beispielcode

<img src="https://www.google.com/chart?chs=200x200&chld=M|0&cht=qr&chl=otpauth://totp/GEHEIM?secret=AABBCCDDEEFFGGHHJJKKLLMMNN&issuer=TEST" width="100" />

als HTML ausgezeichnet.

Die Webseite zeigt mir das Bild aber als Broken Link an. Wenn ich dort aber mit rechter Maustaste "Grafikadresse kopieren" wähle und in einem neuen Tab eintrage, wird die Grafik korrekt angezeigt. Rufe ich danach nochmal meine Seite auf, wird hier die Grafik dann auch korrekt dargestellt (vermutlich aus dem Cache).

Vielleicht liegt das an Sicherheitseinstellungen von Google oder so Dingen wie fehlender Cookies. Was zeigt denn der Netzwerk-Tab der Browser-Entwicklertools (F12 vor dem Laden der Seite drücken ) an?

Wie muss ich die URL encodieren, damit diese korrekt geladen wird?

Der URI steht oben im HTML-Kontext, d.h. die folgenden Zeichen müssen maskiert werden:

Zeichen	Maskierung
&	&
"	"
<	&lt;
>	&gt;

Viele Grüße
Robert

[Steffen Peters]

Hallo,

die Entwicklerkonsole vom Browser zeigt an:

Status: 400 Bad Request
Übertragen: 1,98kB (1,56 kB Größe)
Version: HTTP/3
Referrer Policy: strict-origin-when-cross-origin
Prio: Low

LG Steffen

[Gunnar Bittersmann]

@@Steffen Peters

<img src="https://www.google.com/chart?chs=200x200&chld=M|0&cht=qr&chl=otpauth://totp/GEHEIM?secret=AABBCCDDEEFFGGHHJJKKLLMMNN&issuer=TEST" width="100" />

Fehler: Der Altenativtext (alt-Attribut) fehlt.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Steffen,

man müsste jetzt im Netzwerkprotokoll eruieren, wo die Unterschiede bei img und direktem Abruf sind. Mutmaßlich der referer, den der Browser beim Zugriff via img setzt und bei Zugriff aus der Adressleiste nicht.

Füge dem img Element mal das Attribut referrerpolicy="no-referrer" hinzu. Ja, Doppel-R. Der Header heißt zwar Referer, aber das ist ein Typo der es in die Freiheit geschafft hat.

Rolf

[Steffen Peters]

Hallo Rolf,

vielen lieben Dank, das war die Lösung!

Toll, dass es nun funktioniert und interessant, dass es der Schreibfehler tatsächlich unkorrigiert in die Freiheit geschafft hat (und dort bis heute bleiben konnte).

Nochmals Danke!

LG Steffen

[Der Martin]

Hallo,

referrerpolicy="no-referrer"
Ja, Doppel-R. Der Header heißt zwar Referer, aber das ist ein Typo der es in die Freiheit geschafft hat.

da wäre die Frage, welche der beiden Schreibweisen man als Typo bezeichnen mag. Nach meinem Verständnis ist die Schreibung mit Doppel-r die britische^[1], mit einfachem r die amerikanische. Und eigentlich kommen IT-Fachbegriffe eher aus dem Amerikanischen.

Einen schönen Tag noch
 Martin

---

1. Aus dem lange zurückliegenden Englischunterricht wissen wir, dass bei Verben, auf l, p oder r enden, dieser Buchstabe in konjugierten Formen verdoppelt wird. Beispiele: travel, travelling; develop, developper; refer, referring
   Die Amerikaner sch***en auf diese Regel. ↩︎

[Robert B.]

Moin Martin,

Ja, Doppel-R. Der Header heißt zwar Referer, aber das ist ein Typo der es in die Freiheit geschafft hat.

da wäre die Frage, welche der beiden Schreibweisen man als Typo bezeichnen mag.

Die englische Wikipedia sagt, dass Referer der Typo ist.

Viele Grüße
Robert