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ć ze schowka systemowego i wklejać, w szczególności text/plain, text/html i image/png. Przeglądarka zwykle oczyszcza je, żeby na przykład usunąć osadzone elementy script lub linki javascript: z ciągu HTML albo zapobiec atakom za pomocą bomby dekompresyjnej PNG.

W niektórych przypadkach warto jednak udostępniać nieprzeczyszczoną zawartość w schowku:

• Sytuacje, w których aplikacja zajmuje się procesem oczyszczania.
• Sytuacje, w których konieczne jest, aby skopiowane dane były identyczne z wklejonymi danymi.

W takich przypadkach interfejs Async Clipboard API obsługuje teraz niestandardowe formaty internetowe, co pozwala programistom zapisywać dowolne dane w schowku.

Obsługiwane przeglądarki

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 niestandardowych formatów internetowych w schowku

Zapisywanie w schowku niestandardowych formatów internetowych działa prawie tak samo jak wpisywanie zdrowych formatów, z wyjątkiem wymogu dodania ciągu "web " (łącznie ze spacją 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);
}

Odczytuję niestandardowe formaty internetowe ze schowka

Podobnie jak w przypadku pisania, odczytywanie niestandardowych formatów internetowych ze schowka nie różni się niczym od czytania 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);
}

Współdziałanie z aplikacjami na danej platformie

Niestandardowe formaty internetowe, takie jak web image/jpeg, nie są zrozumiałe dla typowych aplikacji na danej platformie (ponieważ spodziewają się wartości image/jpeg). Z czasem prognozowane aplikacje będą dodawać obsługę takich formatów, jak dopuszcza możliwość ich akceptacji, jeśli ich deweloperzy uznają, że formaty niestandardowe są odpowiednie dla użytkowników. W schowku systemu operacyjnego różne formaty są dostępne w wielu formatach gotowych do użycia, co widać na zrzucie ekranu poniżej.

Pokaz

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

Podziękowania

Ten artykuł napisali Joe Medley i François Beaufort. Baner powitalny autorstwa Neon Tommy używany na licencji CC BY-SA 2.0.