Explaining the copy-paste magic trick

Earlier this week, I hit Hacker News's frontpage with a technical magic trick.

HN users were surprised, impressed, and paranoid. Maybe a little too paranoid, in classic HN fashion.

If you haven't yet, you can test it out here (desktop Chrome only). Once you're done, you may be curious about the details.

How does it work?

In order to understand the magic, let's first go over the flow:

1. When a user visits the site, they can click a card to have it copied to clipboard
2. They paste it in an input field to verify its value
3. They open a link to Google docs
4. They paste in their Google doc, and they get a Joker card instead, which tells them to try pasting in their URL bar
5. Pasting in their URL bar gives them a link directly to my Twitter account

And now, the details.

This trick was made possible with the ClipboardItem constructor, part of the Clipboard API in Javascript. This constructor allows you to copy text programatically. But it's not only plain text—you can also copy rich text, the kind with styles and formatting that you might find in a fancy word doc.

Of course, when you're pasting rich text into an input field that doesn't support it (like a URL bar), you want to fall back to plain text. This works by the receiving application pulling the requested MIME-type from your pasteboard—and not simply by converting copied rich text to plain text.

This means that we can populate both a rich text value and a plain text value in the pasteboard, and they don't have to have the same data!

So, walking through the steps in detail:

• When a user clicks the card to copy it to clipboard, we copy a regular card to clipboard (in plain text), and a joker (in rich text). The joker is only shown if a user pastes into another application without going to a later step (this is unexpected).
• When the user pastes into the input field, they paste the plain text data, which is the card they copied—a digital equivalent to when magicians say "now, memorize your card".
• When the user clicks the link to navigate to Google Docs, we perform a sleight-of-hand trick, and actually populate the pasteboard again — this time, we copy my twitter URL to clipboard in plain text, and a joker which tells the user to paste into their URL bar, in rich text.
• When the user pastes in Google Docs to verify their card, they see the joker, telling them to paste in their URL bar
• When the user pastes in their URL bar, they get my twitter link, a URL they don't remember copying! This part feels unexpectedly surprising, as it seems like your clipboard was updated while you were on a trusted site, Google docs.
• Now that the user is convinced that I post interesting content, and is already on my twitter page with the follow button a single click away, they follow me. (I gained 1/3 of my twitter followers in the past from this magic trick alone, over the past few days!)

It's not so magic anymore, but I hope you enjoyed the trick, and the explanation!