Steffen Peters: Bild aus externer URL wird nicht geladen

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

  1. 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
    & &amp;
    " &quot;
    < &lt;
    > &gt;

    Viele Grüße
    Robert

    1. 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

  2. @@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.

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

    --
    „Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
    — @Grantscheam auf Twitter
  3. 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

    --
    sumpsi - posui - obstruxi
    1. 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

    2. 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

      --
      Wer kennt ein schönes Autofahrer-Märchen? - Radkäppchen und der böse Golf

      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. ↩︎

      1. 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