浏览器原生剪贴板navigator.clipboard API 安全又强大

大家在使用 GitHub 时，有没有发现使用 Ctrl+V 就能直接读取用户剪贴板图片进行粘贴，那么它是如何工作的？安全性如何？

浏览器原生 navigator.clipboard API

navigator.clipboard API 是一个异步的、基于 Promise 的现代接口，其具有三大核心优势：

1. 所有读写操作都返回 Promise，不会阻塞页面。
2. 操作剪贴板需要获得用户授权，既安全又透明。
3. 除了文本，它能轻松读写图片等二进制数据。

写入剪贴板

在深入读取操作前，我们先看看如何向剪贴板写入内容。

写入文本

这是最常见的操作，比如实现一个“点击复制”按钮。

const copyBtn = document.getElementById('copy-btn');

copyBtn.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText('你好，世界！');
    console.log('文本已成功复制到剪贴板');
  } catch (err) {
    console.error('复制失败: ', err);
  }
});

写入图片

写入图片稍微复杂一点，需要使用 clipboard.write() 方法，并传入一个 ClipboardItem 对象。这个对象可以包含不同 MIME 类型的数据。

// 假设你有一个 canvas 元素
const canvas = document.getElementById('my-canvas');
// 将 canvas 内容转为 blob
canvas.toBlob(async (blob) => {
    try {
        const item = new clipboardItem({'image/png': blob });
        await navigator.clipboard.write([item]);
        console.log('图片已成功复制到剪贴板');
    } catch (err) {
        console.error('复制图片失败:', err);
    }
});

读取剪贴板

当用户在我们的网页上执行粘贴操作时，我们如何读取剪贴板里的内容，特别是图片？

关键：获取用户授权

这是最重要的一步。当我们尝试读取剪贴板时，浏览器会主动弹出提示框，请求用户授权。

只有用户点击“允许”，我们的代码才能继续执行。这彻底杜绝了恶意网站在后台偷偷读取用户剪贴板内容的可能。

读取步骤详解

让我们来实现一个监听粘贴事件并处理图片的功能。

1. 监听 paste 事件；
2. 调用 navigator.clipboard.read()：该方法会返回 Promise，解析为一个 ClipboardItem 对象的数组；
3. 检查每个 ClipboardItem MIME 类型；
4. 获取数据 Blob：如果 MIME 中包含我们想要的图片类型（如 "image/png"），我们就可以调用 item.getType() 方法解析为该数据的 Blob 对象；
5. 拿到 Blob 对象后，最常见的做法是使用 URL.createObjectURL() 生成一个临时 URL，并将其显示在 <img> 标签中，或直接上传到服务器。

完整代码示例

假设我们有这样一个 HTML 结构：

<div id="paste-area" contenteditable="true">
  <p>请在这里粘贴你的截图...</p>
</div>
<img id="preview-image" src="" alt="图片预览" style="max-width: 100%; margin-top: 20px;">

对应的 JavaScript 代码如下：

const pasteArea = document.getElementById('paste-area');
const previewImage = document.getElementById('preview-image');

pasteArea.addEventListener('paste', async (e) => {
 // 阻止默认的粘贴行为
  e.preventDefault(); 
 try {
    // 请求读取剪贴板的权限
    const permission = await navigator.permissions.query({ name: 'clipboard-read' });
    if (permission.state === 'denied') {
      throw new Error('剪贴板读取权限被拒绝');
    }

    // 读取剪贴板内容
    const clipboardItems = await navigator.clipboard.read();
    for (const item of clipboardItems) {
      // 检查是否有图片类型
      const imageType = item.types.find(type => type.startsWith('image/'));
      if (imageType) {
        // 获取图片 blob 数据
        const blob = await item.getType(imageType);
        // 创建一个临时的 URL 来预览图片
        const imageUrl = URL.createObjectURL(blob);
        previewImage.src = imageUrl;
        // 在这里，你可以将 blob 上传到服务器
        // uploadToServer(blob); 
        console.log('图片粘贴成功！');
        return; // 处理完图片后即可退出
      }
    }

    // 如果没有图片，可以尝试读取文本
    const text = await navigator.clipboard.readText();
    console.log('粘贴的文本内容:', text);
    pasteArea.innerText = text;

  } catch (err) {
    console.error('粘贴失败: ', err);
    // 如果没有图片，尝试用传统方式读取文本
    const text = e.clipboardData.getData('text/plain');
    if (text) {
        pasteArea.innerText = text;
    }
  }
});

function uploadToServer(blob) {
 const formData = new FormData();
  formData.append('image', blob, 'screenshot.png');

 // fetch('/api/upload', {
 //   method: 'POST',
 //   body: formData
 // }).then(...);
 console.log('正在模拟上传...', formData.get('image'));
}

至此，我们截取一张图到剪贴板，然后在这个区域按下 Ctrl+V，你会看到浏览器弹出权限请求。授权后，图片就会立刻显示在下方！赶紧拿去试试吧。

以上关于浏览器原生剪贴板navigator.clipboard API 安全又强大的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。