Zuletzt aktualisiert: 11. September

Dateien sicher aus Amazon S3 in Browsern importieren

Tim Koschützki

Mitgründer · Berlin, Deutschland ·

Haben Sie sich schon einmal gefragt, wie Sie Dateien sicher direkt in Ihrem Browser aus Amazon S3 importieren? In diesem DevTip zeigen wir, wie Sie moderne Werkzeuge – konkret das AWS SDK for JavaScript v3 – nutzen, um Dateien abzurufen, ohne Ihr Backend zu belasten, und dabei Zugangsdaten sicher halten sowie eine optimale Nutzererfahrung sicherstellen.

Warum direkt aus Amazon S3 im Browser importieren?

Der direkte Import von Dateien aus Amazon S3 im Browser reduziert die Serverlast und minimiert den Infrastrukturaufwand. Indem Sie das Abrufen von Dateien auf die Client-Seite verlagern, verbessern Sie die Performance Ihrer Anwendung. Dieser Ansatz erfordert jedoch besondere Sorgfalt bei Sicherheit, Authentifizierung und Performance-Konfigurationen.

Ihren S3-Bucket einrichten

Erstellen oder wählen Sie einen Bucket in Ihrem AWS-Konto aus.

Konfigurieren Sie CORS, um browserbasierten Zugriff zu erlauben. Zum Beispiel:

[
  {
    "AllowedOrigins": ["https://my-app.com"],
    "AllowedMethods": ["GET"],
    "MaxAgeSeconds": 3000,
    "AllowedHeaders": ["*"],
    "ExposeHeaders": ["ETag"]
  }
]

Richten Sie einen Amazon Cognito Identity Pool ein, der mit Ihrem User Pool und einer authentifizierten IAM-Rolle verknüpft ist. Deaktivieren Sie nicht authentifizierte Identitäten, wenn Dateien eine angemeldete Person erfordern.
Konfigurieren Sie strikte Bucket-Richtlinien und IAM-Rollen nach dem Least-Privilege-Prinzip, damit nur notwendige Aktionen erlaubt sind.

Das AWS SDK for JavaScript verwenden

Das AWS SDK for JavaScript v3 bietet einen modularen Ansatz, um skalierbare, browserbasierte Lösungen für den Dateiimport zu bauen. Das folgende Beispiel zeigt, wie Sie Dateien sicher aus S3 abrufen, mit Amazon Cognito für temporäre Zugangsdaten. Installieren Sie @aws-sdk/client-s3 und @aws-sdk/credential-providers in Version 3 in Ihrer gebündelten Browser-Anwendung. Beziehen Sie idToken aus Ihrem bestehenden Anmelde-Flow des User Pools und übergeben Sie den Wert an createS3Client. Ersetzen Sie Region, Identity-Pool-ID und den Namen des Login-Providers durch Ihre eigene Konfiguration; erneuern Sie den Token bei Bedarf über diesen Anmelde-Flow.

import { S3Client, GetObjectCommand } from '@aws-sdk/client-s3'
import { fromCognitoIdentityPool } from '@aws-sdk/credential-providers'

function createS3Client(idToken) {
  return new S3Client({
    region: 'YOUR_REGION',
    credentials: fromCognitoIdentityPool({
      clientConfig: { region: 'YOUR_REGION' },
      identityPoolId: 'YOUR_IDENTITY_POOL_ID',
      logins: {
        'cognito-idp.YOUR_REGION.amazonaws.com/YOUR_USER_POOL_ID': idToken,
      },
    }),
  })
}

async function fetchFileFromS3(s3Client, bucketName, fileKey) {
  const response = await s3Client.send(new GetObjectCommand({
    Bucket: bucketName,
    Key: fileKey,
  }))
  if (!response.Body) {
    throw new Error('The object response has no body')
  }
  return response.Body.transformToByteArray()
}

