如何从 JavaScript 中获取复制的文本答案

【问题标题】：How to get copied text from JavaScript如何从 JavaScript 中获取复制的文本
【发布时间】：2018-11-03 16:40:56
【问题描述】：

这个问题与another question I asked 有关，但我意识到该问题中的一个附带问题值得单独提问。

使用 JavaScript，我想查看用户从网页复制的内容。当用户粘贴时读取剪贴板内容相当容易：

document.addEventListener("paste", e => {
  let text = e.clipboardData.getData("text");
  alert("pasting text: " + text);
});

这会正确地使用刚刚粘贴的任何内容创建警报。但是，当用户复制时，获取剪贴板数据更加困难。

方法一（无效）

document.addEventListener("copy", e => {
  let text = e.clipboardData.getData("text");
  alert("copying text: " + text);
});

这会警告“正在复制数据：”，但后面没有文字。那是因为getData 方法返回""（空字符串）。我的理解是，当您执行粘贴以外的任何操作时，网站读取您的剪贴板会被认为是一个太大的安全问题。

方法 2（有效，但有弹出窗口）

document.addEventListener("copy", () => {
  navigator.clipboard.readText().then(text => alert("copied text: " + text));
});

这可行，但在发出警报之前，它会创建一个弹出窗口，请求网站允许读取剪贴板。我宁愿没有这个弹出窗口。

方法 3（似乎可行，但似乎不对）

document.addEventListener("copy", () => {
  let text = window.getSelection().toString();
  alert("copying text: " + text);
});

这似乎符合我的要求。允许这样做似乎很奇怪，但方法 1 不允许。

我有几个问题：

如果方法 3 允许，为什么不允许方法 1？似乎方法 1 可以提供与方法 3 相同的信息，而且会更方便，也更安全。
在任何情况下，方法 3 会提供与方法 2 不同的结果（就text 变量而言，而不是弹出行为）？
使用方法 3 是否还有其他我没有考虑的缺点？

此时，我只关心 Google Chrome 或 Chromium 上下文中的这些答案，而不关心其他浏览器。我们将不胜感激任何这些问题的答案。

【问题讨论】：

我认为方法一可以从您的剪贴板获取任何信息，也可以从其他站点或程序获取信息，而方法三只能从您的站点获取信息。也许这就是方法一不起作用的原因。虽然没有深入研究文档来检查这一点，所以我可能错了。

标签： javascript copy clipboard

【解决方案1】：

tl;dr 如果您真的认为对用户不诚实您正在做的事情是合理的，请使用方法 3 - 这是一个很好的解决方法，尽管许多人可能认为这是一种利用。

查看 W3 规范 (https://www.w3.org/TR/clipboard-apis/#Cases)，我们可以了解为什么这些事件（以及仍在开发的 API）首先存在的原因。具体来说，copy 可以让您更改在您的目标不是用户实际希望在剪贴板上结束的情况下复制的内容，而 paste 的存在是为了让您处理将该数据传输到您的应用程序。

知道了这一点，我们可以得出一些结论：

方法 1：规范没有详细介绍剪贴板的安全性，只是表示实现应该能够保护用户。因此，复制的数据对您隐藏，我并不感到惊讶。这似乎是实施者的明智决定。更重要的是，看看规范规定的算法，很可能剪贴板中还没有数据，因为此事件的目的是允许您设置什么应该结束他们的。
方法2：这似乎是作者的意图。如果应用程序要访问剪贴板，它应该真正获得用户的许可。尤其是因为剪贴板可能包含页面外部的数据。
方法 3：这是一种利用，但很难看到它不起作用的情况。从实现者的角度来看，很难阻止——因为他们必须检查事件委托函数的调用；与“不让数据随时可用”相比。可以说，它也很安全足够，因为您可以访问的唯一信息是您自己的文档中已经存在的信息。

【讨论】：