Darstellungsrobleme von Bildern mit AWS S3

In einigen Browsern wie z.B. Chrome, Iridium oder Opera kann es zu Darstellungsproblemen von externen Ressourcen (z.B. Bilder oder Videos) kommen. Dies liegt daran, dass diese Browser nicht alle notwendigen CORS Headerinformationen übermitteln und AWS (Amazon Web Services) diese zwingend benötigt. Insbesondere wenn JavaScripte eingesetzt werden um diese Bilder zu verarbeiten kann dieses Problem verschärft werden.

Derzeit treten diese Probleme bei Firefox und Edge nicht auf.

Die Lösung

S3 CORS Konfiguration

Gehe innerhalb deines S3 Bucket auf den Tab Berechtigungen und anschließend auf CORS-Konfigurationen und lege dort eine neue Konfiguration im XML-Format an.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="https://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <ID>example.de: Allow GET with AWS S3 JS SDK</ID>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
    <AllowedHeader>Access-Control-Request-Method-Header</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Parameter und Attribute

Damit die Browser und AWS wissen was zu tun ist, müssen nun einige änderungen vorgenommen werden. Zum einen müssen alle S3 Ressourcen mit einem zusätzlichen Parameter eingebunden werden. Dazu einfach in der URL den Parameter ?cacheblock=true mit angeben. Und zum anderen muss das Attribut crossorigin="anonymous" in dem betroffenen Image, Video oder Script-Tag angegeben werden.

<img crossorigin="anonymous" src="https://meinbucket.s3.amazonaws.com/images/beispiel.jpeg?cacheblock=true"/>

Danach sollte der Aufruf der Bilder und Videos problemlos auch in den übrigen Browsern funktionieren.

Mehr Performance

Empfehlung

Lagern Sie statische Inhalte auf externen Speicher aus um die Anzahl Amazon Simple Storage Service (Amazon S3) ist ein Objektspeicherservice, der branchenführende Skalierbarkeit, Datenverfügbarkeit, Sicherheit und Leistung bietet.


Case ist ein Produkt der: