Why can't I copy text to the clipboard from within a Shopify App Bridge modal?

[etssoft07]

I'm building an embedded Shopify app using App Bridge and Polaris. I'm showing some content inside a modal opened via App Bridge Modal, and I want to allow users to copy text to the clipboard (e.g., with a "Copy" button).

However, navigator.clipboard.writeText() doesn't work inside the modal, and I can't access DOM elements directly to use document.execCommand('copy') either — likely because the modal is rendered outside of my iframe.

Strangely, this works fine in Chrome, but fails silently or throws a permission error in Firefox, even though the copy action is triggered directly by a user click event.

Is there any reliable way to copy text to the clipboard from within a modal launched by Shopify App Bridge — especially in Firefox?

[etssoft07]

Thank you for the explanation — I’ve already implemented the approach you suggested using postMessage API.

Specifically:

• The modal (Shopify-hosted iframe) sends a postMessage to my embedded app iframe when the user clicks the “Copy” button.

• My embedded app listens for this message and calls navigator.clipboard.writeText() directly inside the event handler.

However, this still fails in Firefox with the following error: "Uncaught (in promise) DOMException: Clipboard write was blocked due to lack of user activation."

This happens because Firefox requires clipboard access to be triggered by a user gesture within the same DOM context — and in this case, the user interaction happened inside the modal iframe, while the clipboard API is invoked inside the embedded app iframe.

So even though everything works perfectly in Chrome, Firefox blocks it due to stricter cross-context user activation rules.

Unless the clipboard call is made directly inside the same iframe where the user clicked, it won’t work in Firefox.