Supporto SVG per l'API Async Clipboard

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

L'interfaccia Clipboard dell'API Async Clipboard fornisce l'accesso in lettura e scrittura ai contenuti degli appunti di sistema. In questo modo, un'applicazione web può implementare le funzionalità 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 in formato Portable Network Graphics (PNG), HTML pulito e non pulito e formati personalizzati web, l'API Async Clipboard ora supporta anche la copia e l'incolla di immagini SVG, il che significa che puoi finalmente interagire in modo più naturale con i software di modifica delle immagini che gestiscono i file SVG copiando e incollando le immagini SVG come immagini anziché come testo o utilizzando soluzioni alternative.

Rilevamento del supporto SVG

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

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

Copiare 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 (ovvero 'image/svg+xml' in questo caso) è la 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);
  }
});

Incollare un'immagine SVG

Per incollare un'immagine SVG, leggi ClipboardItem all'indietro dagli appunti e ottieni il tipo che ti interessa (ovvero 'image/svg+xml' in questo caso) con il metodo getType(). Restituisce un blob che, una volta convertito in un 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 potente che, ad esempio, consente script incorporati. Ciò può essere pericoloso quando l'utente incolla contenuti provenienti da origini sconosciute, pertanto il browser esegue un passaggio di sanificazione. Quando i dati vengono copiati, l'API Async Clipboard produce un documento SVG ben formato e lo scrive negli appunti. Quando i dati vengono incollati, il parser dei frammenti produce un frammento SVG elaborato in modo rigoroso. Pertanto, prima dell'operazione di incolla, gli attributi del gestore eventi onclick sono ancora presenti, ma vengono rimossi dopo l'incolla.

L&#39;app Clipboard Viewer su macOS che esamina i contenuti degli appunti. Mostra che gli attributi del listener di eventi onclick nell&#39;SVG sono ancora presenti.
L'app Clipboard Viewer su macOS esamina i contenuti degli appunti. Mostra che gli attributi del listener di eventi onclick nell'SVG sono ancora presenti.

Demo

Scopri come copiare e incollare le immagini SVG nella demo. 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 l'incollatura, gli attributi del gestore di eventi onclick potenzialmente pericolosi vengono rimossi.

Ringraziamenti

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