Javascript: Querying clipboard permissions on Firefox does not work

Question

I'm trying to modify the content of the clipboard by executing the "copy" command on a focused DOM element. However, the new content comes from the server, and arrives from a websocket, which is then processed in a callback that does not come from direct user interaction.

Because it wasn't triggered by the user, it is not allowed to do such thing as modifying the clipboard content, as specified in the Firefox's MDM website . The error message is:

document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler.

To overcome this issue, the same page suggest to request permissions to the browser throught navigator.permissions.query():

navigator.permissions.query({name: "clipboard-write"}).then(result => {
  if (result.state == "granted" || result.state == "prompt") {
    /* write to the clipboard now */
  }
});

However, thought the article they use different names for the permissions:

• clipboard-write
• clipboard-read
• clipboardWrite
• clipboardRead

Within the same site, the permissions article shows a browser compatibility table , where it says Firefox supports clipboardWrite from version 51 and clipboardRead from version 54.

The problem is that none of these permissions is working on Firefox (I'm using Firefox 63). The query callback is never called. I have tried the four permission names without any luck.

To make sure the mechanism was working, I tested other permissions, such as notifications which worked flawlessly (It showed "prompt")

navigator.permissions.query({name: "notifications"}).then(result => {
  alert(result.state)
});

So my question is: Am I doing something wrong when requesting the permissions, or have this permissions changed whatsoever?

Campobello

Strange indeed. The console says: TypeError: 'name' member of PermissionDescriptor 'clipboard-write' is not a valid value for enumeration PermissionName. – Denote

Hi @Nadir, did you manage to find solution to your problem? – Sudor

@Sudor Hello, I could not make it work, so I made the copy request to the server synchronous, thus I was able to do it within an user generated event callback and didnt need to request permissions for it. – Campobello

Thanks @Nadir, I'm trying to do some AES256 encryption/decryption on client side and wanted to make decrypted content available in clipboard, but the API for AES256 is asynchronous and I was hoping there is a way to access clipboard from async function... – Sudor

On the MDN page it says "Note: The clipboard-write permission name is not currently supported in Firefox — only Chromium browsers." That should explain why you're getting an error when trying to request the clipboard-write permission. – Ferroelectric

@Ferroelectric when I tested this, I tried both clipboard-write and clipboardWrite – Campobello

Answer 1

It is intentional, aka. by design in Firefox. They chose to not expose this API to WEB content, only for browser extensions.

See here and more specifically here for your reference:

We do not intend to expose the ability to read from the clipboard (the Clipboard.read and Clipboard.readText APIs) to the web at this time. These APIs will only be usable by extensions...

Cathycathyleen

And the solution is? – Fabrication

There is non I know of. Firefox decided to not expose this API for security reasons. Finding a workaround is territory of exploits/hacks etc. – Cathycathyleen

Answer 2

In Firefox 124.0.1 (and maybe higher) in about:config enable it with dom.events.asyncClipboard.clipboardItem set to true.

Then navigator.clipboard.read() works.

Background: I don't understand the permissions-policy discussion around that (which seems to prevent the feature being released in firefox). Edge is directly asking the user after the navigator.clipboard.read() call.

Acetone