This content originally appeared on David Walsh Blog and was authored by David Walsh
Interacting with a user’s host clipboard is something web developers have wanted for both good and evil purposes. On the good side, it’s nice to allow users to easily copy text like wallet addresses or branch names; for evil, copying malicious text that the user may mistakenly paste into a form and have their funds stolen — and there are probably more evil reasons.
We used to use the document.execCommand('copy') to accomplish this task, but it was unreliable. The navigator.clipboard API provides async readText and writeText methods for managing clipboard data. Let’s have a look how it works!
// Write to clipboard
document.body.addEventListener(
"click",
(e) => {
await navigator.clipboard.writeText("Yo")
}
)
// Read from clipboard
document.body.addEventListener(
"click",
(e) => {
const text = await navigator.clipboard.readText()
}
)
The readText and writeText methods are easy enough to use, but you can’t execute this code whenever you’d like, due to browser security protocols. Oftentimes you need to use this code inside of an event listener, as a result of an action taken by the users.
I’m glad we now have an API that’s async and more reliable than the gross execCommand hack of the old days. Still, I sometimes wonder how this could be exploited, because after all, you can still put any text there. Let’s all do each other a solid though — let’s use this API for good, not evil!
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
David Walsh | Sciencx (2021-01-11T10:45:31+00:00) navigator.clipboard API. Retrieved from https://www.scien.cx/2021/01/11/navigator-clipboard-api/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.