Using the Clipboard API in the app iframe

simonhaenisch
Tourist
8 0 11

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

 

<TextField
    readonly
    value={url}
    label="URL"
    labelAction={{ content: "Copy", onAction: async () => navigator.clipboard.writeText(url)}}
/>

 

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 for more details.

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

 

<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"?

JeffKelley-rh
New Member
1 0 4

Having the same problem. Any help on this?

HerculesApps
Tourist
8 1 8

I encountered the same problem right now.

Would be awesome if Shopify could support this.

alexwhitaker
New Member
1 0 3

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

clayschubiner
New Member
1 0 2

This would really help our onboarding flow -- please fix this!  

dgattey
New Member
1 0 1

Definitely need support for this!

sinejoe
Shopify Expert
57 0 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.

0 Likes
simonhaenisch
Tourist
8 0 11

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#u..., which is maybe why this isn't really a high priority even though it would be very nice to have this working.

0 Likes
rapole74
New Member
1 0 0

Yes I agree with the post and looking to use the same API in the app iframe you can see here theblog in which they mentioned the same thing.

0 Likes