Errors in the console when pasting in a sandboxed iframe and paste does not work

[RambabuPatina]

Description

The 'Paste to Clipboard' option does not paste and showing errors in the console when pasting in a sandboxed iframe

Steps to Reproduce

1. Include the editor in a iframe and include virtual keyboard
2. Copy some text and click on virtual keyboard
3. Click on 'Paste from clipboard'

Actual Behavior

The paste behaviour does not work and shows errors in the console:

[Violation] Permissions policy violation: The Clipboard API has been blocked because of a permissions policy applied to the current document. See https://goo.gl/EuHzyv for more details. Uncaught (in promise) DOMException: Failed to execute 'readText' on 'Clipboard': The Clipboard API has been blocked because of a permissions policy applied to the current document. See https://goo.gl/EuHzyv for more details. at Object.pasteFromClipboard [as fn]

Expected Behavior

Paste from clipboard should work and No error messages

Environment

MathLive version 0.97.1

macOS/Windows, Chrome/Firefox

[arnog]

Does this happen with the current version (0.98.6)?

[RambabuPatina]

Checked with 0.98.6 version, same issue facing. Do we need additional changes to work in the iframe? Thanks in Advance

[RambabuPatina]

Hi @arnog , Any clue on the issue?

[arnog]

Not yet, and I will need to build a project to try to reproduce the problem before I can debug it.

[rkanumola]

Any update @arnog ? One of our releases is based on this. Thanks

[arnog]

It would help if you had a project to share that reproduces the problem.

[gunnarmein-ts]

@rkanumola are you loading the iframe from the same location as the container doc?

[RambabuPatina]

@gunnarmein-ts Do you mean location means the domain? The iframe being loaded from other location. I.e the parent document and the iframe domains are different.

[gunnarmein-ts]

This article: https://stackoverflow.com/questions/61401384/can-text-within-an-iframe-be-copied-to-clipboard mentions: "To use the API in iframes, you need to enable it with Permissions Policy, which defines a mechanism that allows for selectively enabling and disabling various browser features and APIs. Concretely, you need to pass either or both of clipboard-read or clipboard-write, depending on the needs of your app."

<iframe src="index.html" allow="clipboard-read; clipboard-write"></iframe>

Can you try that?