Copy to clipboard takes a tremendous amount of time

Question

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

And it takes 45s!

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?

Answer 1

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.

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

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.

Code of the glitch:

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") }`;
};

Output:

as rich-text: brokenHey
as raw markup: <meta charset='utf-8'><img src="https://highfalutin-handy-count.glitch.me/" alt="broken">Hey