[Web Outlook] Task Pane addin does not support Clipboard API

[Aidam1]

Provide required information needed to triage your issue

I would like to use Clipboard API to copy text on button click in web Outlook taskpane addin. However, it is currently blocked because the containing iframe doesn't have necessary permissions.

Your Environment

• Platform [PC desktop, Mac, iOS, Office on the web]: Office on the web
• Host [Excel, Word, PowerPoint, etc.]: Outlook
• Operating System: Windows 10
• Browser (if using Office on the web): Google Chrome Version 91.0.4472.124

Expected behavior

The Clipboard API is allowed and I'm able to use it.

Current behavior

The addin is in an iframe without necessary permissions, it is currently impossible to copy text through Clipboard API. After I try to use it, the console writes:
Uncaught (in promise) DOMException: The Clipboard API has been blocked because of a permissions policy applied to the current document. See https://goo.gl/EuHzyv for more details.

The solution would be to add more permissions to the iframe by passing clipboard-write permission to iframe. More info for example here: https://web.dev/async-clipboard/#permissions-policy-integration

Steps to reproduce

1. In any react component, write onClick prop: onClick={() => {navigator.clipboard.writeText(this.state.textToCopy)}}
2. Go to pane and try to click on the component

[exextoc]

Thanks for reaching out and mentioning about this problem. We are looking into this for "Outlook Web" (OWA).

Does your code for clipboard in add-in code work in "Outlook Desktop" (Windows) and "Outlook Mac" (MacOS)?

[Aidam1]

I currently don't have an option to test it on MacOS, but it is working in "Outlook Desktop" (Windows).

[exextoc]

Apologies for late follow-up on this.

Thanks Aidam1 for reporting this issue. Currently the feature: Clipboard API access from iframe, you requested, is not a part of the product. We track Outlook add-in feature requests on our Tech Community Page (https://techcommunity.microsoft.com/t5/microsoft-365-developer-platform/idb-p/Microsoft365DeveloperPlatform). Please submit your request there and choose the appropriate label(s). Feature requests on Tech Community are considered, when we go through our planning process.

Meanwhile, please check if you want to use deprecated API document.execCommand("copy") or npm package 'clipboard' for your use-case.

[Aidam1]

Thank you for the suggestion. I have created the idea on Tech Community Page: https://techcommunity.microsoft.com/t5/microsoft-365-developer-platform/outlook-addin-enable-clipboard-api/idi-p/2626853

[pietrofxq]

I also need to use this feature and stumbled upon this. The fix is simply adding a new value to the allow iframe attribute but has to be done on Microsoft side. Can we reopen this?

[DxDen1004]

Same here, we were trying to develop a simple internal add-in to archive email messages links but hey, no way to use the clipboard APIs, nor many other APIs to be precise. At this very moment web Add-in development is very very limited.