Compatibilité SVG pour l'API Async Clipboard

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

La interface Clipboard de L'API Async Clipboard fournit un accès en lecture et en écriture au contenu des le presse-papiers du système. Cela permet à une application web d'implémenter les fonctions cut, copy et coller les caractéristiques. Vous pouvez coller des données du presse-papiers dans une application en en appelant la méthode la méthode read(), et copier des données dans le presse-papiers en appelant la méthode write(). Outre text, images dans Portable Network graphiques (PNG), nettoyés et HTML non rectifié Les formats Web personnalisés, L'API Async Clipboard permet désormais de copier et de coller des images SVG, ce qui Cela signifie que vous pouvez enfin interagir avec un logiciel d'édition d'images compatible avec les SVG. plus naturellement en copiant et collant les images SVG en tant qu'images plutôt que sous forme de texte ou à l'aide de solutions de contournement du piratage.

Compatibilité avec la détection de fonctionnalités SVG

Détectez la compatibilité des images SVG (et de tout autre type MIME) en appelant la méthode ClipboardItem.supports() statique, 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 les champs ClipboardItem avec un objet. 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, puis obtenir le type souhaité (c'est-à-dire 'image/svg+xml' dans ce cas) avec le getType(). Cela 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. Il peut s'agir dangereux lorsque l'utilisateur colle du contenu provenant de sources inconnues. Par conséquent, navigateur exécute une étape de nettoyage. Une fois les données copiées, l'API Async Clipboard crée un document SVG bien formé, puis l'écrit dans le presse-papiers. Quand ? les données sont collées, le fragment génère un fragment SVG soumis à un traitement strict de votre analyseur. Par conséquent, avant l'opération de collage, le gestionnaire d'événements onclick sont toujours présents, mais lors du collage, ils sont supprimés.

<ph type="x-smartling-placeholder">
</ph> L&#39;application Clipboard Viewer sous macOS inspectant le contenu du presse-papiers. Émissions que les attributs d&#39;écouteur d&#39;événements &quot;onclick&quot; dans le SVG sont toujours présents.
L'application Clipboard Viewer sur macOS inspectant le contenu du presse-papiers. Émissions que les attributs d'écouteur d'événements "onclick" dans le SVG sont toujours présents.

Démo

Découvrez comment copier et coller des SVG dans l'application demo sur Glitch. Consultez le code source pour en savoir plus. Essayez de cliquer sur l'un des cercles avant et après copier et coller. Une fois l'opération "coller", l'événement onclick potentiellement dangereux les attributs de gestionnaire sont supprimés.

Remerciements

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