复制到剪贴板需要花费大量时间 [英] Copy to clipboard takes a tremendous amount of time

问题描述

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

I have the following code to copy ~25MB of data to the clipboard:

// 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(...)需要花费这么长时间吗?是否有某种建议可以改善这一点，或者这并不意味着要复制大量数据?

Is there a reason why the clipboard.write(...) takes so long to do? Is there some sort of recommendation for how to improve this, or is this just not meant to copy a lot of data?

推荐答案

这可能是因为他们确实在将HTML附加到剪贴板之前对HTML进行了清理，因此，例如，如果您的脚本尝试将恶意脚本作为HTML插入，则不会当用户将其粘贴到内容可编辑的元素中时不会执行.

That's probably because they do sanitize your html before appending it to the clipboard, so that if for instance your script tries to insert nefarious scripts as html, it doesn't get executed when the user will paste it in a content-editable element.

对25MB的html进行消毒确实需要一些时间，但这应该并行进行，而不会阻塞您的UI.

Sanitizing 25MB of html takes some time indeed, but that should done in parallel and not block your UI.

很不幸，StackSnippets沙盒iframe不允许使用剪贴板API，因此此处是一个小故障项目您可以在其中看到输入的内容确实经过了消毒.

Unfortunately StackSnippets sandboxed iframes don't allow the Clipboard API, so here is a glitch project where you can see the input is indeed sanitized.

故障代码:

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
作为原始标记:<元字符集='utf-8'>< img src =" https://highfalutin-handy-count.glitch.me/"alt =破碎的">嘿

这篇关于复制到剪贴板需要花费大量时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！