Async Clipboard API

Was ist eine Async Clipboard API?

Die Async Clipboard-API ist ein moderner Webstandard, der Entwicklern ermöglicht, sicher und asynchron auf die Zwischenablage (Clipboard) zuzugreifen. Sie wird von gängigen Browsern wie Chrome, Firefox, Edge und Safari unterstützt und ersetzt ältere Methoden wie document.execCommand().

Eine asynchrone API führt Operationen im Hintergrund aus, ohne den Hauptprozess der Anwendung zu blockieren.

Die Async Clipboard API verwendet hierfür Promise-basierte Methoden wie navigator.clipboard.readText() und navigator.clipboard.writeText(), um Daten sicher und effizient zwischen Browser und Anwendung auszutauschen.

Inhaltsverzeichnis

Clipboard-Event-API Dokumentation der Async Clipboard API im W3C GitHub

Wozu brauche ich die Async Clipboard API?

Die Clipboard API ist ein mächtiges Entwickler-Werkzeug, mit dem Du coole Funktionen zur Interaktion mit Webseiten und einer Progressive Web App nutzen kannst.

Damit kannst Du als Developer auch asynchron aus der Systemzwischenablage lesen und in diese schreiben, dann nutzt Du diese Browser-API als Async Clipboard API, also als asynchrone API für Interaktionen mit der Zwischenablage zwischen Deiner App und dem Browser eines Anwenders.

Neue Clipboard Commands für den Mozilla Browser

Diese neue Web-API löst den Zugriff auf die Zwischenablage mit dem Befehl document.execCommand() ab.

Hinweis: Diese API ist in Web Workern nicht verfügbar, dass heisst die API ist nicht über WorkerNavigator zugänglich.

Wie funktioniert eine asynchrone API?

Eine asynchrone API nutzt zum Datenaustausch eine asynchrone Kommunikation zum Datenaustausch.

So funktioniert der Zugriff auf das Browser-Clipboard

Um in einer Web-App auf die Browser-Zwischenablage zuzugreifen, müssen bestimmte Sicherheitsanforderungen erfüllt sein: Der Zugriff funktioniert nur über HTTPS und erfordert eine direkte Nutzerinteraktion, z. B. durch einen Button-Klick.

Erst dann kann navigator.clipboard.readText() oder navigator.clipboard.writeText() genutzt werden.

Diese Methode ist deutlich einfacher anstatt durch Instanziierung ein Clipboard-Objekt zu erstellen.

navigator.clipboard.readText().then( clipText => document.querySelector(".editor").innerText += clipText);

Unterstützung in Browsern & Sicherheitsaspekte

Unterstützte Browser:
Die Async Clipboard API ist ein offener Webstandard und wird von folgenden Browsern unterstützt:

Google Chrome (ab Version 66)
Mozilla Firefox (ab Version 63)
Microsoft Edge (ab Version 79)
Apple Safari (eingeschränkt, ab Version 13.1)

Sicherheitsaspekte:

Nur HTTPS: Der Zugriff auf navigator.clipboard ist nur über eine sichere Verbindung (HTTPS) erlaubt.
Benutzerinteraktion erforderlich: Der Zugriff auf die Zwischenablage kann nicht still und automatisch erfolgen – eine Benutzeraktion wie ein Button-Klick ist notwendig.
Berechtigungsanfrage (Permissions API): Manche Browser verlangen eine Berechtigungsanfrage, bevor die API verwendet werden kann.

Clipboard API and events
# clipboard-event-interfaces

Clipboard API and events
# clipboarditem

So funktioniert der sichere Zugriff auf die Browser-Zwischenablage

Der folgende Code liest den Inhalt der Zwischenablage und fügt ihn an ein Element mit der Klasse .editor an. Damit die Methode funktioniert, muss der Nutzer zuvor aktiv eine Interaktion auslösen (z. B. durch einen Klick oder eine Tastenkombination).

navigator.clipboard.readText().then(clipText => ).catch(err => );

Da readText() (und auch read()) einen leeren String zurückgibt, wenn die Zwischenablage keinen Text enthält, ist dieser Code sicher.

Clipboard Event API Dokumentation

Die aktuelle Dokumentation zur Clipboard Event API findest Du im W3C GitHub:

Clipboard API and events
# clipboard-interface

Schreibzugriff auf die Zwischenablage

