Niestandardowe formaty internetowe dla interfejsu Async Clipboard API

Thomas Steiner

Do tej pory interfejs Async Clipboard API obsługiwał ograniczony zestaw typów MIME, które można było kopiować i wklejać ze schowka systemowego. Były to: text/plain, text/html i image/png. Przeglądarka zwykle oczyszcza te dane, aby na przykład usunąć z ciągu HTML elementów script lub linków javascript: albo zapobiec atakom bomby dekompresyjnej na pliki PNG.

W niektórych przypadkach może być jednak konieczne, aby w schowku znajdowały się nieoczyszczone treści:

• sytuacje, w których aplikacja sama zajmuje się czyszczeniem;
• Sytuacje, w których ważne jest, aby skopiowane dane były identyczne z wklejonymi.

W takich przypadkach interfejs Async Clipboard API obsługuje teraz formaty internetowe, które umożliwiają programistom zapisywanie dowolnych danych na schowku.

Obsługa przeglądarek

Interfejs Async Clipboard API z obsługą obrazów jest obsługiwany od wersji Chromium 76. Od wersji 104 interfejs Async Clipboard API obsługuje niestandardowe formaty internetowe na komputerach i w Chromium na urządzeniach mobilnych.

Zapisywanie formatów niestandardowych na potrzeby internetu na schowku

Zapisywanie niestandardowych formatów internetowych w schowku jest prawie identyczne z zapisywaniem sformatowanych formatów, z tą różnicą, że przed typem MIME bloba należy dołączyć ciąg znaków "web " (w tym spacje na końcu).

// 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);
}

odczytywanie formatów niestandardowych z internetu ze schowka.

Podobnie jak w przypadku zapisywania, odczytywanie niestandardowych formatów internetowych ze schowka jest prawie identyczne jak odczytywanie sformatowanych formatów. Jedyną różnicą jest to, że aplikacja musi teraz szukać elementów schowka, których typ zaczyna się od "web ".

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);
}

Interoperacyjność z aplikacjami na konkretne platformy

Formaty internetowe, takie jak web image/jpeg, nie są obsługiwane przez typowe aplikacje na konkretne platformy (ponieważ oczekują one formatu image/jpeg). Z czasem aplikacje, których to dotyczy, powinny dodać obsługę takich formatów jako opcjonalną, jeśli ich deweloperzy uznają, że obsługa formatów internetowych jest istotna dla użytkowników. W schowku systemu operacyjnego różne formaty są dostępne w wielu formatach, jak widać na zrzucie ekranu z macOS poniżej.

Prezentacja

Możesz wypróbować wersję demonstracyjną i wyświetlić kod źródłowy, aby zobaczyć, jak to działa.

Podziękowania

Ten dokument został sprawdzony przez Joe Medley i François Beaufort.