Web-Clipboard und verschiedene Arten der Datenspeicherung

Web-Clipboard und Arten der Datenspeicherung

• Verwendung der Web-Clipboard-API

  • Wenn man auf einer Website kopierte Inhalte in Google Docs einfügt, bleibt die Formatierung erhalten, während beim Einfügen in VS Code nur der Text übernommen wird
  • Das Clipboard speichert Informationen in mehreren Repräsentationen, die mit MIME-Typen verknüpft sind
  • Die W3C-Clipboard-Spezifikation verlangt Unterstützung für drei Datentypen: text/plain, text/html, image/png

• Verwendung der asynchronen Clipboard-API

  • So liest man eine bestimmte Repräsentation:

    const items = await navigator.clipboard.read();
    for (const item of items) {
      if (item.types.includes("text/html")) {
        const blob = await item.getType("text/html");
        const html = await blob.text();
        // HTML verarbeiten...
      }
    }
    

  • So schreibt man mehrere Repräsentationen in das Clipboard:

    const textBlob = new Blob(["Hello, world"], { type: "text/plain" });
    const htmlBlob = new Blob(["Hello, <em>world<em>"], { type: "text/html" });
    const clipboardItem = new ClipboardItem({ [textBlob.type]: textBlob, [htmlBlob.type]: htmlBlob });
    await navigator.clipboard.write([clipboardItem]);
    

• Andere Datentypen

  • Beim Versuch, JSON-Daten in das Clipboard zu schreiben, tritt ein Fehler auf:

    const json = JSON.stringify({ message: "Hello" });
    const blob = new Blob([json], { type: "application/json" });
    const clipboardItem = new ClipboardItem({ [blob.type]: blob });
    await navigator.clipboard.write([clipboardItem]);
    

  • Der Typ application/json wird nicht unterstützt

• Eigenschaft isTrusted

  • Die Eigenschaft isTrusted zeigt an, ob ein Event vom User Agent dispatcht wurde
  • Nur bei vertrauenswürdigen Events können Daten in das Clipboard geschrieben werden

• Clipboard-Event-API

  • In den Events copy, cut und paste lassen sich Daten über die Eigenschaft clipboardData lesen und schreiben
  • So schreibt man JSON-Daten in das Clipboard:

    document.addEventListener("copy", (e) => {
      e.preventDefault();
      const json = JSON.stringify({ message: "Hello" });
      e.clipboardData.setData("application/json", json);
    });
    

• Geschichte von clipboardData

  • Die asynchrone Clipboard-API wurde 2017 hinzugefügt, clipboardData ist jedoch deutlich älter
  • clipboardData wurde erstmals 1997 in Internet Explorer 4 eingeführt

• Nicht vertrauenswürdige Skripte

  • Nicht vertrauenswürdige Skripte können nur eingeschränkte Datentypen in das Clipboard schreiben
  • Der Versuch, bei einem nicht vertrauenswürdigen Event Daten in das Clipboard zu schreiben, schlägt fehl

• Eine Copy-Schaltfläche erstellen

  • Webanwendungen wie Google Docs verwenden document.execCommand("copy"), um ein vertrauenswürdiges Copy-Event auszulösen
  • Mit dieser Methode lassen sich auch bei Click-Events beliebige Datentypen in das Clipboard schreiben

• Eine Paste-Schaltfläche erstellen

  • execCommand("paste") verhält sich je nach Browser und Betriebssystem unterschiedlich
  • Safari verlangt eine Bestätigung durch den Nutzer, während Chrome und Edge dies nur unter Windows unterstützen

• Copy & Paste in Figma

  • Figma verwendet eine HTML-Repräsentation, um Daten im Clipboard zu speichern
  • In die HTML-Repräsentation werden base64-kodierte Daten eingebettet und so im Clipboard gespeichert

• Web Custom Formats (Pickling)

  • Seit 2022 in Chromium-basierten Browsern unterstützt
  • Ermöglicht Webanwendungen, benutzerdefinierte Datentypen über die asynchrone Clipboard-API zu schreiben
  • Beispiel:

    const json = JSON.stringify({ message: "Hello, world" });
    const jsonBlob = new Blob([json], { type: "application/json" });
    const clipboardItem = new ClipboardItem({ [`web ${jsonBlob.type}`]: jsonBlob });
    navigator.clipboard.write([clipboardItem]);
    

Zusammenfassung von GN⁺

• Dieser Artikel untersucht die Web-Clipboard-API und Arten der Datenspeicherung
• Er erklärt die Unterschiede zwischen der asynchronen Clipboard-API und der Clipboard-Event-API
• Er analysiert die Implementierung von Copy/Paste in Google Docs und Figma
• Der Vorschlag für Web Custom Formats (Pickling) wird vorgestellt
• Nützliche Informationen für Webentwickler und hilfreich zum Verständnis der Grenzen der Clipboard-API