פורמטים מותאמים אישית לאינטרנט עבור 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 בנפרד, עם תמיכה בתמונות. החל מגרסה 104, הפורמטים המותאמים אישית באינטרנט ל-Async Clipboard API נתמכים ב-Chromium במחשבים ובניידים.

כתיבת פורמטים מותאמים אישית באינטרנט ללוח

כתיבת פורמטים מותאמים אישית באינטרנט ללוח כמעט זהה לכתיבה של פורמטים שעברו ניקוי,, פרט לדרישה להוסיף את המחרוזת "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. תמונה ראשית (Hero) מאת Neon Tommy, בשימוש במסגרת רישיון CC BY-SA 2.0.