SVG-Unterstützung für die Async Clipboard API

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

Die Clipboard-Schnittstelle der Async Clipboard API bietet Lese- und Schreibzugriff auf den Inhalt der Systemzwischenablage. So können in einer Webanwendung die Funktionen „Ausschneiden“, „Kopieren“ und „Einfügen“ implementiert werden. Sie können Daten aus der Zwischenablage in eine Anwendung einfügen, indem Sie die Methode read() aufrufen. Daten können Sie in die Zwischenablage kopieren, indem Sie die Methode write() aufrufen. Neben Text, Bildern im Portable Network Graphics (PNG)-Format, sanitiertem und nicht sanitiertem HTML und benutzerdefinierten Webformaten unterstützt die Async Clipboard API jetzt auch das Kopieren und Einfügen von SVG-Bildern. Sie können also endlich auf natürlichere Weise mit Bildbearbeitungssoftware interagieren, die SVGs verarbeitet, indem Sie SVG-Bilder als Bilder statt als Text kopieren und einfügen oder umständliche Umwege nutzen.

SVG-Unterstützung für die Funktion „Erkennung von Funktionen“

Sie können die Unterstützung für SVG-Bilder (und andere MIME-Typen) ermitteln, indem Sie die statische Methode ClipboardItem.supports() aufrufen und ihr den gewünschten MIME-Typ übergeben.

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

SVG-Bild kopieren

Kopieren Sie ein SVG-Bild, indem Sie das ClipboardItem mit einem Objekt füllen. Der Blob mit den SVG-Bilddaten ist der Wert und der Typ des Blobs (in diesem Fall 'image/svg+xml') ist der Schlüssel.

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);
  }
});

SVG-Bild einfügen

Wenn Sie ein SVG-Bild einfügen möchten, lesen Sie ClipboardItem aus der Zwischenablage zurück und rufen Sie mit der Methode getType() den gewünschten Typ ab (in diesem Fall 'image/svg+xml'). Dadurch wird ein Blob zurückgegeben, der nach der Umwandlung in eine Blob-URL dem src-Attribut eines <img> zugewiesen werden kann.

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;
});

Bereinigung

SVG ist ein leistungsstarkes Format, das beispielsweise eingebettete Scripts zulässt. Das kann gefährlich sein, wenn der Nutzer Inhalte aus unbekannten Quellen einfügt. Daher führt der Browser einen Schritt zur Bereinigung durch. Wenn Daten kopiert werden, erstellt die Async Clipboard API ein korrekt formatiertes SVG-Dokument und schreibt es dann in die Zwischenablage. Wenn Daten eingefügt werden, wird vom Fragment-Parser ein streng verarbeitetes SVG-Fragment erstellt. Daher sind die onclick-Ereignishandlerattribute vor dem Einfügen noch vorhanden, werden aber beim Einfügen entfernt.

Die Zwischenablage-Ansichts-App unter macOS, in der der Inhalt der Zwischenablage geprüft wird. Sie sehen, dass die onclick-Ereignis-Listener-Attribute im SVG noch vorhanden sind.
Die Zwischenablage-Ansichts-App unter macOS, in der der Inhalt der Zwischenablage geprüft wird. Sie sehen, dass die onclick-Ereignis-Listener-Attribute im SVG noch vorhanden sind.

Demo

In der Demo auf Glitch können Sie sehen, wie Sie SVGs kopieren und einfügen. Im Quellcode finden Sie weitere Informationen zur Funktionsweise. Klicken Sie vor und nach dem Kopieren und Einfügen auf einen der Kreise. Nach dem Einfügen werden die potenziell gefährlichen onclick-Ereignishandler-Attribute entfernt.

Danksagungen

Die SVG-Unterstützung für die Async Clipboard API in Chromium wurde vom Microsoft Edge-Team implementiert. Dieser Beitrag wurde von Rachel Andrew und Anupam Snigdha geprüft.