Qt WebAssembly剪贴板

Qt WebAssembly clipboard

Qt WebAssembly剪贴板

Tuesday January 18, 2022 by Lorn Potter | Comments

​2022年1月18日星期二 Lorn Potter | 评论

Clipboard use on desktop platforms is ubiquitous. Most people use it without thinking. Copy, Paste, and Cut keyboard strokes are in-grained into muscle memory. 

在桌面平台上使用剪贴板是无处不在的。大多数人不用思考就使用它。复制、粘贴和剪切键盘操作将以烙印形式存储在肌肉记忆中。

On the web, it can present security issues as someone could read or write to your clipboard without you knowing.

在网络上，它可能会出现安全问题，因为有人可能在你不知情的情况下读写你的剪贴板。

Up until now, Qt for WebAssembly's clipboard was text-only and only within the app itself. Qt 6.3 will have better clipboard support between host and app but also adds copy/pasting of images.

到目前为止，Qt for WebAssembly的剪贴板是纯文本的，并且仅在应用程序本身中。Qt6.3将在主机和应用程序之间提供更好的剪贴板支持，但也增加了图像的复制/粘贴。

WebAssembly is a sandboxed platform like javascript. There are some extra security hurdles in doing some common things such as copy and paste of binary data such as images. One issue is clipboard use between the host platform and the browser sandbox. Allowing the web app to have access to the clipboard in which it could send arbitrary data without the user knowing could be dangerous for the user.

WebAssembly是一个类似javascript的沙盒平台。在执行一些常见的操作（如复制和粘贴二进制数据，如图像）时，存在一些额外的安全障碍。一个问题是主机平台和浏览器沙箱之间的剪贴板使用。允许web应用访问剪贴板，在用户不知情的情况下发送任意数据，对用户来说可能是危险的。

Browsers generally allow clipboard during user-generated events such as when a user makes common key sequences such as [ctrl | command] c - the copy keys.

浏览器通常允许在用户生成的事件期间使用剪贴板，例如当用户生成公共键序列时，例如[ctrl | command]c-复制键。

Qt itself has support for programmatically copying text and binary data such as images and works great on the desktop, but it presents issues for web browsers. There are workarounds, like using a hidden javascript element and the javascript function execCommand to "copy". However, this function has been depreciated. 

Qt本身支持以编程方式复制文本和二进制数据（如图像），在桌面上效果很好，但它会给web浏览器带来问题。有一些变通方法，比如使用隐藏的javascript元素和javascript函数execCommand来“复制”。然而，这一功能已被贬低。

By using the asynchronous Clipboard API and making use of javascript clipboard events where possible, we can bring image clipboard support to Qt WebAssembly. The Clipboard API requires a secure context (https) for full feature use. Among other things, the Clipboard API allows image and arbitrary data to be copied and pasted. Whereas before, only text mime types were supported. 

​通过使用异步剪贴板API并尽可能使用javascript剪贴板事件，我们可以为Qt WebAssembly提供图像剪贴板支持。剪贴板API需要安全上下文（https）才能完全使用功能。其中，剪贴板API允许复制和粘贴图像和任意数据。而以前，只支持文本mime类型。 

This API is of course implemented in the different browsers in different ways. On Firefox, read() and write() are only partially implemented and are hidden behind about:config settings. As well, copy/paste of arbitrary binary data does not seem to be supported and mostly silently fails.

当然，这个API在不同的浏览器中以不同的方式实现。在Firefox上，read（）和write（）仅部分实现，并且隐藏在about:config设置后面。此外，似乎不支持对任意二进制数据的复制/粘贴，并且大多数情况下会以静默方式失败。

Here are the ways browsers support Clipboard API:

以下是浏览器支持剪贴板API的方式：

Firefox 

• write() is available without permission in secure contexts and browser extensions, but only from user-initiated event callbacks.
• write（）在安全上下文和浏览器扩展中未经许可即可使用，但只能从用户发起的事件回调中使用。
• Clipboard API
• 剪贴板API
  • secure context (https or localhost) 
  • dom.events.asyncClipboard
  • dom.events.asyncClipboard.clipboardItem
  • dom.events.asyncClipboard.read
  • dom.events.testing.asyncClipboard

Safari

• Clipboard API
  • secure context    

Chrome

• Clipboard API
  • secure context
  • user permissions
• read() only supports
• read（）支持
  • text/html
  • text/png

Also included in the now merged commit f0be152896471aa392bb1b2b649b66feb31480cc  is a clipboard manual test app that can be used on both desktop and webassembly to test clipboard use.

现在合并的commit f0be152896471aa392bb1b2b649b66feb31480cc中还包括一个剪贴板手动测试应用程序，可在桌面和webassembly上用于测试剪贴板的使用。

You can use the clipboard without a secure https context, but you won't get interaction between the host and web app.

您可以在没有安全https上下文的情况下使用剪贴板，但无法在主机和web应用程序之间进行交互。

This article originally appeared on the authors' blog:

这篇文章最初出现在作者的博客上：

http://qtandeverything.blogspot.com/2022/01/qt-webassembly-clipboard.html