CORS-Policies anwenden - Hetzner Docs

Um Cross-Origin-Anfragen an deinen Bucket zu erlauben, kannst du CORS-Regeln festlegen. Weitere Informationen findest du in dem AWS Artikel über Cross-Origin Resource Sharing (CORS).

Die Befehle unterscheiden sich je nach S3-kompatiblem Tool. Die folgenden Schritte werden mittels Beispielbefehlen für AWS CLI und S3cmd erklärt. MinIO Client unterstützt aktuell (Ende 2024) weder PutBucketCors noch DeleteBucketCors, siehe diesen Artikel.

Im folgendem Beispiel wird gezeigt, wie du eine kleine Webseite einrichtest, die auf einem Server gehostet wird und Daten von einem Bucket abruft. Dabei wird ein Bild über dessen direkte URL abgerufen. Weitere Daten werden aus einer JSON-Datei mithilfe von JavaScript abgerufen.

Beispiel-Webseite einrichten

Wenn du die Verbindung direkt über eine Beispiel-Webseite testen möchtest, kannst du folgende Dateien verwenden:

Server

Installiere auf dem Server einen Webserver (z.B. nginx) und erstelle folgende Dateien:

/var/www/html/index.html

Wenn die Daten in einem Bucket mit privater Sichtbarkeit liegen, gib für image.png eine presigned URL an. Im nächsten Schritt findest du weitere Informationen bezüglich presigned URLs.

Ersetze <bucket_name> mit dem Namen deines Buckets.

<!DOCTYPE html>
<html lang="en">

<body>

 <h1>Daten von einem Bucket abrufen!</h1>
 <h2>Bild:</h2>
 <img src="https://<bucket_name>.fsn1.your-objectstorage.com/image.png" height="100" />
 <br><br>
 <h2>JavaScript:</h2>
 <div class="row" id="content-bucket">
 <!-- Dynamically populated -->
 </div>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
 <script src="js/script.js"></script>

</body>
</html>

/var/www/html/js/script.js

Wenn die Daten in einem Bucket mit privater Sichtbarkeit liegen, gib für data/content.json eine presigned URL an. Im nächsten Schritt findest du weitere Informationen bezüglich presigned URLs.

Ersetze <bucket_name> mit dem Namen deines Buckets.

"use strict";

function listContent(content, contentBucket) {
 $(contentBucket).append(`
                       <h3>${content.title}</h3>
                       <p>${content.text}</p>
                     `);
}

$(document).ready(() => {
 let contentBucket = $('#content-bucket');

 $.getJSON("https://<bucket_name>.fsn1.your-objectstorage.com/data/content.json", contents => {
   contents.forEach(content => {
     listContent(content, contentBucket);
   });
 });
});

Bucket

Erstelle die folgenden Dateien auf einem Gerät mit einem S3-kompatiblen API-Tool wie S3cmd:

content.json

[
    {
        "title": "TITLE 1",
        "text":"Text 1"
    },
    {
        "title": "TITLE 2",
        "text":"Text 2"
    }
]

image.png

wget -O image.png https://picsum.photos/200

Kopier die Dateien nun auf deinen Bucket:

aws s3 cp content.json s3://<bucket_name>/data/content.json
aws s3 cp image.png s3://<bucket_name>/image.png

s3cmd put content.json s3://<bucket_name>/data/content.json
s3cmd put image.png s3://<bucket_name>/image.png

Zugriffsrechte vorbereiten

Damit die CORS-Funktion fehlerfrei funktioniert, benötigt der Browser die entsprechenden Zugriffsrechte. Dafür kannst du eine der folgenden Optionen verwenden:
- Presigned URL
  
  Um eine presigned URL für Daten in einem Bucket mit "privater" Sichbarkeit zu generieren, folge den Anweisungen in diesem FAQ-Eintrag: "Kann ich auf einen privaten Bucket über einen Webbrowser zugreifen?"
- Öffentliche Sichtbarkeit
  
  Um die Sichtbarkeit über die Hetzner Console auf "öffentlich" zu setzen, navigiere zu deinem Bucket und klicke oben rechts auf "Aktionen". Klicke anschließend auf "Bucket-Sichtbarkeit zurücksetzen" und setze die Sichtbarkeit auf "Öffentlich".

CORS-Konfiguration erstellen

Wenn du deine Webseite unter https://www.example.com aufrufst, solltest du bereits das Bild sehen, das aus dem Bucket abgerufen wird. Die Informationen, die über JavaScript abgerufen werden, sollten hingegen noch fehlen. In der Datei index.html wird direkt auf die Bild-URL verwiesen, weshalb dieses über eine einfache HTTP-GET-Anfrage abgerufen wird. Die Daten aus data/content.json werden hingegen über JavaScript abgerufen, das eine AJAX-Anfrage sendet. Da diese AJAX-Anfrage vom Browser an den Bucket gesendet wird (besitzen verschiedene Domains), wird sie als Cross-Origin-Anfrage angesehen.

In der CORS-Konfiguration eines Buckets können mehrere verschiedene Elemente definiert werden. Weitere Informationen findest du in dem AWS S3 Artikel "Elements of a CORS configuration".

Die folgenden beiden Beispiele erlauben alle GET und HEAD Requests, die von https://www.example.com eingehen.

Wähle eine der beiden Optionen und erstelle eine neue Datei.
- Für AWS CLI, z.B. example-cors.json
  
  Ersetze https://www.example.com mit deiner eigenen Domain.
```
{
  "CORSRules": [
   {
     "AllowedOrigins": ["https://www.example.com"],
     "AllowedHeaders": ["*"],
     "AllowedMethods": ["GET", "HEAD"]
   }
 ]
}
```
- Für S3cmd, z.B. example-cors.xml
  
  Ersetze https://www.example.com mit deiner eigenen Domain.
```
<CORSConfiguration>
 <CORSRule>
   <AllowedHeader>*</AllowedHeader>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedMethod>HEAD</AllowedMethod>
   <AllowedOrigin>https://www.example.com</AllowedOrigin>
 </CORSRule>
</CORSConfiguration>
```

CORS-Konfiguration auf den Bucket anwenden

AWS CLI

aws s3api put-bucket-cors --bucket <bucket_name> --cors-configuration file://example-cors.json

S3cmd

s3cmd setcors example-cors.xml s3://<bucket_name>

CORS-Regeln anzeigen

AWS CLI

aws s3api get-bucket-cors --bucket <bucket_name>

S3cmd

s3cmd info s3://<bucket_name> | tail -n 3

Verbindung prüfen

curl \
  -i https://<bucket_name>.fsn1.your-objectstorage.com/image.png \
  -H "Access-Control-Request-Method: GET" \
  -H "Origin: https://www.example.com"

CORS-Regeln löschen

AWS CLI

aws s3api delete-bucket-cors --bucket <bucket_name>

S3cmd
```
s3cmd delcors s3://<bucket_name>
```

Auf deiner Webseite sollten nun auch Daten angezeigt werden, die über eine Cross-Origin-Anfrage abgerufen werden.

Nächste Schritte: