Jusqu'à présent, l'API Async Clipboard acceptait un ensemble limité de types MIME à copier et coller depuis le presse-papiers système, en particulier : text/plain, text/html et image/png. Le navigateur nettoie généralement ces éléments pour, par exemple, supprimer les éléments intégrés
des éléments script ou des liens javascript: depuis une chaîne HTML, ou pour empêcher le format PNG ;
les attaques par bombe de décompression.
Toutefois, dans certains cas, il peut être souhaitable de prendre en charge le contenu non nettoyé dans le presse-papiers :
- Situations dans lesquelles l'application gère le nettoyage lui-même.
- Situations dans lesquelles il est crucial que les données copiées soient identiques aux données collées.
Dans ce cas, l'API Async Clipboard est désormais compatible avec les formats Web personnalisés qui permettent aux développeurs d'écrire des données arbitraires dans le presse-papiers.
Prise en charge des navigateurs
L'API Async Clipboard prend en charge les images à partir de Chromium 76. Personnalisé Web pour l'API Async Clipboard sont compatibles avec Chromium pour ordinateur et mobile à partir du version 104.
Écrire des formats Web personnalisés dans le presse-papiers
L'écriture de formats Web personnalisés dans le presse-papiers est presque identique à celle
des formats nettoyés, à l'exception de l'exigence
pour ajouter la chaîne "web " (espace compris à la fin) au type MIME de l'objet 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);
}
Lecture des formats Web personnalisés à partir du presse-papiers
Comme pour l'écriture, la lecture de formats Web personnalisés à partir du presse-papiers est presque identique à
des formats nettoyés. La seule différence est que
L'application doit maintenant rechercher les éléments du presse-papiers dont le type commence par "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);
}
Interopérabilité avec les applications spécifiques à la plate-forme
Les formats Web personnalisés tels que web image/jpeg ne sont pas compris par les applications typiques spécifiques à la plate-forme (car elles s'attendent à image/jpeg). Au fil du temps, les applications concernées devraient ajouter la prise en charge de ces formats en tant que fonctionnalité activable si leurs développeurs estiment que la prise en charge des formats Web personnalisés est pertinente pour leurs utilisateurs. Dans le presse-papiers du système d'exploitation, les différents
sont disponibles dans plusieurs formats prêts à être consommés, comme vous pouvez le voir dans la
pour macOS ci-dessous.
Démo
Vous pouvez essayer la démo ci-dessous et Affichez le code source pour voir comment la démonstration fonctionne.
Remerciements
Cet article a été lu par Joe Medley et François Beaufort. Image héros de Neon Tommy, utilisée sous une Licence CC BY-SA 2.0.