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
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    Detect DOM Node Insertions with JavaScript and CSS Animations

    I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the deprecated DOM Events API.

Incredible Demos

  • By
    CSS Selection Styling

    The goal of CSS is to allow styling of content and structure within a web page.  We all know that, right?  As CSS revisions arrive, we're provided more opportunity to control.  One of the little known styling option available within the browser is text selection styling.

  • By
    Chris Coyier’s Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it's damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

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!