Supporto SVG per l'API Async Clipboard

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

La Interfaccia di Clipboard di l'API Async Clipboard fornisce l'accesso in lettura e scrittura ai contenuti appunti di sistema. Ciò consente a un'applicazione web di implementare opzioni di taglio, copia incolla caratteristiche. Puoi incollare i dati dagli appunti in un'applicazione chiamando il read(), e copia i dati negli appunti chiamando il metodo write(). A parte text, immagini in Portable Network Formato grafica (PNG), sanitizzato e HTML non convalidato e Formati personalizzati per il web, L'API Async Clipboard ora supporta anche la copia e incolla delle immagini SVG, puoi finalmente interagire con il software di editing delle immagini che si occupa di SVG in modo più naturale copiando e incollando le immagini SVG come immagini anziché come testo usando soluzioni compromissioni.

Supporto del rilevamento delle funzionalità SVG

Rileva il supporto delle immagini SVG (e qualsiasi altro tipo MIME) richiamando il metodo statico ClipboardItem.supports(), 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 il ClipboardItem con un oggetto. Il blob con i dati dell'immagine SVG corrispondono al valore e al 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, leggi il ClipboardItem dagli appunti e ottenere il tipo desiderato (in questo caso, 'image/svg+xml') getType(). Questo restituisce un blob che, una volta convertito in URL del blob, che 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. Può essere pericoloso quando l'utente incolla contenuti da fonti sconosciute. Pertanto, del 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 vengono incollati, produce un frammento SVG elaborato rigorosamente analizzatore sintattico. Pertanto, prima dell'operazione di incolla, il gestore di eventi onclick sono ancora presenti, ma una volta incollati vengono rimossi.

App Clipboard Viewer su macOS che controlla i contenuti degli appunti. Mostra che gli attributi del listener di eventi di clic nell&#39;SVG siano ancora presenti.
App Clipboard Viewer su macOS che ispeziona i contenuti degli appunti. Mostra che gli attributi del listener di eventi On nel file SVG siano ancora presenti.

Demo

Scopri come copiare e incollare gli SVG nel demo su Glitch. Visualizza codice sorgente per vedere come funziona. Prova a fare clic su uno dei cerchi precedenti e successivi copiare e incollare. Dopo aver incollato, l'evento onclick potenzialmente pericoloso vengono rimossi gli attributi dei gestori.

Ringraziamenti

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