ก่อนหน้านี้ Async Clipboard API รองรับชุดประเภท MIME ที่จำกัดเพื่อคัดลอกและวางจากคลิปบอร์ดของระบบ โดยเฉพาะ text/plain
, text/html
และ image/png
โดยทั่วไปเบราว์เซอร์จะทำความสะอาดข้อมูลดังกล่าว เช่น นำองค์ประกอบ script
ที่ฝังอยู่หรือลิงก์ javascript:
ออกจากสตริง HTML หรือเพื่อป้องกันการโจมตีด้วยระเบิดการถอดรหัสของ PNG
แต่ในบางกรณี เราขอแนะนำให้คุณรองรับเนื้อหาที่ไม่ผ่านการตรวจสอบบนคลิปบอร์ดดังนี้
- สถานการณ์ที่แอปพลิเคชันเกี่ยวข้องกับการทำความสะอาด
- สถานการณ์ที่มีความสำคัญต่อข้อมูลที่คัดลอกจะต้องเหมือนกับข้อมูลที่วาง
สำหรับกรณีเช่นนี้ ตอนนี้ Async Clipboard API รองรับรูปแบบที่กำหนดเองของเว็บ ซึ่งช่วยให้นักพัฒนาซอฟต์แวร์เขียนข้อมูลลงในคลิปบอร์ดได้ตามต้องการ
การสนับสนุนเบราว์เซอร์
ระบบรองรับ Async Clipboard API เวอร์ชันที่รองรับรูปภาพตั้งแต่วันที่ Chromium 76 เป็นต้นไป รูปแบบเว็บที่กำหนดเองสำหรับ API คลิปบอร์ด Async ใช้งานได้บนเดสก์ท็อปและ Chromium บนอุปกรณ์เคลื่อนที่ตั้งแต่เวอร์ชัน 104
กำลังเขียนรูปแบบที่กำหนดเองของเว็บไปยังคลิปบอร์ด
การเขียนรูปแบบที่กำหนดเองของเว็บไปยังคลิปบอร์ดแทบจะเหมือนกับการเขียนรูปแบบที่ปลอดภัย ยกเว้นข้อกำหนดในการเพิ่มสตริง "web "
(รวมถึงการเว้นวรรคต่อท้าย) ลงในประเภท 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);
}
กำลังอ่านรูปแบบที่กำหนดเองของเว็บจากคลิปบอร์ด
การอ่านรูปแบบที่กำหนดเองของเว็บจากคลิปบอร์ดนั้นเหมือนกับการเขียนทุกประการกับการอ่านรูปแบบที่มีการเข้ารหัสโดยสุขอนามัย ความแตกต่างเพียงอย่างเดียวคือตอนนี้แอปจะต้องมองหารายการในคลิปบอร์ดที่มีประเภทขึ้นต้นด้วย "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);
}
ความสามารถในการทำงานร่วมกับแอปเฉพาะแพลตฟอร์ม
รูปแบบที่กำหนดเองสำหรับเว็บ เช่น web image/jpeg
ไม่ใช่สิ่งที่แอปพลิเคชันเฉพาะแพลตฟอร์มทั่วไปเข้าใจ (เพราะคาดว่าจะใช้ image/jpeg
) เมื่อเวลาผ่านไป แอปที่เป็นกังวลควรจะเพิ่มการรองรับรูปแบบดังกล่าว เช่น การเลือกใช้ หากนักพัฒนาซอฟต์แวร์เห็นว่าการรองรับรูปแบบที่กำหนดเองของเว็บจะมีความเกี่ยวข้องกับผู้ใช้ ในคลิปบอร์ดของระบบปฏิบัติการ จะมีรูปแบบที่หลากหลายอยู่ในหลายรูปแบบซึ่งพร้อมใช้งาน ดังที่แสดงในภาพหน้าจอของ macOS ด้านล่าง
ข้อมูลประชากร
คุณสามารถทดลองใช้การสาธิตด้านล่างและดูซอร์สโค้ดเพื่อดูวิธีการทำงานของการสาธิต
ข้อความแสดงการยอมรับ
บทความนี้ได้รับการตรวจสอบโดย Joe Medley และ François Beaufort รูปภาพหลักของ Neon Tommy ซึ่งใช้ภายใต้ใบอนุญาต CC BY-SA 2.0