SVG-ondersteuning voor de Async Clipboard API

Taylore Givens
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 vanuit het klembord in een applicatie 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)-formaat, geschoonde en ongeschoonde HTML en aangepaste webformaten ondersteunt de Async Clipboard API nu ook het kopiëren en plakken van SVG-afbeeldingen. Dit betekent dat u eindelijk kunt werken met beeldbewerkingssoftware die natuurlijker met SVG's omgaat door SVG-afbeeldingen te kopiëren en te plakken als afbeeldingen in plaats van als tekst of door onhandige oplossingen te gebruiken.

Functiedetectie SVG-ondersteuning

Detecteer ondersteuning voor SVG-afbeeldingen (en alle andere MIME-typen) door de statische methode ClipboardItem.supports() aan te roepen en hieraan het gewenste MIME-type door te geven.

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

Een SVG-afbeelding kopiëren

Kopieer een SVG-afbeelding door het ClipboardItem te vullen met een object. De blob met de SVG-afbeeldingsgegevens heeft de waarde en het blobtype (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 van 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 omgezet 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 ingebedde scripts mogelijk maakt. Dit kan gevaarlijk zijn wanneer de gebruiker content van onbekende bronnen plakt, waardoor de browser een opschoningsstap uitvoert. Wanneer gegevens worden gekopieerd, produceert de Async Clipboard API een correct opgemaakt SVG-document en schrijft dit vervolgens naar het klembord. Wanneer gegevens worden geplakt, produceert de fragmentparser een strikt verwerkt SVG-fragment. Daarom zijn de onclick gebeurtenishandlerattributen vóór het plakken nog steeds aanwezig, maar na het plakken worden ze verwijderd.

De Clipboard Viewer-app op macOS inspecteert de inhoud van het klembord. Het toont aan dat de onclick-gebeurtenislistenerkenmerken in de SVG nog steeds aanwezig zijn.
De Clipboard Viewer-app op macOS inspecteert de inhoud van het klembord. Het toont aan dat de onclick-gebeurtenislistenerkenmerken in de SVG nog steeds aanwezig zijn.

Demonstratie

Ontdek het kopiëren en plakken van SVG's in de demo . Bekijk de broncode om te zien hoe het werkt. Probeer zeker eens op een van de cirkels te klikken voor en na het kopiëren en plakken. Na het plakken worden de potentieel gevaarlijke onclick gebeurtenishandlerattributen verwijderd.

Dankbetuigingen

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