Das zurückgegebene Byte-Array hält das gesamte Objekt im Speicher des Browsers. Verwenden Sie diese Hilfsfunktion für Dateien mit begrenzter Größe; es handelt sich nicht um einen Streaming-Download auf die Festplatte. Fangen Sie Fehler in Ihrer UI ab und zeigen Sie eine bereinigte Fehlermeldung an.

Tipps zur Performance-Optimierung

Um die Performance weiter zu steigern, sollten Sie diese Strategien in Betracht ziehen:

Streamen Sie große Downloads an ein geeignetes Ziel, statt ein vollständiges Byte-Array aufzubauen, oder verwenden Sie eine kurzlebige, vorsignierte Download-URL mit dem normalen Download-Handling des Browsers.
Begrenzen Sie gleichzeitige Downloads, um Bandbreiten- und Speicherverbrauch zu steuern.
Verwenden Sie den SDK-Client wieder, damit sein Credential-Provider temporäre Zugangsdaten zwischenspeichern und erneuern kann.
Implementieren Sie Retry-Strategien, um vorübergehende Netzwerkprobleme sauber abzufangen.
Überwachen Sie den Download-Fortschritt, wenn Sie einen Response-Stream verarbeiten, um Nutzenden klares Feedback zu geben.

Bewährte Verfahren für die Sicherheit

Die Absicherung browserbasierter Importe ist entscheidend. Befolgen Sie diese Richtlinien:

Verwenden Sie Amazon Cognito Identity Pools, um keine dauerhaften AWS-Zugriffsschlüssel auszuliefern. Temporäre Zugangsdaten bleiben für die Person im Browser sichtbar, daher müssen ihre Berechtigungen eng gefasst sein.

Konfigurieren Sie IAM-Rollen nach dem Least-Privilege-Prinzip und setzen Sie strikte Bucket-Richtlinien durch. Eine minimale IAM-Richtlinie könnte zum Beispiel so aussehen:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": ["s3:GetObject"],
      "Resource": "arn:aws:s3:::your-bucket/*"
    }
  ]
}

Erzwingen Sie ausschließlich HTTPS-Endpunkte, damit die gesamte Kommunikation sicher ist.
Konfigurieren Sie CORS für vertrauenswürdige Browser-Ursprünge. CORS ist keine Autorisierung und schränkt Clients außerhalb des Browsers nicht ein; den Zugriff setzen IAM- und Bucket-Richtlinien durch. AllowedHeaders: ["*"] deckt die Signatur- und Session-Header des SDK ab, ohne zusätzliche Objektberechtigungen zu gewähren.
Rotieren Sie Zugangsdaten regelmäßig und überprüfen Sie IAM-Richtlinien, um die Sicherheitshygiene aufrechtzuerhalten.

Häufige Probleme und Lösungen

CORS-Fehler: Prüfen Sie, ob die CORS-Konfiguration Ihres S3-Buckets die Domain Ihrer Anwendung korrekt auflistet.
Probleme mit Zugangsdaten: Prüfen Sie Ihren Amazon Cognito Identity Pool noch einmal genau und stellen Sie sicher, dass IAM-Rollen für Zugriff nach dem Least-Privilege-Prinzip konfiguriert sind.
Performance-Herausforderungen: Begrenzen Sie gleichzeitige Downloads und vermeiden Sie es, große Objekte im Speicher anzusammeln. Einstellungen für Multipart-Uploads verbessern Downloads mit GetObject nicht.
Einschränkungen bei der Dateigröße: Verwenden Sie Streaming oder native Browser-Downloads für Dateien, die das Speicherbudget Ihrer Anwendung überschreiten.

Fazit

Sichere, browserbasierte Dateiimporte aus Amazon S3 umzusetzen erfordert ein sorgfältiges Zusammenspiel von Sicherheit, Performance und Nutzererfahrung. Das AWS SDK for JavaScript v3 zusammen mit Amazon Cognito Identity Pools bietet eine skalierbare, robuste Lösung. Wenn Sie einen verwalteten Ansatz bevorzugen, der diese Komplexität für Sie übernimmt, werfen Sie einen Blick auf den Robot für S3-Importe von Transloadit.