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.