(How) can I use navigator.clipboard.write within a Jira cloud iframe?

Jira Development Jira Cloud
,
1

In direct response to a button click I call this function

  async onClick() {
    const { pingEndpoint } = this.props;

    const button = `<img src="${pingEndpoint}" height="1" width="1" style="border: 0px"/>`;
    const blob = new Blob([button], { type: "text/html" });
    const clipboardItem = new window.ClipboardItem({ "text/html": blob });

    try {
      await navigator.clipboard.write([clipboardItem]);
      this.setState({
        copied: true,
      });
    } catch (err) {
      console.error("Could not copy text: ", err);
    }
  }

I get the error:

The Clipboard API has been blocked because of a permissions policy applied to the current document. See https://permanently-removed.invalid for more details.

Looking at the Jira connect iframe I find:

allow-downloads
allow-forms
allow-modals
allow-popups
allow-popups-to-escape-sandbox
allow-scripts
allow-same-origin
allow-top-navigation-by-user-activation
allow-storage-access-by-user-activation

but not

allow-clipboard-write

That means, no clipboard writing within a connect app, right?

2

Hello @m.schmidt,

very late to the party but did you happen to solve this ?

Currently I use something like this but I only need text copying:

export default async function setToClipboard(text) {
  if (navigator.clipboard) {
    try {
      await navigator.clipboard.writeText(text)
      return
    } catch (error) {
      // noop
    }
  }
  try {
    // when not allowed in iframe
    const textarea = document.createElement('textarea')
    textarea.setAttribute('readonly', '')
    document.body.appendChild(textarea)
    textarea.value = text
    textarea.select()
    document.execCommand('copy')
    document.body.removeChild(textarea)
  } catch (error) {
    // eslint-disable-next-line no-console
    console.warn('error)
  }
}

But it looks like a hack and uses a deprecated api (execCommand)

At least it works for text.