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

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

Die Clipboard-Oberfläche der Async Clipboard API bietet Lese- und Schreibzugriff auf den Inhalt der Systemzwischenablage. So können in einer Webanwendung Funktionen zum Ausschneiden, Kopieren und Einfügen implementiert werden. Sie können Daten aus der Zwischenablage mit der Methode read() in eine Anwendung einfügen und mit der Methode write() Daten in die Zwischenablage kopieren. Abgesehen von Text, Bildern im Portable Network Graphics-Format (PNG), bereinigtem und unbereinigtem HTML und benutzerdefinierten Webformaten unterstützt die Async Clipboard API jetzt auch das Kopieren und Einfügen von SVG-Bildern. So können Sie endlich mit Bildbearbeitungssoftware interagieren, die SVG-Bilder ganz natürlich als SVG-Bilder kopieren und einfügen, statt sie mit SVG-Bildern als SVG-Bilder zu kopieren und einzufügen.

Unterstützung für SVG-Funktionserkennung

Erkennen Sie die Unterstützung für SVG-Bilder (und alle anderen MIME-Typen), 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

Zum Kopieren eines SVG-Bilds muss ein Objekt in ClipboardItem eingefügt werden. Das Blob mit den SVG-Bilddaten ist der Wert und der Blob-Typ (in diesem Fall 'image/svg+xml') als 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

Um ein SVG-Bild einzufügen, lesen Sie ClipboardItem aus der Zwischenablage aus und rufen Sie mit der Methode getType() den gewünschten Typ ab (in diesem Fall 'image/svg+xml'). Dies gibt ein Blob zurück, das nach der Konvertierung in eine Blob-URL dem Attribut src einer <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, bei dem zum Beispiel Skripts eingebettet werden können. Dies kann gefährlich sein, wenn der Nutzer Inhalte aus unbekannten Quellen einfügt, sodass der Browser einen Bereinigungsschritt ausführt. Beim Kopieren von Daten erstellt die Async Clipboard API ein wohlgeformtes SVG-Dokument und schreibt es dann in die Zwischenablage. Beim Einfügen von Daten wird vom Fragmentparser ein streng verarbeitetes SVG-Fragment erzeugt. Daher sind die onclick-Event-Handler-Attribute vor dem Einfügen noch vorhanden, werden aber beim Einfügen entfernt.

Zwischenablagenanzeige unter macOS, die den Inhalt der Zwischenablage prüft Wie Sie sehen, sind die Attribute des Ereignis-Listeners &quot;onclick&quot; in der SVG-Datei noch vorhanden.
Die App „Clipboard Viewer“ unter macOS, mit der der Inhalt der Zwischenablage überprüft wird. Die Attribute des Ereignis-Listeners „onclick“ in der SVG-Datei sind also noch vorhanden.

Demo

In der Demo zu Glitch erfährst du mehr über das Kopieren und Einfügen von SVGs. Sehen Sie sich den Quellcode an, um zu sehen, wie er funktioniert. Klicken Sie vor und nach dem Kopieren und Einfügen auf einen der Kreise. Nach dem Einfügen werden die potenziell gefährlichen onclick-Event-Handler-Attribute entfernt.

Danksagungen

Das Microsoft Edge-Team hat die SVG-Unterstützung für die Async Clipboard API in Chromium implementiert. Dieser Beitrag wurde von Rachel Andrew und Anupam Snigdha bewertet.