Sandbox-Iframes bieten eine wichtige Sicherheitsschicht, wenn Sie Drittanbieterinhalte auf Ihrer Website einbetten möchten. Ohne die Sandbox können Iframes potenziell schädlichen Code enthalten und ausführen. Sie könnten bösartige Skripte ausführen, die Benutzerdaten stehlen, unerwünschte Werbung anzeigen oder andere schädliche Aktionen ausführen. Mit der Sandbox können Sie genau kontrollieren, was im Iframe erlaubt ist und was nicht.
Das sandbox Attribut für Iframes kann mit den folgenden Direktiven oder Werten gefüllt werden, um verschiedene Einschränkungen für den Inhalt des Iframes zu setzen:
| Sandbox-Attribut | Beschreibung | Beispiel |
|---|---|---|
| allow-forms | Erlaubt dem eingebetteten Dokument, Formulareinreichungen zu tätigen. | document.forms[0].submit(); |
| allow-modals | Erlaubt dem eingebetteten Dokument, Modal-Dialoge zu öffnen (z. B. mit alert, confirm, prompt oder print). | alert(„Hallo, Welt!“); |
| allow-orientation-lock | Erlaubt dem eingebetteten Dokument, den Bildschirm zu sperren mit der | screen.orientation.lock(‚landscape‘); |
| allow-pointer-lock | Erlaubt dem eingebetteten Dokument, den Mauszeiger zu sperren und die Pointer Lock API zu verwenden. | canvas.addEventListener("click", async () => { await canvas.requestPointerLock(); }); |
| allow-popups | Erlaubt dem eingebetteten Dokument, Pop-up-Fenster oder -Tabs zu öffnen. | window.open(„https://example.com“); |
| allow-popups-to-escape-sandbox | Erlaubt Pop-up-Fenstern, die vom eingebetteten Dokument geöffnet wurden, den Sandbox-Modus zu verlassen. | Angenommen, Sie haben ein iFrame mit sandbox="allow-popups", aber ohne das allow-popups-to-escape-sandbox Attribut. Wenn dann das iFrame ein Popup mit window.open() öffnet, gelten dieselben Sandbox-Einschränkungen auch für dieses Popup-Fenster. Mit dem allow-popups-to-escape-sandbox Attribut wird das Popup-Fenster dagegen nicht von den Sandbox-Einschränkungen des iFrames beeinflusst. |
| allow-presentation | Erlaubt eingebetteten Dokumenten, die Presentation API zu verwenden. | var request = new PresentationRequest([„https://example.com/presentation.html“]); |
| allow-same-origin | Erlaubt dem eingebetteten Dokument, die gleiche Herkunft wie das einbettende Dokument zu behandeln. Ohne dieses Schlüsselwort sind sie von fremden Ursprungs und werden nicht erlaubt. | var xhr = new XMLHttpRequest(); xhr.open(„GET“, „/api/data“, true); xhr.send(); |
| allow-scripts | Erlaubt dem eingebetteten Dokument, Skripte auszuführen (aber nicht automatische Ausführungen von Pop-ups). | document.getElementById(„foo“).innerHTML = „bar“; |
| allow-storage-access-by-user-activation | Erlaubt auf den lokalen Speicher zuzugreifen, wenn es durch Benutzeraktivierung gestartet wird. | localStorage.setItem(„key“, „value“); |
| allow-top-navigation | Erlaubt dem eingebetteten Dokument, das einbettende Dokument zu navigieren. | top.location.href = „https://example.com“; |
| allow-top-navigation-by-user-activation | Erlaubt dem eingebetteten Dokument, das einbettende Dokument zu navigieren, aber nur wenn dies durch Benutzeraktivierung geschieht. | <a href=“https://example.com“ target=“_top“>Besuchen Sie example.com</a> |
Ohne spezifische Direktiven blockiert ein gesandboxter Iframe alle diese Aktionen.
Beispiel für die Verwendung des sandbox Attributs mit mehreren Direktiven:
<iframe sandbox="allow-scripts allow-forms" src="https://example.com"></iframe>
In diesem Beispiel können innerhalb des Iframes Skripte ausgeführt und Formulare übermittelt werden. Alle anderen Aktionen, die durch die obigen Direktiven gesteuert werden, sind jedoch blockiert.
Sandboxing und Einbinden von Dirttanbieter JavaScript
Um Drittanbieter-JavaScript in einem Sandbox-Iframe zu nutzen, können Sie einen Ansatz wie den folgenden verwenden:
<iframe sandbox="allow-scripts" src="https://your-website.com/iframe-content.html"></iframe>
In diesem Beispiel wird ein Iframe erstellt, der das Ausführen von Skripten erlaubt (allow-scripts). Der Inhalt des Iframes wird von iframe-content.html geladen, das auf Ihrer eigenen Website gehostet ist.
Die iframe-content.html Datei könnte so aussehen:
<!DOCTYPE html>
<html>
<body>
<script src="https://third-party.com/some-script.js"></script>
</body>
</html>
In diesem Fall wird das Drittanbieter-Skript innerhalb des Iframes geladen und ausgeführt. Es ist jedoch auf das Iframe beschränkt und kann nicht auf Elemente oder Daten außerhalb des Iframes zugreifen, es sei denn, Sie erweitern die Sandbox-Erlaubnisse mit zusätzlichen Direktiven.