Supporto SVG per l'API Async Clipboard

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

L'interfaccia di Clipboard dell'API Async Clipboard fornisce l'accesso in lettura e scrittura ai contenuti degli appunti di sistema. Ciò consente a un'applicazione web di implementare le funzionalità di taglia, copia e incolla. Puoi incollare i dati dagli appunti in un'applicazione chiamando il metodo read() e copiare i dati negli appunti chiamando il metodo write(). Oltre a testo, immagini nel formato Portable Network Graphics (PNG), HTML sanitizzato e non sottoposto a sanitizzazione e formati personalizzati per il web, l'API Async Clipboard ora supporta anche la copia e incolla delle immagini SVG, il che consente di interagire con il software di modifica delle immagini che gestisce gli SVG in modo più naturale, copiando e incollando le immagini SVG in modo più naturale, copiando e incollando le immagini SVG

Supporto del rilevamento delle funzionalità SVG

Rileva il supporto delle immagini SVG (e qualsiasi altro tipo MIME) chiamando il metodo ClipboardItem.supports() statico, passando il tipo MIME desiderato.

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

Copia un'immagine SVG

Copia un'immagine SVG compilando ClipboardItem con un oggetto. Il blob con i dati dell'immagine SVG è il valore e il tipo del blob (in questo caso, 'image/svg+xml') come chiave.

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

Incolla un'immagine SVG

Per incollare un'immagine SVG, rileggi ClipboardItem dagli appunti e recupera il tipo desiderato (in questo caso, 'image/svg+xml') con il metodo getType(). Questo restituisce un blob che, una volta convertito in URL blob, puoi assegnare all'attributo src di 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;
});

Purificazione

SVG è un formato efficace che, ad esempio, consente gli script incorporati. Questo può essere pericoloso quando l'utente incolla contenuti da fonti sconosciute, quindi il browser esegue un passaggio di sanificazione. Quando i dati vengono copiati, l'API Async Clipboard produce un documento SVG corretto e lo scrive negli appunti. Quando i dati vengono incollati, il parser genera un frammento SVG elaborato rigorosamente. Pertanto, prima dell'operazione di incolla, gli attributi del gestore di eventi onclick sono ancora presenti, ma quando vengono incollati vengono rimossi.

App Clipboard Viewer su macOS che controlla i contenuti degli appunti. Mostra che gli attributi listener di eventi On nel file SVG sono ancora presenti.
App Visualizzatore appunti su macOS che ispeziona i contenuti degli appunti. Mostra che gli attributi listener di eventi On nel file SVG sono ancora presenti.

Demo

Scopri come copiare e incollare gli SVG nella demo su Glitch. Visualizza il codice sorgente per vedere come funziona. Assicurati di provare a fare clic su uno dei cerchi prima e dopo aver copiato e incollato. Dopo averli incollati, gli attributi potenzialmente pericolosi del gestore di eventi onclick vengono rimossi.

Ringraziamenti

Il team di Microsoft Edge ha implementato il supporto SVG per l'API Async Clipboard in Chromium. Questo post è stato esaminato da Rachel Andrew e Anupam Snigdha.