Niestandardowe formaty internetowe dla interfejsu Async Clipboard API

Thomas Steiner

Do tej pory interfejs Async Clipboard API obsługiwał ograniczony zestaw typów MIME do kopiowania i wklejania ze schowka systemowego, w szczególności: 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 dotyczy samego dezynfekcji.
• 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 niestandardowe formaty internetowe, które pozwalają programistom zapisywać w schowku dowolne dane.

Obsługa przeglądarek

Interfejs Async Clipboard API z obsługą obrazów jest obsługiwany od wersji Chromium 76. Niestandardowe formaty internetowe interfejsu Async Clipboard API są obsługiwane w Chromium na komputerach i urządzeniach mobilnych od wersji 104.

Zapisywanie formatów niestandardowych na potrzeby internetu na schowku

Zapisywanie niestandardowych formatów internetowych w schowku przebiega prawie tak samo jak zapisywanie sprawdzonych formatów. Jedynym wyjątkiem jest wymóg dodawania ciągu "web " (w tym spacji na końcu) do typu MIME obiektu blob.

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

Czytanie niestandardowych formatów internetowych ze schowka

Podobnie jak w przypadku pisania, odczytywanie ze schowka internetowych formatów niestandardowych jest niemal identyczne jak odczytywanie zatwierdzonych 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 poniżej (system macOS).

Prezentacja

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

Podziękowania

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