Compatibilité SVG pour l'API Async Clipboard

Taylore Givens

Thomas Steiner

L'interface Clipboard de l'API Async Clipboard fournit un accès en lecture et en écriture au contenu du presse-papiers du système. Cela permet à une application Web d'implémenter des fonctionnalités de couper, copier et coller. Vous pouvez coller des données du presse-papiers dans une application en appelant la méthode read(), puis copier des données dans le presse-papiers en appelant la méthode write(). Outre le texte, les images au format PNG (Portable Network Graphics), le code HTML nettoyé et non nettoyé, et les formats Web personnalisés, l'API Async Clipboard permet désormais de copier et coller des images SVG. Vous pouvez ainsi interagir plus naturellement avec un logiciel d'édition d'images qui gère les fichiers SVG en copiant et collant des images SVG en tant qu'images plutôt que sous forme de texte ou de travail.

const supportsSVG = () => {
  if (
    !('supports' in window.ClipboardItem) ||
    !window.ClipboardItem.supports('image/svg+xml')
  ) {
    return false;
  }
  return true;
};

Copiez une image SVG en insérant un objet dans ClipboardItem. Le blob contenant les données d'image SVG correspond à la valeur et au type du blob (c'est-à-dire 'image/svg+xml' dans ce cas) comme clé.

copyButton.addEventListener('click', async () => {
  if (!supportsSVG()) {
    return;
  }
  try {
    const blob = await fetch(img.src).then((response) => response.blob());
    await navigator.clipboard.write([
      new window.ClipboardItem({
        [blob.type]: blob,
      }),
    ]);
  } catch (err) {
    console.error(err.name, err.message);
    alert(err.message);
  }
});

Coller une image SVG

Pour coller une image SVG, lisez à nouveau le ClipboardItem depuis le presse-papiers et récupérez le type souhaité (par exemple, 'image/svg+xml' dans ce cas) avec la méthode getType(). Cette commande renvoie un blob qui, une fois converti en URL d'objet blob, que vous pouvez attribuer à l'attribut src d'un <img>.

pasteButton.addEventListener('click', async () => {
  if (!supportsSVG()) {
    return;
  }
  const [clipboardItem] = await navigator.clipboard.read();
  const svgBlob = await clipboardItem.getType('image/svg+xml');
  if (!svgBlob) {
    alert('No SVG in the clipboard.');
    return;
  }
  const image = document.createElement('img');
  const blobURL = URL.createObjectURL(svgBlob);
  image.addEventListener('load', () => {
    URL.revokeObjectURL(blobURL);
  });
  image.src = blobURL;
});

Désinfection

Le format SVG est un format puissant qui, par exemple, permet d'intégrer des scripts. Cela peut être dangereux lorsque l'utilisateur colle du contenu provenant de sources inconnues, ce qui fait que le navigateur exécute une étape de nettoyage. Lorsque les données sont copiées, l'API Async Clipboard génère un document SVG bien formé, puis l'écrit dans le presse-papiers. Lorsque les données sont collées, l'analyseur de fragments produit un fragment SVG strictement traité. Par conséquent, avant l'opération de collage, les attributs du gestionnaire d'événements onclick sont toujours présents, mais ils sont supprimés lors du collage.

Démonstration

Découvrez comment copier et coller des SVG dans la démonstration sur Glitch. Affichez le code source pour voir comment cela fonctionne. Essayez de cliquer sur l'un des cercles avant et après le copier-coller. Une fois l'opération effectuée, les attributs du gestionnaire d'événements onclick potentiellement dangereux sont supprimés.

Liens associés

• Logiciels de production utilisant cette fonctionnalité :
  • SVG Boxy
  • SVGcode
• Entrée ChromeStatus
• Intention d'expédition
• Bug Chromium
• Position des normes WebKit
• Position des normes Mozilla Standards

Remerciements

La compatibilité SVG pour l'API Async Clipboard dans Chromium a été mise en œuvre par l'équipe Microsoft Edge. Ce post a été examiné par Rachel Andrew et Anupam Snigdha.