navigator.clipboard API

By  on  

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!

Recent Features

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • By
    CSS Ellipsis Beginning of String

    I was incredibly happy when CSS text-overflow: ellipsis (married with fixed width and overflow: hidden was introduced to the CSS spec and browsers; the feature allowed us to stop trying to marry JavaScript width calculation with string width calculation and truncation.  CSS ellipsis was also very friendly to...

  • By
    Implement the Google AJAX Search API

    Let's be honest...WordPress' search functionality isn't great. Let's be more honest...no search functionality is better than Google's. Luckily for us, Google provides an awesome method by which we can use their search for our own site: the Google AJAX Search API.

Discussion

  1. Dan F

    In the compatibility tables on MDN https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText it says for Firefox
    “Writing to the clipboard is available without permission in secure contexts and browser extensions, but only from user-initiated event callbacks”

    What’s secure contexts in this case? Just https, or some other restrictions?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!