Neben readText() für das Lesen kann die API auch dazu verwendet werden, Daten in die Zwischenablage zu schreiben:

navigator.clipboard.writeText(„Rock the Prototype – Async Clipboard API").then(() => ).catch(err => );

🚀 Tipp: writeText() funktioniert nur innerhalb eines sicheren Kontexts (z. B. HTTPS, Benutzerinteraktion erforderlich).

Clipboard API für Bilder & Dateien nutzen

Die Clipboard API kann auch nicht-textuelle Inhalte wie Bilder oder Dateien verwalten. Hier ein Beispiel für das Lesen eines Bildes aus der Zwischenablage:

navigator.clipboard.read().then(items => );

Dies kann für Drag & Drop-Funktionen oder Screenshots direkt in einer Web-App verwendet werden.

Unterschiede zwischen Async Clipboard API und Legacy-Methoden

Feature	`document.execCommand()` (alt)	`navigator.clipboard` (neu)
Unterstützung	Veraltet, teilweise blockiert	Moderner Webstandard
Asynchronität	Nein (`execCommand` ist synchron)	Ja (`Promise`-basiert)
HTTPS erforderlich	Nein	Ja
Benutzerinteraktion	Ja	Ja
Zugriff auf Bilder/Dateien	Nein	Ja

📌 Best Practices für die Nutzung der Clipboard API

Immer Fehler abfangen: Clipboard-Zugriff kann durch Sicherheitsrichtlinien oder fehlende Berechtigungen blockiert sein.
Nur auf HTTPS-Seiten verwenden: Lokal (file://) oder in HTTP-Umgebungen funktioniert es nicht.
Erfordert Nutzerinteraktion: Am besten in Click-Events von Buttons oder Shortcuts einbauen.
Berechtigungen prüfen: Manche Browser verlangen explizite Bestätigungen für navigator.clipboard.read() oder navigator.clipboard.write().

Aus datenschutzrechtlichen Gründen benötigt YouTube Ihre Einwilligung um geladen zu werden. Mehr Informationen finden Sie unter Datenschutzerklärung.

Rock the Prototype Podcast

Der Rock the Prototype Podcast und der Rock the Prototype YouTube-Kanal sind die perfekte Anlaufstelle für alle, die tiefer in die Welt der Softwareentwicklung, des Prototypings und IT-Technologie eintauchen wollen.

🎧 Listen on Spotify: 👉 Spotify Podcast: spoti.fi/3NJwdLJ

🍎 Enjoy on Apple Podcasts: 👉 Apple Podcasts: apple.co/3CpdfTs

Im Podcast erwarten dich spannende Diskussionen und wertvolle Insights zu aktuellen Trends, Tools und Best Practices – ideal, um unterwegs am Ball zu bleiben und frische Perspektiven für eigene Projekte zu gewinnen. Auf dem YouTube-Kanal findest du praxisnahe Tutorials und Schritt-für-Schritt-Anleitungen, die technische Konzepte anschaulich erklären und dir helfen, direkt in die Umsetzung zu gehen.

Rock the Prototype YouTube Channel

🚀 Rock the Prototype ist 👉 Dein Format rund um spannende Themen wie Softwareentwicklung, Prototyping, Softwarearchitektur, Cloud, DevOps & vieles mehr.

📺 👋 Rock the Prototype YouTube Channel 👈 👀

✅ Softwareentwicklung & Prototyping

✅ Programmieren lernen

✅ Software Architektur verstehen

✅ Agile Teamwork

✅ Prototypen gemeinsam erproben

THINK PROTOTYPING – PROTOTYPE DESIGN – PROGRAMMIEREN & DURCHSTARTEN – JETZT MITMACHEN!

Warum es sich lohnt, regelmäßig vorbeizuschauen?

Beide Formate ergänzen sich perfekt: Im Podcast kannst du ganz entspannt Neues lernen und inspirierende Denkanstöße bekommen, während du auf YouTube das Gelernte direkt in Aktion siehst und wertvolle Tipps zur praktischen Anwendung erhältst.

Egal, ob du gerade erst mit der Softwareentwicklung anfängst, Dich für Prototyping, UX Design oder IT Security begeisterst. Wir bieten Dir neue Technologie Trends die wirklich relevant sind – und mit dem Rock the Prototype Format findest du immer relevante Inhalte, um dein Wissen zu erweitern und deine Skills auf das nächste Level zu heben!