รูปแบบที่กำหนดเองของเว็บสำหรับ Async Clipboard API

Thomas Steiner

ก่อนหน้านี้ 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