HTML5 替代基于 Flash 的 ZeroClipboard 以将数据安全复制到剪贴板？答案

【问题标题】：HTML5 alternative to flash-based ZeroClipboard for safe copying of data to clipboard?HTML5 替代基于 Flash 的 ZeroClipboard 以将数据安全复制到剪贴板？
【发布时间】：2012-05-30 13:40:15
【问题描述】：

随着 Flash 在许多环境（iPhone、Android、IE10 等）中的淘汰，是否有任何新的解决方案即将出现在任何浏览器中，允许在不安装 Flash 的情况下将信息安全复制到剪贴板？

到目前为止，我一直在使用ZeroClipboard，但我担心更多没有 Flash 的观看者会破坏此功能，我希望尽可能不要依赖 Flash。

【问题讨论】：

Clipboard API 来自W3C WebApps WG，但我不相信其中任何一个已经实现。授予 Web 应用访问用户剪贴板的权限会带来大量安全隐患。
@steveax - 我以前见过。它在任何地方实施吗？我也了解安全隐患，但 Flash 设法找到了一种通过要求用户操作来显示某些功能的可用方法。
cbabhusal.wordpress.com/2015/11/15/…

标签： html clipboard zeroclipboard

【解决方案1】：

原因是自动复制到剪贴板可能非常危险，因此大多数浏览器（IE 除外）* 都很难做到，除非您使用 Flash。

很像您的ZeroClipboard，Clipboard LMCButton 也使用在后台运行的小型 Flash 脚本。

一个常见的解决方案是这样做：

 function copyToClipboard (text) {
     window.prompt ("Copy to clipboard: Ctrl+C, Enter", text);
 }

当其他人 asked the question here 时我从 Jarek Milewski 那里找到的

*是的，我找到了一种适用于 IE 的解决方案，但不适用于大多数现代浏览器，check here。

更新：

据此：https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand Firefox 41+、Chrome 42+ 和 IE 9+ 支持使用 execCommand 进行复制命令。对于 firefox 和 chrome，它只有在被点击等用户操作触发时才会起作用，对于 IE，它会给用户一个警告对话框，询问他们是否允许复制到剪贴板。

【讨论】：

如果我们可以通过 Flash 做到这一点，那么为什么能够通过 HTML5 做到这一点会是一个安全漏洞呢？从剪贴板读取肯定是，但将写入到剪贴板称为安全漏洞似乎有点牵强，因为它需要用户实际将其粘贴到危险的地方。
我同意从剪贴板复制是一个安全问题，但我不认为写到真的是。毕竟，它确实需要用户将其粘贴到某处，然后可能执行另一个操作来实际发送/执行它。我不认为比我在我的网站上写一个文字“请复制'rm / * --recursive'（你知道我的意思），并要求用户执行它。
只是为了完成，然后... :) 如果我们作为 Web 开发人员能够在 Flash 中做某事，那么我不明白为什么我们不应该让自己在 HTML 中做这件事（ 5）太。如果它是一个漏洞，它可能已经存在于 95% 以上的所有浏览器中，所以我们不会打开一个新漏洞，想要利用它的人仍然能够做到，只是在 Flash 中。
如果我之前剪切了重要信息，并且任何网站都可以覆盖我的剪贴板，那将导致我丢失信息。存在安全漏洞。
@freeall 很多用户一开始就根本不安装闪存并避免那些安全漏洞。使其成为标准 HTML5 会将问题强加给每个人，而浏览器供应商实际上非常关心，以免增加安全漏洞。

【解决方案2】：

我知道这个答案来得有点晚，但现在有一个新的现代替代 ZeroClipboard（基于 Flash）。 Clipboard.js 是 2kB 纯 JavaScript 替代方案，无依赖关系。

【讨论】：

具有讽刺意味的是，这个插件不支持移动或桌面 Safari，所以我们不支持 iOS。

【解决方案3】：

我创建了一个名为 clip-j 的纯 JavaScript 解决方案。 Here 是。基本上它的作用是利用document.execCommand('copy'); 和其他一些命令，这样你就什么也看不到了。代码如下：

function clip(text) {   
    var copyElement = document.createElement('input');      
    copyElement.setAttribute('type', 'text');   
    copyElement.setAttribute('value', text);    
    copyElement = document.body.appendChild(copyElement);   
    copyElement.select();   
    document.execCommand('copy');   
    copyElement.remove();
}

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
感谢您的提示！我会解决的。
只有最新的浏览器才支持此功能，更多信息请参见cbabhusal.wordpress.com/2015/11/15/…
为什么这可能是真的，很快最新的浏览器将成为媒介。这是一个简单的解决方案，我承认它领先于时代，但随着时间的推移和更多人更新，它变得更加有用。
如果您使用div（而不是input）并将contentEditable 属性设置为true，您也可以将text/html 复制到剪贴板，从而保持格式.看到这个答案：stackoverflow.com/a/30905277/434742

【解决方案4】：

您可以查看this blog post，深入讨论如何在 HTML5 中使用剪贴板。不幸的是，您仍然无法在单击时便携地复制到剪贴板。但是，对于chrome和firefox，您可以创建一个浏览器扩展，可以授予您的站点访问剪贴板的权限，并且我相信IE会让您复制到剪贴板，但会提示用户授予权限。

更新：

据此：https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand Firefox 41+、Chrome 42+ 和 IE 9+ 支持带有 execCommand 的复制命令。对于 firefox 和 chrome，它只有在由用户操作（如点击）触发时才会起作用，对于 IE，它会给用户一个警告对话框，询问他们是否允许复制到剪贴板。

【讨论】：

【解决方案5】：

要使用 execCommand，您必须首先选择（）页面上的某些内容，因此您不能只是复制最后放入剪贴板的内容。使用这个函数，我将输入文本框的 id 传递给函数并选择（）它，然后执行复制命令。无需添加侦听器或使您的代码进一步复杂化。 document.execCommand() 如果未启用或不支持则返回 false，因此您可以使用 window.prompt 作为备份方法。

function copyToClipboard(id) {
    var blnCopied;
    document.getElementById(id).select();
    blnCopied = document.execCommand("copy", false, null);
    if (blnCopied)
        alert('Link copied to clipboard');
    else
        window.prompt ("Copy to clipboard: Ctrl+C, Enter", jQuery("#"+id).val());
}

使用带有 onclick="copyToClipboard('some_id')" 的标准“a”锚标记

【讨论】：

【解决方案6】：

this question有很好的答案，我选择用这个sn-p：

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

但是，如果您的页面上有 bootstrap-select，$temp.val($(element).text()).select() 行会抛出错误：

小部件只能在选择元素上工作

您可以改用.trigger('select')，如jQuery documentation for .select() 中所述，如下所示：

$temp.val($(element).val()).trigger('select');

【讨论】：