Async Clipboard API 的 Web 自定义格式

Thomas Steiner

在此之前，Async Clipboard API仅支持有限的一组 要复制和粘贴到系统剪贴板中的 MIME 类型，具体为：text/plain， text/html 和 image/png。浏览器通常会对其进行清理，例如，删除嵌入式 HTML 字符串中的 script 元素或 javascript: 链接，或阻止 PNG 解压缩炸弹攻击。

不过，在某些情况下，支持剪贴板中未经排错的内容也是可取的：

• 应用处理清理本身的情况。
• 确保复制的数据与粘贴的数据完全相同的情况。

对于此类情况，Async Clipboard API 现在支持 Web 自定义格式，让开发者能够将任意数据写入剪贴板。

浏览器支持

从 Chromium 76 开始，支持附带图片功能的 Async Clipboard API 本身。网站自定义 自 104 版。

将网站自定义格式写入剪贴板

将 Web 自定义格式写入剪贴板与写入经过清理格式几乎完全相同，唯一的区别是需要在 blob 的 MIME 类型前面附加字符串 "web "（包括尾随空格）。

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

从剪贴板中读取网络自定义格式

与写入时一样，从剪贴板读取网络自定义格式几乎是 读取经过净化的格式唯一的区别在于，应用现在需要查找类型以 "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);
}

与平台专用应用的互操作性

web image/jpeg 等网站自定义格式并不是典型的平台特有的格式 应用理解（因为它们需要 image/jpeg）。久而久之，令人担忧的应用 预计会添加对此类格式的支持，例如，如果开发者认为支持网站 自定义广告格式，使其更贴合用户需求。操作系统剪贴板上 有多种广告格式可供使用，如 适用于 macOS 的屏幕截图如下所示。

演示

您可以试用下面的演示，并查看源代码，了解演示的运作方式。

致谢

本文由 Joe Medley 审核 和 François Beaufort。 主打图片：Neon Tommy，用于 CC BY-SA 2.0 许可。