如何解决复制到剪贴板需要大量时间
我有以下代码可以将 ~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(...)
需要这么长时间才能完成是否有原因?是否有关于如何改进这一点的某种建议,或者这只是不是为了复制大量数据?
解决方法
这可能是因为他们在将您的 html 附加到剪贴板之前确实对其进行了清理,因此,例如,如果您的脚本尝试将恶意脚本作为 html 插入,当用户将其粘贴到可编辑的内容中时,它不会被执行元素。
清理 25MB 的 html 确实需要一些时间,但这应该并行完成并且不会阻塞您的 UI。
不幸的是,StackSnippets 沙盒 iframe 不允许使用 Clipboard API,因此在此处 is a glitch project 中您可以看到输入确实已被清理。
故障代码:
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。