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, unbereinigte Inhalte in der Zwischenablage zu unterstützen:

• Situationen, in denen die Anwendung mit der Bereinigung selbst umgeht.
• 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 Computern und Mobilgeräten von Chromium unterstützt.

Benutzerdefinierte Webformate in die Zwischenablage schreiben

Das Schreiben von benutzerdefinierten Webformaten in die Zwischenablage ist fast identisch mit dem Schreiben bereinigter Formate. Der einzige Unterschied besteht darin, dass dem MIME-Typ des Blobs der String "web " (einschließlich des nachgestellten 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

Webbenutzerdefinierte Formate wie web image/jpeg sind von typischen plattformspezifischen Anwendungen nicht verstanden, da sie image/jpeg erwarten. Es wird erwartet, dass besorgte Apps im Laufe der Zeit solche Formate als Opt-in unterstützen, wenn ihre 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.