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!
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.
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.
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.
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.
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 :-)
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}.
> 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! :)
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.
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 ;)"
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
87 comments
[ 4.0 ms ] story [ 169 ms ] threadWorks 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!
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
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
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!
I'm guessing it's not working ... it's certainly not doing what I expect, even at that stage.
Firefox 99.0 (64-bit) for Ubuntu canonical - 1.0
> Uncaught (in promise) ReferenceError: ClipboardItem is not defined
"return (i % n + n) % n;"
heh
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.
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.
I appreciate that you took the time to explain how it works in another comment in this thread.
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.
Which is a pretty good trick, I have to admit, exposing the nothingness of life. Kudos!
Or it could just be that I'm using Firefox? Seems to work for me in Chrome. :)
Seems the error is:
*Uncaught (in promise) ReferenceError: ClipboardItem is not defined*
It's funny.. I pasted it in a new Pages document.
This would hide a bit of the method for the twitter reveal.
-Seth
(I also make online magic tricks magicseth.com/animal )
Edit: copied manually, dont have a Google account, so can't go further.
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 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..
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
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.
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! :)
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?
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
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