अब तक, Async Clipboard API में, सिस्टम के क्लिपबोर्ड पर कॉपी करके चिपकाने के लिए, MIME टाइप का सीमित सेट काम करता था, खास तौर पर: text/plain,
text/html, और image/png. ब्राउज़र आम तौर पर, एम्बेड किए गए script एलिमेंट या एचटीएमएल स्ट्रिंग से javascript: लिंक को हटाने के लिए, उन्हें सैनिटाइज़ करता है. इसके अलावा, PNG फ़ॉर्मैट वाले डिकंप्रेशन बम हमलों को रोकने के लिए भी ब्राउज़र इस पर सैनिटाइज़ करता है.
हालांकि, कुछ मामलों में क्लिपबोर्ड पर सैनिटाइज़ नहीं किए गए कॉन्टेंट को बढ़ावा दिया जा सकता है:
- ऐसे मामले जहां ऐप्लिकेशन, सैनिटाइज़ेशन से जुड़ा काम करता है.
- ऐसे मामले जहां कॉपी किए गए डेटा और चिपकाए गए डेटा का एक जैसा होना ज़रूरी है.
ऐसे मामलों में, Async Clipboard API अब वेब से जुड़े कस्टम फ़ॉर्मैट के साथ काम करता है. इनकी मदद से, डेवलपर क्लिपबोर्ड पर आर्बिट्ररी डेटा लिख सकते हैं.
ब्राउज़र समर्थन
इमेज से जुड़ी सहायता के साथ, Async Clipboard API (एपीआई) हर एसई, Chromium 76 में काम करता है. Async Clipboard API के लिए वेब कस्टम फ़ॉर्मैट, डेस्कटॉप और मोबाइल Chromium पर 104 वर्शन से काम करते हैं.
क्लिपबोर्ड पर वेब के लिए पसंद के मुताबिक फ़ॉर्मैट लिखे जा रहे हैं
वेब के लिए कस्टम फ़ॉर्मैट को क्लिपबोर्ड पर लिखने का तरीका, काफ़ी हद तक सैनिटाइज़ किए गए फ़ॉर्मैट लिखने जैसा ही है. हालांकि, blob के MIME टाइप में "web " स्ट्रिंग (इसमें आखिर में दी गई जगह भी शामिल है) को पहले जोड़ना ज़रूरी होता है.
// 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 के स्क्रीनशॉट में देखा जा सकता है.
डेमो
नीचे दिया गया डेमो आज़माएं और सोर्स कोड देखें और जानें कि डेमो कैसे काम करता है.
स्वीकार हैं
इस लेख की समीक्षा जो मेडली और फ़्रैंसुआ ब्यूफ़ोर्ट ने की है. नियॉन टॉमी की हीरो इमेज, जिसका इस्तेमाल CC BY-SA 2.0 लाइसेंस के तहत किया गया है.