javascript - 复制到剪贴板需要大量时间

Question

我有以下代码将 ~25MB 的数据复制到剪贴板:

// star time after populating HTML and Text
const start_time = new Date().getTime();
navigator.clipboard.write([
    new ClipboardItem({
        "text/html": new Blob([html], {
            type: "text/html",
        }),
        "text/plain": new Blob([text], {
            type: "text/plain",
        }),
    }),
]).then(() => {
    // end time after async clipbaord api method is completed
    const end_time = new Date().getTime();
    console.log("writing to clipboard : DONE in", (end_time - start_time) / 1000, "s");
});

它需要45秒! clipboard.write(...) 有什么原因吗？需要这么长时间吗？是否有某种关于如何改进这一点的建议，或者这只是不意味着复制大量数据？

Answer 1

这可能是因为他们在将其附加到剪贴板之前确实对您的 html 进行了清理，因此，例如，如果您的脚本尝试将恶意脚本作为 html 插入，则当用户将其粘贴到内容可编辑元素中时，它不会被执行。
清理 25MB 的 html 确实需要一些时间，但这应该并行完成，而不是阻塞你的 UI。
不幸的是 StackSnippets 沙盒 iframe 不允许剪贴板 API，所以这里 is a glitch project您可以在其中看到输入确实经过 sanitizer 。
故障代码:

btn.onclick = (evt) => {
  const dangerous_content = `<script>alert("I'm bad");<\/script><img src="" onerror="alert('Me too')">`;
  navigator.clipboard.write([
    new ClipboardItem({
      "text/html": new Blob([dangerous_content, "Hey"], { type: "text/html" })
    })
  ]);
};
document.onpaste = (evt) => {
  log.textContent = `raw "text/html" data from paste event: 
${ evt.clipboardData.getData("text/html") }`;
};

输出:
作为富文本: brokenHey作为原始标记: <meta charset='utf-8'><img src="https://highfalutin-handy-count.glitch.me/" alt="broken">Hey