Web custom formats for the Async Clipboard API

Until now, theAsync Clipboard API supported a limited set ofMIME types to be copied to and pasted from the system clipboard, specifically:text/plain,text/html, andimage/png. The browser typically sanitizes this to, for example, remove embeddedscript elements or#"https://en.wikipedia.org/wiki/Zip_bomb">decompression bomb attacks.

In some cases, though, it can be desirable to support unsanitized content on the clipboard:

  • Situations where the application deals with the sanitization itself.
  • Situations where it's crucial for the copied data to be identical with the pasted data.

For such cases, the Async Clipboard API now supports web custom formats that let developers writearbitrary data to the clipboard.

Browser support

The Async Clipboard API per se with image support is supported as of Chromium 76. Web customformats for the Async Clipboard API are supported on desktop and on mobile Chromium as ofversion 104.

Writing web custom formats to the clipboard

Writing web custom formats to the clipboard is almost identical towriting sanitized formats, except for the requirementto prepend the string"web " (including the trailing space) to the blob's MIME type.

//FetchremoteJPEGandGIFimagesandobtaintheirblobrepresentations.const[jpegBlob, gifBlob]=awaitPromise.all([  fetch('image.jpg').then((response) => response.blob()),  fetch('image.gif').then((response) => response.blob()),]);try{//Writetheimagedatatotheclipboard,prependingtheblobs'actual//types(`"image/jpeg"`and"image/gif")withthestring`"web "`,so//theybecome`"web image/jpeg"`and`"web image/gif"`respectively.//Thecodeelegantlymakesuseofcomputedpropertynames://https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names.constclipboardItem=newClipboardItem({[`web ${jpegBlob.type}`]:jpegBlob,[`web ${gifBlob.type}`]:gifBlob,});awaitnavigator.clipboard.write([clipboardItem]);}catch(err){console.error(err.name,err.message);}

Reading web custom formats from the clipboard

As with writing, reading web custom formats from the clipboard is almost identical toreading sanitized formats. The only difference is thatthe app now needs to look for clipboard items whose type starts with"web ".

try{//Iterateoverallclipboarditems.constclipboardItems=awaitnavigator.clipboard.read();for(constclipboardItemofclipboardItems){for(consttypeofclipboardItem.types){//Discardanytypesthatarenotwebcustomformats.if(!type.startsWith('web ')){continue;}constblob=awaitclipboardItem.getType(type);//Sanitizetheblobifyouneedto,thenprocessitinyourapp.}}}catch(err){console.error(err.name,err.message);}

Interoperability with platform-specific apps

Web custom formats likeweb image/jpeg are not something that typical platform-specificapplications understand (since they would expectimage/jpeg). Over time, concerned apps areexpected to add support for such formats as an opt-in if their developers deem support for webcustom formats to be relevant for their users. On the operating system clipboard, the variousformats are present in multiple formats ready for consumption, as can be seen in thescreenshot for macOS below.

Clipboard expector on macOS showing a custom format map listing two web custom formats.

Demo

You can try the demo andview the source code to see how the demo works.

Acknowledgements

This document was reviewed byJoe MedleyandFrançois Beaufort.

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2022-08-01 UTC.