I have a cross-origin <object data="{my-cross-origin-url}">
container that contains a copy to clipboard button for an email address with the code:
navigator.clipboard.writeText("[email protected]")
Clicking on the copy to clipboard button works in Safari on my Mac (I can successfully click to copy and then paste the email value). Sadly, it fails on Chrome! The error message is as follows in my Chrome console:
[Violation] Permissions policy violation: The Clipboard API has been blocked because of a permissions policy applied to the current document. See [URL_removed because Stack_Overflow wouldn’t allow it, it’s below] for more details.
https://www.chromium.org/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes/
The thing is, it’s all references to iframes in that link and I do not use iframes, but a HTML object
tag with data
attribute value that refers to a site that is cross-origin (I own both the parent site and the one that is being embedded using the object
tag). I don’t see anywhere that I can add an allow
attribute on the object
tag and am reluctant to lest I break things in Chrome and Safari.
How can I get copy to clipboard working in my cross-origin embed with HTML object
tag?