Using the Clipboard API in the app iframe

Shopify Apps
1

I just wanted to implement a label action that copies the text field’s value to the users clipboard. It’s very straight-forward:


However this does not work because the embedded app is an iframe and not allowed to access the Clipboard API, so I get an error.

> DOMException: The Clipboard API has been blocked because of a Feature Policy applied to the current document. See [https://goo.gl/EuHzyv](https://goo.gl/EuHzyv) for more details.

Apparently it's relatively straight-forward to allow the iframe access to this API, it just needs an "allow" attribute like

```markup
<iframe src="..." allow="clipboard-write"><iframe>

See https://web.dev/async-clipboard/#permissions-policy-integration.

But as an app developer of course I don’t have control over the iframe’s attributes, so this is a feature request, whether you could consider allowing certain APIs for embedded apps, specifically “clipboard-write”?

13 Likes
2

Having the same problem. Any help on this?

4 Likes
3

I encountered the same problem right now.

Would be awesome if Shopify could support this.

4 Likes
4

Also running into this issue and would love to see support for it :slightly_smiling_face:

3 Likes
5

This would really help our onboarding flow – please fix this! :slightly_smiling_face:

2 Likes
6

Definitely need support for this!

1 Like
7

+1

I have a sinking feeling this thread (like many others that just go ignored and unanswered for months or years by anyone at Shopify) is in a forest where the falling trees don’t make a sound.

8

Afaik it’s possible to work around this by not using the Clipboard API but the older way of interacting with the clipboard: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard#using_execcommand(), which is maybe why this isn’t really a high priority even though it would be very nice to have this working.

9

As this is over a year old and I ran into the same problem I thought I’d share a working snippet I’m using to copy text from an input. If/when shopify make a change, this should gracefully switch to the clipboard api.

function copyToClipboard(id){
        
        var copyText = document.getElementById(id);
        copyText.select();       
        copyText.setSelectionRange(0, 99999); /* For mobile devices */
        
        //iframe blocks clipboard api so fallback
        //onto deprecated method until Shopify update this

        navigator.permissions.query({name:'clipboard-write'}).then(function(result) {
         if (result.state == 'granted') {
            navigator.clipboard.writeText(copyText.value);
         } else  {
            document.execCommand("copy");
         }
        });
    }
3 Likes
10

Another option could be to provide clipboard functionality through AppBridge, though allowing is a way better way to make everything work out of the box

11

“clipboard-write” doesn’t exist in safari and will throw an error :(, guess I’ll stick to execCommand