Web custom formats for the Async Clipboard API

Until now, the Async Clipboard API supported a limited set of MIME types to be copied to and pasted from the system clipboard, specifically: text/plain, text/html, and image/png. The browser typically sanitizes this to, for example, remove embedded script elements or javascript: links from an HTML string, or to prevent PNG 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 write arbitrary data to the clipboard.

# Browser support

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

# Writing web custom formats to the clipboard

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

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

# Reading web custom formats from the clipboard

As with writing, reading web custom formats from the clipboard is almost identical to reading sanitized formats. The only difference is that the app now needs to look for clipboard items whose type starts with "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);
}

# Interoperability with platform-specific apps

Web custom formats like web image/jpeg are not something that typical platform-specific applications understand (since they would expect image/jpeg). Over time, concerned apps are expected to add support for such formats as an opt-in if their developers deem support for web custom formats to be relevant for their users. On the operating system clipboard, the various formats are present in multiple formats ready for consumption, as can be seen in the screenshot for macOS below.

# Demo

You can try the demo below and view the source code to see how the demo works.

# Acknowledgements

This article was reviewed by Joe Medley and François Beaufort. Hero image by Neon Tommy, used under a CC BY-SA 2.0 license.