Benutzerdefinierte Webformate für die Async Clipboard API

Thomas Steiner

Bisher unterstützte die Async Clipboard API nur eine begrenzte Anzahl von MIME-Typen, die in die Systemzwischenablage kopiert und daraus eingefügt werden konnten: text/plain, text/html und image/png. Der Browser bereinigt diese Daten in der Regel, um beispielsweise eingebettete script-Elemente oder javascript:-Links aus einem HTML-String zu entfernen oder PNG-Dekomprimierungsbomben-Angriffe zu verhindern.

In einigen Fällen kann es jedoch wünschenswert sein, nicht gefilterte Inhalte in der Zwischenablage zu unterstützen:

• Situationen, in denen die Anwendung die Bereinigung selbst übernimmt.
• Situationen, in denen es wichtig ist, dass die kopierten Daten mit den eingefügten Daten identisch sind.

Für solche Fälle unterstützt die Async Clipboard API jetzt benutzerdefinierte Webformate, mit denen Entwickler beliebige Daten in die Zwischenablage schreiben können.

Unterstützte Browser

Die Async Clipboard API mit Bildunterstützung wird ab Chromium 76 unterstützt. Benutzerdefinierte Webformate für die Async Clipboard API werden ab Version 104 auf dem Computer und in der mobilen Chromium-Version unterstützt.

Benutzerdefinierte Webformate in die Zwischenablage schreiben

Das Schreiben benutzerdefinierter Webformate in die Zwischenablage ist fast identisch mit dem Schreiben von bereinigten Formaten, mit der Ausnahme, dass dem MIME-Typ des Blobs der String "web " (einschließlich des abschließenden Leerzeichens) vorangestellt werden muss.

// Fetch remote JPEG and GIF images and obtain their blob representations.
const [jpegBlob, gifBlob] = await Promise.all([
  fetch('image.jpg').then((response) => response.blob()),
  fetch('image.gif').then((response) => response.blob()),
]);

try {
  // Write the image data to the clipboard, prepending the blobs' actual
  // types (`"image/jpeg"` and "image/gif") with the string `"web "`, so
  // they become `"web image/jpeg"` and `"web image/gif"` respectively.
  // The code elegantly makes use of computed property names:
  // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names.
  const clipboardItem = new ClipboardItem({
    [`web ${jpegBlob.type}`]: jpegBlob,
    [`web ${gifBlob.type}`]: gifBlob,
  });
  await navigator.clipboard.write([clipboardItem]);
} catch (err) {
  console.error(err.name, err.message);
}

Benutzerdefinierte Webformate aus der Zwischenablage lesen

Wie beim Schreiben ist das Lesen benutzerdefinierter Webformate aus der Zwischenablage fast identisch mit dem Lesen von bereinigten Formaten. Der einzige Unterschied besteht darin, dass die App jetzt nach Zwischenablageelementen suchen muss, deren Typ mit "web " beginnt.

try {
  // Iterate over all clipboard items.
  const clipboardItems = await navigator.clipboard.read();
  for (const clipboardItem of clipboardItems) {
    for (const type of clipboardItem.types) {
      // Discard any types that are not web custom formats.
      if (!type.startsWith('web ')) {
        continue;
      }
      const blob = await clipboardItem.getType(type);
      // Sanitize the blob if you need to, then process it in your app.
    }
  }
} catch (err) {
  console.error(err.name, err.message);
}

Interoperabilität mit plattformspezifischen Apps

Benutzerdefinierte Webformate wie web image/jpeg werden von typischen plattformspezifischen Anwendungen nicht unterstützt, da sie image/jpeg erwarten. Im Laufe der Zeit wird die Unterstützung solcher Formate in den betroffenen Apps voraussichtlich als Option hinzugefügt, wenn die Entwickler der Meinung sind, dass die Unterstützung benutzerdefinierter Webformate für ihre Nutzer relevant ist. In der Zwischenablage des Betriebssystems sind die verschiedenen Formate in mehreren Formaten verfügbar, wie im Screenshot für macOS unten zu sehen.

Demo

Sie können die Demo ausprobieren und sich den Quellcode ansehen, um zu sehen, wie sie funktioniert.

Danksagungen

Dieses Dokument wurde von Joe Medley und François Beaufort geprüft.