SVG-ondersteuning voor de Async Clipboard API

Taylore Gegevens
Taylore Givens
LinkedIn
Thomas Steiner

De Clipboard van de Async Clipboard API biedt lees- en schrijftoegang tot de inhoud van het systeemklembord. Hierdoor kan een webapplicatie knip-, kopieer- en plakfuncties implementeren. U kunt gegevens van het klembord in een toepassing plakken door de methode read() aan te roepen, en gegevens naar het klembord kopiëren door de methode write() aan te roepen. Naast tekst , afbeeldingen in Portable Network Graphics (PNG)-indeling, opgeschoonde en niet-opgeschoonde HTML en aangepaste webformaten ondersteunt de Async Clipboard API nu ook het kopiëren en plakken van SVG-afbeeldingen, wat betekent dat u eindelijk kunt communiceren met beeldbewerkingssoftware die zich bezighoudt met SVG's worden natuurlijker gemaakt door SVG-afbeeldingen te kopiëren en te plakken als afbeeldingen in plaats van als tekst, of door gebruik te maken van hacky work arounds .

Functie detecteert SVG-ondersteuning

Detecteer ondersteuning voor SVG-afbeeldingen (en elk ander MIME-type) door de statische methode ClipboardItem.supports() aan te roepen en deze het gewenste MIME-type door te geven.

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

Kopieer een SVG-afbeelding

Kopieer een SVG-afbeelding door het ClipboardItem te vullen met een object. De blob met de SVG-afbeeldingsgegevens is de waarde en het type van de blob (in dit geval 'image/svg+xml' ) als sleutel.

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

Plak een SVG-afbeelding

Om een ​​SVG-afbeelding te plakken, leest u het ClipboardItem terug vanaf het klembord en haalt u het gewenste type op (in dit geval 'image/svg+xml' ) met de getType() -methode. Dit retourneert een blob die, eenmaal geconverteerd naar een blob-URL, u kunt toewijzen aan het src attribuut van een <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;
});

Sanering

SVG is een krachtig formaat dat bijvoorbeeld embedded scripts mogelijk maakt. Dit kan gevaarlijk zijn wanneer de gebruiker inhoud uit onbekende bronnen plakt, zodat de browser een opschoningsstap uitvoert. Wanneer gegevens worden gekopieerd, produceert de Async Clipboard API een goed opgemaakt SVG-document en schrijft dit vervolgens naar het klembord. Wanneer gegevens worden geplakt, wordt door de fragmentparser een strikt verwerkt SVG-fragment geproduceerd. Daarom zijn vóór de plakbewerking de kenmerken van de onclick gebeurtenishandler nog steeds aanwezig, maar bij het plakken worden ze verwijderd.

Clipboard Viewer-app op macOS die de inhoud van het klembord inspecteert. Het laat zien dat de kenmerken van de onclick-gebeurtenislistener in de SVG nog steeds aanwezig zijn.
Clipboard Viewer-app op macOS die de inhoud van het klembord inspecteert. Het laat zien dat de kenmerken van de onclick-gebeurtenislistener in de SVG nog steeds aanwezig zijn.

Demo

Ontdek het kopiëren en plakken van SVG's in de demo op Glitch. Bekijk de broncode om te zien hoe het werkt. Zorg ervoor dat u voor en na het kopiëren en plakken op een van de cirkels klikt. Na het plakken worden de potentieel gevaarlijke kenmerken van onclick gebeurtenishandler verwijderd.

Dankbetuigingen

SVG-ondersteuning voor de Async Clipboard API in Chromium is geïmplementeerd door het Microsoft Edge-team. Dit bericht is beoordeeld door Rachel Andrew en Anupam Snigdha.