How do I fix NotAllowedError using Clipboard API on click?

[StevenH]

I'm trying to implement a simple feature where a user can click a button to copy some text from a div to their clipboard. I'm using the Clipboard API with `navigator.clipboard.writeText()`, but it keeps failing with a "NotAllowedError" in the console, even though my code is running from a click handler on the same page. I'm not sure if I'm missing a permission or if there's a specific context requirement I'm overlooking.

[PaulC]

In my experience this kind of write operation needs a secure context and a real user gesture. If you run it after an await or setTimeout, it can throw NotAllowedError even on click.

[AnthonyUW]

Make sure the page is served over https. I ran into NotAllowedError in production until I forced https.

[Isabella_H]

If you're inside an iframe with sandbox restrictions or in a browser extension context, clipboard access can be blocked. I once chased this in a sandboxed iframe and it stumped me until I removed the sandbox.

[MarkZM]

As a quick fallback, people use a hidden textarea and document.execCommand('copy'), but that's deprecated and unreliable.

[Brandon.B]

Are you testing in a sandboxed iframe?