navigator.clipboard API

Reading from and writing to the user’s clipboard can be both a very useful and dangerous capability. Used correctly and it’s a huge convenience to the user; used dubiously and the user could suffer catastrophic consequences. Imagine a wrong account number or wallet address being copied — yikes! This is why programmatic copy and pasting […]

The post navigator.clipboard API appeared first on David Walsh Blog.


This content originally appeared on David Walsh Blog and was authored by David Walsh

Reading from and writing to the user’s clipboard can be both a very useful and dangerous capability. Used correctly and it’s a huge convenience to the user; used dubiously and the user could suffer catastrophic consequences. Imagine a wrong account number or wallet address being copied — yikes! This is why programmatic copy and pasting needs to be protected, and why the JavaScript Clipboard API requires explicit user permission to allow a website to use it.

To read to the user’s clipboard, you use the readText method:

const clipboardData = await navigator.clipboard.readText();

To write to the user’s clipboard, you use the writeText method:

await navigator.clipboard.writeText('');

The API is obviously very easy to use — each method returns a Promise so you can use async/await or then callbacks. The difficult part is striking the balance of when to use each. Unnecessary reads will feel invasive, and unnecessary writes will significantly dissolve user trust.

When may you want to write to the clipboard? Possibly after the user pastes a seed phrase, password, or credit card number into likewise named form fields.

Sure you can use the numerous libraries available to simulate this API, but know that an official API does exist. And as always, I’m teaching you how to use it — it’s up to you to ensure it’s the right time and tool for the job!

The post navigator.clipboard API appeared first on David Walsh Blog.


This content originally appeared on David Walsh Blog and was authored by David Walsh


Print Share Comment Cite Upload Translate Updates
APA

David Walsh | Sciencx (2021-12-13T07:10:03+00:00) navigator.clipboard API. Retrieved from https://www.scien.cx/2021/12/13/navigator-clipboard-api-2/

MLA
" » navigator.clipboard API." David Walsh | Sciencx - Monday December 13, 2021, https://www.scien.cx/2021/12/13/navigator-clipboard-api-2/
HARVARD
David Walsh | Sciencx Monday December 13, 2021 » navigator.clipboard API., viewed ,<https://www.scien.cx/2021/12/13/navigator-clipboard-api-2/>
VANCOUVER
David Walsh | Sciencx - » navigator.clipboard API. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/13/navigator-clipboard-api-2/
CHICAGO
" » navigator.clipboard API." David Walsh | Sciencx - Accessed . https://www.scien.cx/2021/12/13/navigator-clipboard-api-2/
IEEE
" » navigator.clipboard API." David Walsh | Sciencx [Online]. Available: https://www.scien.cx/2021/12/13/navigator-clipboard-api-2/. [Accessed: ]
rf:citation
» navigator.clipboard API | David Walsh | Sciencx | https://www.scien.cx/2021/12/13/navigator-clipboard-api-2/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.