Show HN: I Made a Magic Trick | Hacker News Reader

Show HN: I Made a Magic Trick

cyrusroshan.com

165 pointscroshan81 comments

After Firefox mobile pasted my previous clipboard contents into the textbox in step 2, I thought "man, that's damn good clipboard phishing and you got this audience real good ;)"

Exact same reaction here. I felt a little embarrassed about being phished so easily.

A clever way to get a Twitter follower :) You win!

BTW we use a similar mechanism at websktop.com (online bookmarks manager), when you copy icons:

- if pasted into our app, all bookmark properties are preserved (text/html + "data- " attribute)

- if pasted into web app like Slack, you get a nice HTML-formatted unordered list of URLs with titles (text/html)

- if pasted into text editor, you get a simple bullet-point list (text/plain)

Unfortunately handling other MIME types gets troublesome. Still, you can do a lot of cool stuff with just text/plain & text/html.

Your product is great! Is it possible to make other media uploadable to folders? I.e. I could have a folder with bookmarks, pdf's, videos, etc.

To follow up I would love to be able to group ALL of the info pertaining to a subject.

> Your product is great!

Great to hear, thanks!

> Is it possible to make other media uploadable to folders?

We thought about it before but we've de-prioritized it in favor of collaborative-editing features. But I totally understand your use-case. It would be a great addition to our product. Stay tuned! :)

Now way I'm opening a new Google Doc. I'm just too paranoid!

I tried pasting the text in notepad anyway. :)

Also, in the last page, the emoji in the middle looks like a square with a question mark in my (old) computer.

Fair enough! If you have a Mac, you can try the TextEdit tool (which also supports rich text), as an alternative to Google Docs.

Thanks for the tip! I used Notes on iOS thanks to your comment!

I guess this is supposed to be some Jabbascript trickery, but for me, a 'paste' action in the second text field just yields... blankness...

Which is a pretty good trick, I have to admit, exposing the nothingness of life. Kudos!

Yeah sadly it was the same for me (Firefox). I was hoping for a cool trick.

Me too. Attempting to paste anywhere else does the same, as a reflection of the inescapable futility of existence.

Or it could just be that I'm using Firefox? Seems to work for me in Chrome. :)

I use firefox and when I pasted my previous clipboard I figured the "trick" was getting my clipboard.

Just checked... nothing goes over the wire when you paste, at least.

Seems the error is:

*Uncaught (in promise) ReferenceError: ClipboardItem is not defined*

I got

    y+dy, x+dx

which... um... was the contents of my clipboard before I attempted the trick. Probably firefox doing the right thing in a private session.

Hi HN! This weekend, I made a magic trick that you can try out in your browser.

Works best on desktop. Also, for those who don't like it, Google Docs not required--JIRA comments or most other WYSIWYG editors will also work.

Hope you enjoy it!

It worked, and I thought this was cool. To save people time, it would be great if you gave an explainer on how it works xD

Fair point!

The way it work is this: you can copy multiple filetypes to the clipboard. So here, I copy a "text/html" and a "text/plain". When you paste to Google docs, it reads "text/html", and outputs a div that I've reconstructed to look like a joker card. When you paste to most other places (your address bar, a `<textarea>` element, terminal, etc.,), you get the plaintext fallback. So you can have two entirely different outputs, based on where you paste!

MDN surprisingly has no examples/API on this (the only time I've found it to be the case), so I instead link you w3c for reference: https://w3c.github.io/clipboard-apis/#clipboarditem

That's really cool - I did not know that; and thank you for sharing!

Could do something with a text/image flip as well?

Here you go: https://developer.mozilla.org/en-US/docs/Web/API/ClipboardIt...

Also note that the ClipboardItem API doesn't work in Firefox unless specifically enabled :^(

I guess I'm okay with that, considering the API could be used for things way less fun than your magic trick

Thanks! After I wrote that, I was thinking "more likely I missed it, than that this is the _one_ example where it doesn't exist" :P

This explanation just made things so much cooler. I wasn't aware of the clipboard api. (Since I never needed to use it)

In my experiment, I assumed that you did another "copy" at some point which printed the twitter URL. I came to this assumption when I pasted into Sublime Text and still saw my card, but pasting into the Address field changed the output to the twitter URL.

Kudos! This was pretty cool!

Clever! I thought I recognized that name from somewhere :wave:

Nice work, I had no idea about this.

MS Word also works :)

Doesn't work in firefox?

Works great on iPhone. Just use Notes as the last step.

Very fun! If you wanted to add one more level of misdirection, the first cards could be textarea that you have to select with your mouse and hit ctrl-c to copy ;-)

This would hide a bit of the method for the twitter reveal.

-Seth

(I also make online magic tricks magicseth.com/animal )

And this may not be the effect you are going for, but you could make the final twitter link go to a specific tweet, where you say "I was hoping you would copy the 3 of diamonds!" and it would be right :-)

This doesn't seem to work in Firefox, tale as old as time.

This (https://www.d52.io) is a variation which does work in Firefox. Trust me!

I'm so disappointed, you win.

I can't believe you've done this.

I click on a card, hit "paste" in the window, and get text I've previously copied.

I'm guessing it's not working ... it's certainly not doing what I expect, even at that stage.

Hmm. Guessing you're trying it on Android? It's relying on the navigator.clipboard API, and generally the experience is not good on mobile

Nope

Firefox 99.0 (64-bit) for Ubuntu canonical - 1.0

    $ lsb_release -d
    Description: Ubuntu 20.04.4 LTS

    $ cat /etc/debian_version 
    bullseye/sid

I'm having the same issue on Firefox 99 on Linux (NixOS).

Agh. Turns out Firefox doesn't support it, my bad! Safari and Chrome work fine, but I'm guessing that's not an option for many Linux users. Sorry!

Firefox 101.0a1 (2022-04-22) (64-bit) says:

> Uncaught (in promise) ReferenceError: ClipboardItem is not defined

I have the same issue, Firefox 99 on Windows

Demonstrating how easy it is to get someone to disclose their clipboard contents to any web page that asks? ;) Not working for me either, but it was surprising to see my previous copied text.

