SOLVED

Unable to use Clipboard API in custom Teams App

%3CLINGO-SUB%20id%3D%22lingo-sub-3273665%22%20slang%3D%22en-US%22%3EUnable%20to%20use%20Clipboard%20API%20in%20custom%20Teams%20App%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3273665%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIm%20trying%20to%20develop%20a%20teams%20app%2C%20and%20an%20integral%20part%20of%20the%20app%20is%20to%20be%20able%20to%20copy%20a%20string%20to%20the%20clipboad%20of%20the%20user.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20app%20works%20fine%20when%20viewed%20in%20the%20browser%20(not%20as%20an%20embedded%20page%20within%20the%20teams%20enviroment)%2C%20but%20while%20using%20it%20in%20teams%20the%20following%20error%20appears%3A%26nbsp%3B%3C%2FP%3E%3CPRE%3EMicrosoft.JSInterop.JSException%3A%20The%20Clipboard%20API%20has%20been%20blocked%20because%20of%20a%20permissions%20policy%20applied%20to%20the%20current%20document.%20%3CBR%20%2F%3ESee%20https%3A%2F%2Fpermanently-removed.invalid%20for%20more%20details.%3C%2FPRE%3E%3CP%3ESo%20is%20there%20any%20way%20to%20update%20the%20clipboard%20permission%20policy%20within%20our%20organization%3F%3C%2FP%3E%3CP%3EI%20really%20can't%20seem%20to%20find%20any%20documentation%20regarding%20the%20Clipboard%20policy%20for%20teams%20%2F%20365.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EContext%3A%3C%2FP%3E%3CP%3EThe%20app%20is%20built%20with%20Blazor%20and%20TeamsFx%20sdk.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-3273665%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EAdministrator%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EMicrosoft%20Teams%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3278818%22%20slang%3D%22en-US%22%3ERe%3A%20Unable%20to%20use%20Clipboard%20API%20in%20custom%20Teams%20App%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3278818%22%20slang%3D%22en-US%22%3ECould%20you%20please%20confirm%20if%20this%20helped%20you%20in%20any%20way%3F%20Are%20you%20still%20facing%20the%20issue%3F%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3275016%22%20slang%3D%22en-US%22%3ERe%3A%20Unable%20to%20use%20Clipboard%20API%20in%20custom%20Teams%20App%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3275016%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1350332%22%20target%3D%22_blank%22%3E%40OliKIspan%3C%2FA%3E%26nbsp%3B-%20Could%20you%20please%20refer%20below%20doc%20and%20check%20if%20it%20helps%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FClipboard_API%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EClipboard%20API%20-%20Web%20APIs%20%7C%20MDN%20(mozilla.org)%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3310524%22%20slang%3D%22en-US%22%3ERe%3A%20Unable%20to%20use%20Clipboard%20API%20in%20custom%20Teams%20App%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3310524%22%20slang%3D%22en-US%22%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1350332%22%20target%3D%22_blank%22%3E%40OliKIspan%3C%2FA%3E%20-%20If%20above%20answer%20is%20helpful%2C%20could%20you%20please%20accept%20it%20for%20more%20visibility%3F%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3344669%22%20slang%3D%22en-US%22%3ERe%3A%20Unable%20to%20use%20Clipboard%20API%20in%20custom%20Teams%20App%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3344669%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1096313%22%20target%3D%22_blank%22%3E%40ChetanSharma-msft%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20does%20unfortunately%20not%20work%2C%20I'm%20pretty%20sure%20the%20problem%20is%20that%20teams%20doesn't%20allow%20the%20Clipboard%20API%20within%20the%20embedded%20page%20container.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAnd%20i%20think%20there%20currently%20is%20no%20way%20to%20get%20that%20permission.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3355512%22%20slang%3D%22en-US%22%3ERe%3A%20Unable%20to%20use%20Clipboard%20API%20in%20custom%20Teams%20App%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3355512%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1350332%22%20target%3D%22_blank%22%3E%40OliKIspan%3C%2FA%3E%26nbsp%3B-%3CBR%20%2F%3E%3CSPAN%3ETechnically%2C%20this%20would%20be%20supported%20by%20the%20browser%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fw3c.github.io%2Fwebappsec-permissions-policy%2F%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%20target%3D%22_blank%22%3EPermissions%20Policy%3C%2FA%3E%3CSPAN%3E%2C%20by%20adding%20an%20option%20to%20the%26nbsp%3B%3C%2FSPAN%3E%3CCODE%20class%3D%22notranslate%22%3Eallow%3C%2FCODE%3E%3CSPAN%3E%26nbsp%3Battribute%20of%20the%20embedded%26nbsp%3B%3C%2FSPAN%3E%3CCODE%20class%3D%22notranslate%22%3Eiframe%3C%2FCODE%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fweb.dev%2Fasync-clipboard%2F%23permissions-policy-integration%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%20target%3D%22_blank%22%3Ehttps%3A%2F%2Fweb.dev%2Fasync-clipboard%2F%23permissions-policy-integration%3C%2FA%3E%3CBR%20%2F%3EPlease%20also%20refer%20similar%20thread%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Finstructure%2Fcanvas-lms%2Fissues%2F1767%3Fmsclkid%3D39929f8ad0f411ec8e74e4b807363be9%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EClipboard%20API%20has%20been%20blocked%20because%20of%20a%20Feature%20Policy%20applied%20to%20the%20current%20document.%20iframe%20on%20Chrome%20%C2%B7%20Issue%20%231767%20%C2%B7%20instructure%2Fcanvas-lms%20(github.com)%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
New Contributor

Hi,

 

Im trying to develop a teams app, and an integral part of the app is to be able to copy a string to the clipboad of the user.

 

The app works fine when viewed in the browser (not as an embedded page within the teams enviroment), but while using it in teams the following error appears: 

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

So is there any way to update the clipboard permission policy within our organization?

I really can't seem to find any documentation regarding the Clipboard policy for teams / 365.

 

Context:

The app is built with Blazor and TeamsFx sdk.

5 Replies

@OliKIspan - Could you please refer below doc and check if it helps: Clipboard API - Web APIs | MDN (mozilla.org)

Could you please confirm if this helped you in any way? Are you still facing the issue?
@OliKIspan - If above answer is helpful, could you please accept it for more visibility?
best response confirmed by Prasad_Das-MSFT (Microsoft)
Solution

Hi, @ChetanSharma-msft

 

This does unfortunately not work, I'm pretty sure the problem is that teams doesn't allow the Clipboard API within the embedded page container.

 

And i think there currently is no way to get that permission.

 

@OliKIspan -
Technically, this would be supported by the browser Permissions Policy, by adding an option to the allow attribute of the embedded iframe.
https://web.dev/async-clipboard/#permissions-policy-integration
Please also refer similar thread: Clipboard API has been blocked because of a Feature Policy applied to the current document. iframe o...