Formati web personalizzati per l'API Async Clipboard

Thomas Steiner

Finora, l'API Async Clipboard supportava un insieme limitato di Tipi MIME da copiare e incollare dagli appunti di sistema, in particolare: text/plain, text/html e image/png. In genere il browser sanifica questo passaggio, ad esempio, per rimuovere i video incorporati Elementi script o link javascript: da una stringa HTML oppure per impedire la visualizzazione dei file PNG attacchi con bomba di decompressione.

In alcuni casi, tuttavia, può essere auspicabile integrare negli appunti i contenuti non sottoposti a sanitizzazione:

• Situazioni in cui l'applicazione gestisce la sanificazione stessa.
• Situazioni in cui è fondamentale che i dati copiati siano identici a quelli incollati.

In questi casi, l'API Async Clipboard ora supporta formati personalizzati per il web che consentono agli sviluppatori di scrivere negli appunti.

Supporto browser

L'API Async Clipboard in sé con supporto delle immagini è supportata a partire da Chromium 76. Personalizzato per il web per l'API Async Clipboard sono supportati su computer e su Chromium per dispositivi mobili a partire dal giorno Versione 104.

Scrittura negli appunti di formati web personalizzati

Scrivere formati personalizzati web negli appunti è quasi identico a scrivendo formati sanitizzati, fatta eccezione per il requisito per anteporre la stringa "web " (incluso lo spazio finale) al tipo MIME del blob.

// Fetch remote JPEG and GIF images and obtain their blob representations.
const [jpegBlob, gifBlob] = await Promise.all([
  fetch('image.jpg').then((response) => response.blob()),
  fetch('image.gif').then((response) => response.blob()),
]);

try {
  // Write the image data to the clipboard, prepending the blobs' actual
  // types (`"image/jpeg"` and "image/gif") with the string `"web "`, so
  // they become `"web image/jpeg"` and `"web image/gif"` respectively.
  // The code elegantly makes use of computed property names:
  // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names.
  const clipboardItem = new ClipboardItem({
    [`web ${jpegBlob.type}`]: jpegBlob,
    [`web ${gifBlob.type}`]: gifBlob,
  });
  await navigator.clipboard.write([clipboardItem]);
} catch (err) {
  console.error(err.name, err.message);
}

Lettura di formati personalizzati web dagli appunti

Come per la scrittura, leggere i formati web personalizzati dagli appunti è quasi identico a leggi i formati sanitizzati. L'unica differenza è che l'app ora deve cercare gli elementi degli appunti il cui tipo inizia con "web ".

try {
  // Iterate over all clipboard items.
  const clipboardItems = await navigator.clipboard.read();
  for (const clipboardItem of clipboardItems) {
    for (const type of clipboardItem.types) {
      // Discard any types that are not web custom formats.
      if (!type.startsWith('web ')) {
        continue;
      }
      const blob = await clipboardItem.getType(type);
      // Sanitize the blob if you need to, then process it in your app.
    }
  }
} catch (err) {
  console.error(err.name, err.message);
}

Interoperabilità con app specifiche della piattaforma

I formati personalizzati per il web, come web image/jpeg, non sono tipici della piattaforma le applicazioni comprendono (dato che si aspettano image/jpeg). Con il passare del tempo, le app dovrebbe aggiungere il supporto per questi formati come un'attivazione se i loro sviluppatori ritengono che sia supportato formati personalizzati pertinenti per i propri utenti. Negli appunti del sistema operativo, le varie disponibili in più formati pronti per il consumo, come si può vedere screenshot per macOS qui sotto.

Demo

Puoi provare la demo di seguito e visualizzare il codice sorgente per scoprire come funziona.

Ringraziamenti

Questo articolo è stato esaminato da Joe Medley e François Beaufort. Immagine hero di Neon Tommy, utilizzata con licenza CC BY-SA 2.0.