Clipboard API被权限策略阻止问题排查及解决方案咨询

问题描述 #

尝试实现网页截图并复制到剪贴板，使用Clipboard API时出现错误：

NotAllowedError: The Clipboard API has been blocked because of a permissions policy applied to the current document

使用的JS代码：

function performAction() {
    const snapshotCreator = () => {
      return new Promise((resolve, reject) => {
      try {
        html2canvas(document.body, { scale: window.devicePixelRatio })
          .then((canvas) => {
            canvas.toBlob((blob) => {
              resolve(blob);
              console.log("Message came");
            });
          })
          .catch((error) => {
            reject(error);
          });
      } catch (e) {
        reject(e);
      }
    });
  };

  snapshotCreator().then((blob) => { 
    console.log(window.navigator.clipboard + "Clipboard");
    window.navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })])
      .then(() => {
        document.getElementById('result').innerText = 'Image successfully copied to clipboard';
      })
      .catch((error) => {
        console.log("Bara");
        document.getElementById('result').innerText = 'Error copying image to clipboard: ' + error;
      });
  });
}

配套HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Your Page Title</title>
</head>
<body>
    <div id="result">Result will be displayed here.</div>
    <button onclick="performAction()">Click me</button>
</body>
</html>

在在线代码平台测试时也出现同样错误。

问题原因 #

出现这个错误的核心原因有以下几点：

1. 权限策略限制：当前页面的Permissions Policy配置禁止了剪贴板写入操作，部分在线代码平台会默认设置clipboard-write权限为禁用。
2. 环境限制：Clipboard API的write方法仅允许在HTTPS环境（或localhost本地环境）中使用，非安全HTTP环境会被浏览器阻止。
3. 上下文要求：剪贴板操作必须在用户主动触发的事件上下文中执行（比如点击、按键事件），虽代码绑定在按钮点击事件里，但如果Promise异步操作意外脱离上下文，也会触发权限错误。

解决方案 #

1. 配置Permissions Policy（自有服务器/本地环境） #

如果是自己控制的页面，添加Permissions Policy允许剪贴板写入：

• 方式一：通过HTTP响应头设置

  Permissions-Policy: clipboard-write=*
  

• 方式二：在HTML的<head>中添加meta标签

  <meta http-equiv="Permissions-Policy" content="clipboard-write=*">
  

2. 切换到支持的运行环境 #

将代码部署到HTTPS服务器，或者在本地使用localhost运行（localhost被浏览器视为安全环境，HTTP也可正常使用Clipboard API）。

3. 在线平台的替代方案 #

如果无法修改在线平台的权限策略，可以使用传统的（虽已废弃但仍兼容多数浏览器）execCommand('copy')方法作为替代：
修改后的代码示例：

function performAction() {
  const snapshotCreator = () => {
    return new Promise((resolve, reject) => {
      try {
        html2canvas(document.body, { scale: window.devicePixelRatio })
          .then((canvas) => {
            resolve(canvas);
          })
          .catch((error) => {
            reject(error);
          });
      } catch (e) {
        reject(e);
      }
    });
  };

  snapshotCreator().then((canvas) => {
    // 创建隐藏的可编辑div
    const tempDiv = document.createElement('div');
    tempDiv.contentEditable = true;
    tempDiv.style.position = 'fixed';
    tempDiv.style.left = '-9999px';
    tempDiv.style.top = '-9999px';
    document.body.appendChild(tempDiv);

    // 将canvas转为图片插入div
    const img = document.createElement('img');
    img.src = canvas.toDataURL('image/png');
    tempDiv.appendChild(img);

    // 选中图片并复制
    const range = document.createRange();
    range.selectNodeContents(tempDiv);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
    
    try {
      document.execCommand('copy');
      document.getElementById('result').innerText = 'Image successfully copied to clipboard';
    } catch (error) {
      document.getElementById('result').innerText = 'Error copying image to clipboard: ' + error;
    } finally {
      // 清理临时元素
      document.body.removeChild(tempDiv);
      selection.removeAllRanges();
    }
  });
}

内容的提问来源于stack exchange，提问作者David