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

Thomas Steiner

ก่อนหน้านี้ Async Clipboard API รองรับ ประเภท MIME ที่จะคัดลอกและวางจากคลิปบอร์ดของระบบ โดยเฉพาะ: text/plain text/html และ image/png โดยทั่วไปเบราว์เซอร์จะล้างโค้ดนี้เพื่อลบโค้ดที่ฝังไว้ออกไป เป็นต้น องค์ประกอบ script หรือลิงก์ javascript: จากสตริง HTML หรือเพื่อป้องกัน PNG เหตุโจมตีด้วยระเบิดลดการบีบอัด

แต่ในบางกรณี เราขอแนะนำให้รองรับเนื้อหาที่ไม่สะอาดในคลิปบอร์ด ดังนี้

• สถานการณ์ที่แอปพลิเคชันต้องจัดการกับการทำความสะอาดข้อมูลเอง
• กรณีที่ข้อมูลที่คุณคัดลอกต้องตรงกับข้อมูลที่วาง

สำหรับกรณีดังกล่าว ขณะนี้ Async Clipboard API รองรับรูปแบบที่กำหนดเองบนเว็บซึ่งช่วยให้นักพัฒนาซอฟต์แวร์เขียนได้ ข้อมูลลงในคลิปบอร์ดได้ตามต้องการ

การสนับสนุนเบราว์เซอร์

Chromium 76 รองรับ Async Clipboard API ที่รองรับรูปภาพ เว็บที่กำหนดเอง รูปแบบสำหรับ Async Clipboard API ได้รับการสนับสนุนบนเดสก์ท็อปและ 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