Format kustom web untuk Async Clipboard API

Thomas Steiner

Hingga saat ini, Async Clipboard API mendukung kumpulan jenis MIME terbatas yang akan disalin ke dan ditempel dari papan klip sistem, khususnya: text/plain, text/html, dan image/png. Browser biasanya membersihkannya untuk, misalnya, menghapus elemen script tersemat atau link javascript: dari string HTML, atau untuk mencegah serangan PNG decompression bomb.

Namun, dalam beberapa kasus, mendukung konten yang bermasalah di papan klip dapat diinginkan:

• Situasi saat aplikasi menangani sanitasi itu sendiri.
• Situasi ketika data yang disalin harus identik dengan data yang ditempelkan.

Untuk kasus tersebut, Async Clipboard API kini mendukung format kustom web yang memungkinkan developer menulis data arbitrer ke papan klip.

Dukungan browser

Asynchronous Clipboard API sendiri dengan dukungan gambar didukung mulai Chromium 76. Kustom web untuk Asynchronous Clipboard API didukung di versi desktop dan Chromium seluler sejak versi 104.

Menulis format kustom web ke papan klip

Menulis format khusus web ke papan klip hampir sama dengan menulis format yang bersih, kecuali untuk persyaratan untuk menambahkan string "web " (termasuk spasi di belakangnya) ke jenis MIME 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);
}

Membaca format kustom web dari papan klip

Seperti halnya menulis, membaca format kustom web dari papan klip hampir sama dengan membaca format yang dibersihkan. Satu-satunya perbedaan adalah aplikasi kini perlu mencari item papan klip yang jenisnya diawali dengan "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);
}

Interoperabilitas dengan aplikasi khusus platform

Format kustom web seperti web image/jpeg bukanlah sesuatu yang dipahami oleh aplikasi khusus platform standar (karena aplikasi tersebut akan mengharapkan image/jpeg). Seiring waktu, aplikasi yang dimaksud diharapkan untuk menambahkan dukungan untuk format tersebut sebagai keikutsertaan jika developernya menganggap dukungan untuk format kustom web relevan bagi penggunanya. Pada {i>clipboard<i} sistem operasi, berbagai berbagai format tersedia dalam berbagai format yang siap untuk digunakan, seperti yang dapat dilihat dalam screenshot untuk macOS di bawah ini.

Demo

Anda dapat mencoba demo di bawah ini dan lihat kode sumber untuk mengetahui cara kerja demo.

Ucapan terima kasih

Artikel ini ditinjau oleh Joe Medley dan François Beaufort. Banner besar oleh Neon Tommy, digunakan di bawah Lisensi CC BY-SA 2.0.