Compatibilité SVG pour l'API Async Clipboard

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

L'interface Clipboard de l'API Async Clipboard permet d'accéder en lecture et en écriture au contenu du presse-papiers 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() et copier des données dans le presse-papiers en appelant la méthode write(). En plus du texte, des images au format PNG (Portable Network Graphics), du code HTML nettoyé et non nettoyé, et des formats personnalisés pour le Web, l'API Async Clipboard prend désormais en charge la copie et le collage d'images SVG. Cela signifie que vous pouvez enfin interagir plus naturellement avec les logiciels de retouche d'image qui traitent les fichiers SVG en copiant et en collant les images SVG en tant qu'images plutôt qu'en tant que texte, ou en utilisant des solutions de contournement complexes.

Détecter la compatibilité avec SVG

Détectez la compatibilité avec les images SVG (et tout autre type MIME) en appelant la méthode statique ClipboardItem.supports() et en lui transmettant le type MIME souhaité.

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

Copier une image SVG

Copiez une image SVG en renseignant ClipboardItem avec un objet. Le blob contenant les données d'image SVG est la valeur, et le type du blob ('image/svg+xml' dans ce cas) est sa 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 ClipboardItem à partir du presse-papiers et obtenez le type souhaité ('image/svg+xml' dans ce cas) avec la méthode getType(). Cela renvoie un blob qui, une fois converti en URL de blob, peut être attribué à 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 puissant et permet, par exemple, d'intégrer des scripts. Cela peut être dangereux lorsque l'utilisateur colle du contenu provenant de sources inconnues. Le navigateur exécute donc une étape de nettoyage. Lorsque des données sont copiées, l'API Async Clipboard produit un document SVG bien formé, puis l'écrit dans le presse-papiers. Lorsque des données sont collées, un fragment SVG strictement traité est produit par l'analyseur de fragment. 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.

L&#39;application Clipboard Viewer sur macOS inspecte le contenu du presse-papiers. Cela montre que les attributs d&#39;écouteur d&#39;événements onclick du SVG sont toujours là.
L'application "Clipboard Viewer" sur macOS inspecte le contenu du presse-papiers. Cela montre que les attributs d'écouteur d'événements onclick du fichier SVG sont toujours présents.

Démo

Découvrez comment copier et coller des SVG dans la démonstration. Consultez le code source pour comprendre son fonctionnement. Veillez à cliquer sur l'un des cercles avant et après avoir copié et collé. Une fois le contenu collé, les attributs de gestionnaire d'événements onclick potentiellement dangereux sont supprimés.

Remerciements

La prise en charge du format SVG pour l'API Async Clipboard dans Chromium a été implémentée par l'équipe Microsoft Edge. Cet article a été relu par Rachel Andrew et Anupam Snigdha.