Bilder von anderer Domain werden im JavaScript nicht angezeigt

[emmie]

Hi,

ich habe ein Katalog, den ich auf mehreren Homepages einbinde, jedoch sind die Bilder nur auf einem Server. Wenn ich nun den Katalog per JavaScript in eine Homepage einbinde, der Bild-URLs von dem "fremden" Server hat, dann werden diese Bilder im Katalog nicht angezeigt.
Ist das wegen der Content Security Police?

Das habe ich schon versucht:
header("Content-Security-Policy: img-src 'DOMAINWODIEBILDERHERKOMMEN'"); Gibt es noch andere Möglichkeit die Bilder von meinem anderen Server auf meiner Homepage angezeigt zu bekommen? Danke & LG

[Zeichen32]

In der Regel steht in der Entwickler Konsole (F12 drücken) deines Browsers der genau Grund warum etwas nicht geladen werden konnte.

[emmie]

Dankeschön für den Tipp!

Access to image at 'https://www.domain1.com' from origin 'https://www.domain2.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Das heißt wohl ich muss Access-Control-Allow-Origin einsetzen, oder?

[Zeichen32]

Nein! Das heißt, der externe Server muss den Access-Controll Header so mit schicken, dass dein Domain Name als erlaubte externe Domain eingetragen ist

[protestix]

Gibt es noch andere Möglichkeit die Bilder von meinem anderen Server auf meiner Homepage angezeigt zu bekommen?

Ist das dein Server, dann ist es ja kein Problem.
Ist es nicht dein Server, dann lade die Bilder über den Umweg php. Readfile liest eine Datei aus und gibt sie aus. Du musst dir also nur ein 3Zeiler PHP script schreiben und die Urls ändern.
Aus

https://example.net/img/zu_ladendes_bild.jpg

machst du dann

 https://example.com/imageload.php?url=https://example.net/img/zu_ladendes_bild.jpg

Dein Script ist imagload.php in diesem Beispiel.

[Zeichen32]

Ist das dein Server, dann ist es ja kein Problem.
Ist es nicht dein Server, dann lade die Bilder über den Umweg php. Readfile liest eine Datei aus und gibt sie aus. Du musst dir also nur ein 3Zeiler PHP script schreiben und die Urls ändern.
Aus

https://example.net/img/zu_ladendes_bild.jpg

machst du dann

 https://example.com/imageload.php?url=https://example.net/img/zu_ladendes_bild.jpg

Dein Script ist imagload.php in diesem Beispiel.

Dabei solltest du darauf achten ob du auch die Erlaubnis hast die Bilder zu verwenden oder ob dann eine Abmahnung drohnt.

[emmie]

Ja, das ist mein Server bzw. Webspace und ich wollte nicht immer auf beide Servern die gleichen Bilddateien hochladen, wenn sie aktualisiert werden müssen

Ich habe es auf Domain2.com mit diesem Code versucht:
header("Content-Security-Policy: img-src 'domain1darfbildervonmiranzeigen.com'");

Funktioniert leider nicht.

Dann habe ich es mit der .htaccess versucht:
Header set Content-Security-Policy "img-src 'domain1darfbildervonmiranzeigen.com';"

Danach ging die ganze Seite nicht mehr.

Ist es mit imageload.php auch zu empfehlen, wenn es mein Server ist? Allerdings findet Google unter "imageload.php" nicht viel.

[Zeichen32]

Du verwechselst die Header. Der Server welches das Bild ausliefert, muss zusammen mit dem Bild den folgenden Header ausliefern:

Access-Control-Allow-Origin: <origin>

Also wenn die Domain example.org die Bilder anzeigen darf:

Access-Control-Allow-Origin: example.org

Oder * wenn alle Domains die Bilder anzeigen dürfen:

Access-Control-Allow-Origin: *

[emmie]

Vielen Dank, nur leider war wieder die ganze Seite durch den Zusatz

Access-Control-Allow-Origin: *
in der .htaccess nicht erreichbar.

Dann kommt nämlich diese Meldung beim Aufruf der Seite.

Internal Server Error

The server encountered an internal error or misconfiguration and was unable to complete your request.

Please contact the server administrator at webmaster@....com to inform them of the time this error occurred, and the actions you performed just before this error.

More information about this error may be available in the server error log.

[tk1234]

Access-Control-Allow-Origin: *

Das hast du doch hoffentlich nicht genau so rein geschrieben, du musst dich natürlich über den richtigen Syntax informieren. Ansonsten:

More information about this error may be available in the server error log.

Fehlermeldung lesen und machen was das steht! Der Indianer sagt schon was falsch ist.

[emmie]

Doch genau so an erster Stelle der .htaccess Datei... Ohje ich fürchte das ist für mich paar Nummern zu hoch.

Auf der Seite https://developer.mozilla.org/en-US/...rigin#Examples steht Syntax

Access-Control-Allow-Origin: * Access-Control-Allow-Origin: <origin> Access-Control-Allow-Origin: null Dann muss ich die drei Zeilen einfügen? Oder muss ich mich an den Webhoster wenden?

[tk1234]

Google: Name des Headers + htaccess = https://stackoverflow.com/questions/...l-allow-origin