Jusqu'à présent, l'API Async Clipboard permettait de copier un ensemble limité de types MIME et de les coller depuis le presse-papiers du système, à savoir text/plain, text/html et image/png. Le navigateur nettoie généralement cette tâche pour, par exemple, supprimer les éléments script intégrés ou les liens javascript: d'une chaîne HTML, ou empêcher les attaques d'bombe de décompression au format PNG.
Toutefois, dans certains cas, il peut être souhaitable d'autoriser le contenu non rectifié dans le presse-papiers:
- Situations dans lesquelles l'application gère le nettoyage.
- Situations dans lesquelles il est crucial que les données copiées soient identiques aux données collées.
Dans de tels cas, l'API Async Clipboard prend désormais en charge 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 compatible avec les images est compatible à partir de Chromium 76. Les formats Web personnalisés pour l'API Async Clipboard sont compatibles avec Chromium sur ordinateur et sur mobile à partir de la 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 à l'écriture de formats nettoyés, si ce n'est qu'il faut ajouter la chaîne "web " au début du type MIME du blob (en incluant l'espace de fin).
// 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);
}
Lire 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 à la lecture de formats nettoyés. La seule différence est que l'application doit désormais 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 propres à la plate-forme
Les formats Web personnalisés tels que web image/jpeg ne sont pas compréhensibles par les applications propres à une plate-forme classique (car elles s'attendraient à image/jpeg). Au fil du temps, les applications devraient prendre en charge ces formats si les développeurs estiment que ces formats Web sont pertinents pour leurs utilisateurs. Dans le presse-papiers du système d'exploitation, les différents formats sont présents dans plusieurs formats prêts à l'emploi, comme le montre la capture d'écran ci-dessous pour macOS.
Démonstration
Vous pouvez essayer la démonstration ci-dessous et afficher le code source pour en voir le fonctionnement.
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.