Formats Web personnalisés pour l'API Async Clipboard

Thomas Steiner

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 effectue généralement une épuration pour, par exemple, supprimer les éléments script intégrés ou les liens javascript: d'une chaîne HTML, ou pour éviter les attaques par bombe de décompression PNG.

Toutefois, dans certains cas, il peut être souhaitable d'accepter du contenu non nettoyé dans le presse-papiers:

• Situations où l'application gère elle-même la désinfection.
• Situations où il est essentiel 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 en elle-même, avec la prise en charge des images, est compatible à partir de Chromium 76. Les formats Web personnalisés pour l'API Async Clipboard sont compatibles avec Chromium pour ordinateur et 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, à l'exception de l'obligation d'ajouter la chaîne "web " (y compris l'espace à la fin) au type MIME du 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);
}

Lire les formats personnalisés Web à 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 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 formats sont disponibles, comme le montre la capture d'écran pour macOS ci-dessous.

Démo

Vous pouvez essayer la démonstration et afficher le code source pour comprendre son fonctionnement.

Remerciements

Ce document a été examiné par Joe Medley et François Beaufort.