Same...was just browsing stack overflow for positive mod, so I got

"return (i % n + n) % n;"

heh

Same, doesn't work for me on both Firefox on Desktop (Windows) and Android.

Didnt work for me. Firefox on MacOS

So obviously just as we click on the "new Google Docs"-link the JS-function

onMouseDown: function() {li(si({withAddtlText: !0}), "https://twitter.com/cyrusroshan")}

gets called, which overwrites the clipboard.

I didn't spend any time looking at the obfuscated functions li and si, but why does this have to be in a 14,000 line Javascript? Isn't writing something to the clipboard a regular html function? https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

You didn't do the full trick. Paste into the URL bar for a different behaviour.

I tried it. Even though a magician never shares (excepting Penn & Teller) want an explanation though..

It seems to be pasting different things all over the place. I'm not sure how the "google doc card" past to just pasting a url thing happened..

Haha, now that part is just sleight-of-hand. When you click (technically, mousedown) on the google doc link, we copy a new item to the pasteboard, so now instead of {"html": joker_image, "plaintext": card_you_picked}, it's {"html": joker_image_with_url_paste_hint, "plaintext": twitter_url}.

For how you can save multiple mime types in the same paste entry from javascript, the w3c draft is: https://w3c.github.io/clipboard-apis/#clipboarditem

Thanks. So its loaded and ready to go by the time you click the google doc link.

Not sure what it is supposed to do

0. You visit a webpage with expectation to see a magic trick.

1. When you click on a card, there is no copying involved. But it knows on what card you clicked.

2. Pages asks you to paste the card you think you have in clipboard. You press Ctrl+V, page receives content of your clipboard and instantly replaces textarea content with card you clicked on. This makes you think that you have that card in your clipboard. Your real clipboard with your bank password you used 10 minutes ago is sent to the server.

3. Your clipboard is replaced with different card (adding text to clipboard is allowed and easy in javascript, it's reading clipboard what is forbidden).

4. Pages asks you to open some text editor (e.g. google doc) where you paste the card, seeing new card. This makes you thing that your card was replaced with joker card and it is some kind of lame magic trick.

You missed step 5 where it replaces it with the Twitter URL only when you paste it in the URL bar from Google Docs (but continues to be the card when you paste it in the doc). How does that work?

I didn't paste with a keyboard shortcut, so I had no idea what type of weird anti-performance art this was supposed to be. Thanks for explaining. Needless to say, this didn't work at all for me.

Kiss goodbye to that 20 bitcoin then

Is it working for you with firefox?

If not, maybe you should add a note that firefox is not working, so the ~third(?) of your visitors won't get confused, and you won't just waste their time for nothing.

Before I pasted my clipboard, I checked what I was gonna paste, as this magic trick could be something to steal you clipboard..

It's funny.. I pasted it in a new Pages document.

Instead of giving your clipboard to a proof of concept, you just gave it straight to google.

What makes you think so?

You said you posted it in a "Pages document". Unless I've misunderstood what Pages is, that's Google.

So I tried this on my phone (Android - Bromite browser) and it's not working. But from the comments, I'm guessing that multiple items are copied to the clipboard and one of them is the author's twitter link? :D

I'll try this on my PC to see what the actual trick is. But also looks like that some people have reported that it doesn't work on Firefox.

edit: Typo

Good trick, had me fooled and feeling very paranoid! :D

I appreciate that you took the time to explain how it works in another comment in this thread.

Thank you! Had to implement something related to this at work, and thought "huh... what else can I do with this?" :P

I think the real magic is in the last step, when you're on a generally-trusted 3rd party website (Google docs), and your paste output is different in the doc from the URL.

Didn't work for me on mobile. Just a misformatted version of the queen I clicked on showed up in google docs

Is this a phishing attack? Why does everyone trust OP? @dang this should probably be removed

doesn't seem to work in Firefox :-x

Seems like the ClipboardItem API is currently behind a flag on Firefox: https://developer.mozilla.org/en-US/docs/Web/API/ClipboardIt...

reading from clipboard should be one of those per-page permissions like grabbing video

Blank page on Chromium on android /:

Nice! I had no idea about the doc.new URL

Learning that shortcut was a game changer for me. There’s a similar shortcut for the other google apps too (e.g. sheet.new)

Sorry, but I've already done

    :set content.javascript.can_access_clipboard false

I've got JS disabled, but I've still got dom.event.clipboardevents.enabled set to 'false' in Firefox

Doesn't work on Firefox. Is it so hard to support?

brilliant and i gave you a twitter follow.

Thank you :)

Underwhelming for me.

On my iPhone I opened Google Docs and started a new document, per the instructions, and pasted. It pasted a link to their Twitter.

Maybe Desktop works better?

Doesn't work on Mac Firefox, FWIW

Is the magic trick that after clicking the card to copy, when I go to paste it has magically disappeared? Because I dont get anything.

Edit: copied manually, dont have a Google account, so can't go further.

The magic trick is that when you click the card to copy it to your clipboard you'll end up with two versions of the clipboard.

One will be used when you paste into a rich-text aware editor (like google docs). In this case it happens to be an ascii art of the card you chose.

The other one will be used when you paste to a text-only editor (like your URL bar). In this case it happens to be the OP's author's twitter URL.

IT'S GENIUS

Reply on news.ycombinator.com