5 ms·

How to control what is copy-pasted to and from the clipboard in the browser

30 points by taye 13y ago

protomyth 13y ago
More important, how do I keep a site from changing what I copy / paste, because this is the crappiest UI change a site can make. I am rather sick of copying a phrase and getting a huge site advertisement and url attached.
- taye 13y ago
  I've never actually noticed any site doing that to me as I usually browse with NoScript. I wrote that post with the intention of using the solution in apps to copy/paste app data in plain text - eg. selecting multiple objects in a drawing app and copying them as a JSON string. I guess NoScript/Ghostery/AdBlock Plus could be considered solutions to your problem.
  - protomyth 13y ago
    Your use sounds quite nice. Sadly, it seems that the abuse is much more common. Thanks for the suggestions.
  - riffraff 13y ago
    > I've never actually noticed any site doing that to me as I usually browse with NoScript. Not necessarily a solution, as you can do it with css only. For example, people can put a 0-sized snippet at the end of the text, and then pad with some non-copyable text, so you select ABC, end up copying AB<something else>. IIRC twitter does this for urls (think "http://oo.com…" http://oo.com…").
- enraged_camel 13y ago
  I've seen sites do it, but I find it fair. Most of the examples I've run into attach something like "Read more at: <url>" which isn't obnoxious. It's also easy to remove from the text that is copied.
  - seiji 13y ago
    In what world is it "fair" for you to alter the behavior of what I expect to happen just because some people find it "easy" to fix the way you broke it?
    - enraged_camel 13y ago
      Not all copying is fair. Many copyrighted content is copied without the author's permission and used in non-fair-use contexts. Therefore it seems reasonable for the copyright holder to alter the behavior of the copy function and append the URL to the copied text. But I say that because I'm a reasonable person. If you feel entitled to being able to copy everything as is, then I suppose you won't like it being altered.
      - regularfry 13y ago
        That is not a reasonable stance. What you're saying is that the site owner is entitled to pre-judge any copy and paste as inherently unfair, and break everyone's experience as a result. That's not a judgement they should be able to make, and it's not a right they have.
        enraged_camel 13y ago
        >>and break everyone's experience Come on. Appending a URL to the copied text doesn't break anyone's experience. It's a very tiny inconvenience at best. As for them pre-judging any copy and paste as inherently unfair, most people on the Internet copy and steal things without giving credit. Appending a URL to a chunk of copied text is a way of nudging them to cite the material. As for fair-use folks, I see it as helpful. I always cite material I copy from elsewhere manually, but now the script does it for me. In either case, it's a win.
        pavel_lishin 13y ago
        > As for them pre-judging any copy and paste as inherently unfair, most people on the Internet copy and steal things without giving credit. You're justifying their pre-judgment of people by pre-judging more people. > I always cite material I copy from elsewhere manually, but now the script does it for me. In either case, it's a win. Citing material by leaving the "\n\nRead more at http://something.somewhere/content.html" http://something.somewhere/content.html" isn't a format I've ever seen anywhere, and seems like it would be incredibly annoying to parse.
- bauer 13y ago
  One of the features I really love in Opera (Presto, 12.16), is the ability to deny sites the ability to detect context menu events. You can do this at a per-site level too. Very useful for sites that mess with copy/paste, or right-click in general.
- dredmorbius 13y ago
  how do I keep a site from changing what I copy / paste 1. Disable Javascript. I browse with NoScript / Scriptsafe plugs installed, and disable JS by default. This defeats the demo in the article (I actually had to enable JS to break my copy/paste). 2. Use a console-mode browser and/or curl the source and grab what you want from it (though I've found sites which break console tools). Better: enter domains which employ such tactics in your /etc/hosts file as 0.0.0.0.
  - pavel_lishin 13y ago
    > Better: enter domains which employ such tactics in your /etc/hosts file as 0.0.0.0. As far as I can tell, blocking *.tynt.com cuts down on 99% of such gimmmicky tactics. (I wonder why they're such a major provider; the paranoid in me wants to believe that they're using patents aggressively; the lazy person in me doesn't care.)
    - dredmorbius 13y ago
      What's your blocking method? Short of setting up a nameserver and going authoritative for the domain (I've done that, I'm feeling lazy), /etc/hosts doesn't take wildcards for hostnames.
      - pavel_lishin 13y ago
        Hm, I must have just blocked the specific domain: tcr.tynt.com (as per instructions here: http://daringfireball.net/2010/05/tynt_copy_paste_jerks http://daringfireball.net/2010/05/tynt_copy_paste_jerks)
        dredmorbius 13y ago
        NB: that's a hostname, not a domainname.
        pavel_lishin 13y ago
        Ack; I should have known that. Thank you.
adem 13y ago
what about mobile clients?
- taye 13y ago
  I'm really not sure and I've been too occupied to try things out. Detecting a long hold and then selecting the text before the usual mobile context menu pops up could be good enough. I only devised this solution for a desktop app.
wj 13y ago
Why restrict what a visitor can copy from your website? By reducing the site's utility they are less likely to revisit. taye, I apologize if this isn't a constructive comment but this feature has annoyed me from time to time. Forbes.com just implemented it.
- taye 13y ago
  No apology necessary. As I mentioned in another comment, I use NoScript to disable javascript so I wouldn't even notice that kind of thing. I agree that that is unnecessary and sort of abusive to users. I only intended on using this within web apps like a document editor etc.
Casseres 13y ago
I absolutely hated it when websites did this. If I wanted to copy the text or image, I was going to - whether it be by going to the page source or manipulating it with Firebug. As for those ads websites sometimes through in with whatever text that's being copied, I always delete it after pasting it into my text editor. I've never seen anyone else share those copy-and-pasted ads. As for trying it on the linked site, I have NoScript installed. Good luck trying to prevent me from copy-and-pasting now.
ryangripp 13y ago
command + c = fail
- taye 13y ago
  I don't have a mac. I was too lazy to get someone else's to test this. But I'm sure people reading can figure out how to get it working on macs :)
ben0x539 13y ago
On X11, text is basically copied once it's selected. And of course you're not hooking the menubar Edit > Copy way of copying. There's probably no way to make this consistently work for every kind of copying text. :(
- kaoD 13y ago
  I've seen websites preventing you from selecting any text at all. I usually select the text I'm reading as a sort of mark, so that really annoyed me.
wavefunction 13y ago
>>Try right-clicking here to see this working I right clicked on your "intercepting element," inspected with firebug, and deleted the input node. Then I could copy and paste as I desired. Firefox. 10 seconds? My point is, we have many better things to spend our time on as developers than trying to control our user's access to the same information we're providing them. This not a reproach to taye, but to the bosses that ask us to build these worthless systems.
- Robadob 13y ago
  In chrome I can just right click the text, keep right mouse held down while I use left mouse to highlight the text I want and then lift right mouse while hovered over my newly highlighted text and select copy. This method while overkill is easily circumvented in the provided example, without even killing js or using developer tools, it could possibly be fixed with a larger covering item, but really if you don't want people copying your text, use a library to render it as an image.
zetafunction 13y ago
This is neat... but why not use the copy/paste event handlers where possible?
- taye 13y ago
  Firfox doesn't fire paste events unless an editable element has focus. You would have to bring focus to an input element to make sure that an event is fired.
regularfry 13y ago
Please, please don't do this. By doing it you break UI conventions I can rely on everywhere else, and introduce yet another thing that's not quite going to work right in some combination of platform and browser. You probably don't have the budget to make sure this works properly as you intend it everywhere it's accessible, and by introducing it you're actively making your site, and by extension my experience, less reliable and less predictable.
- sheetjs 13y ago
  There is one case where I really do appreciate manipulating copy-paste: selecting multiple cells in a table. Excel ends up populating the plaintext as well as the HTML paste buffers. The plaintext buffer holds TSV output and the HTML buffer holds the full HTML. The HTML is the only way to distinguish between the two cells |"foo|bar"| and the single cell |"foo\tbar"| (using some CHAR magic in excel to generate the tab character) my short spiel: http://blog.sheetjs.com/post/66908170192/the-magic-behind-excel-copy-and-paste http://blog.sheetjs.com/post/66908170192/the-magic-behind-ex...
- taye 13y ago
  What if your site is a graphic editing web app using a <canvas> renderer? By convention users should be able to copy and paste graphical objects created within the app as well as paste text or images copied from elsewhere. If you use keyboard short-cuts in your UI to copy into your app's memory but not the system clipboard then you have no way to know whether the data the user wants to paste was copied from your app or somewhere else. If you only use the system clipboard and inform the user that copy/pasting is done with right-click or key-combos and not the browser's "Edit" menu, you can handle copy-pasting predictably. This was the most reliable method I could think of. Yes the browser's "Edit" menu is a problem and there's no way to get around that.
masklinn 13y ago
The actual way to control what is copy/pasted is to use the `oncopy` and `onpaste` events and using the clipboard API[0]. This obviously relies on the browser providing sufficient clipboard access, but that's getting there[1] Bonus: you can get (on paste) and set (on cut and copy) data in multiple file formats. And obviously you can pre-process pasted data before injecting it in the system. [0] http://www.w3.org/TR/clipboard-apis/ http://www.w3.org/TR/clipboard-apis/ [1] http://caniuse.com/clipboard http://caniuse.com/clipboard
brokenparser 13y ago
Good thing X11 skips the copy step, just select it and middle(/wheel) click to paste: Try right-clicking here to see this working
HNLogInsSuckAss 13y ago
Great way to get people to abandon your site. Disable my keyboard shortcuts? FUCK YOU.

30 points by taye 13y ago

More important, how do I keep a site from changing what I copy / paste, because this is the crappiest UI change a site can make. I am rather sick of copying a phrase and getting a huge site advertisement and url attached.

taye 13y ago
I've never actually noticed any site doing that to me as I usually browse with NoScript. I wrote that post with the intention of using the solution in apps to copy/paste app data in plain text - eg. selecting multiple objects in a drawing app and copying them as a JSON string. I guess NoScript/Ghostery/AdBlock Plus could be considered solutions to your problem.
- protomyth 13y ago
  Your use sounds quite nice. Sadly, it seems that the abuse is much more common. Thanks for the suggestions.
- riffraff 13y ago
  > I've never actually noticed any site doing that to me as I usually browse with NoScript. Not necessarily a solution, as you can do it with css only. For example, people can put a 0-sized snippet at the end of the text, and then pad with some non-copyable text, so you select ABC, end up copying AB<something else>. IIRC twitter does this for urls (think "http://oo.com…" http://oo.com…").
enraged_camel 13y ago
I've seen sites do it, but I find it fair. Most of the examples I've run into attach something like "Read more at: <url>" which isn't obnoxious. It's also easy to remove from the text that is copied.
- seiji 13y ago
  In what world is it "fair" for you to alter the behavior of what I expect to happen just because some people find it "easy" to fix the way you broke it?
  - enraged_camel 13y ago
    Not all copying is fair. Many copyrighted content is copied without the author's permission and used in non-fair-use contexts. Therefore it seems reasonable for the copyright holder to alter the behavior of the copy function and append the URL to the copied text. But I say that because I'm a reasonable person. If you feel entitled to being able to copy everything as is, then I suppose you won't like it being altered.
    - regularfry 13y ago
      That is not a reasonable stance. What you're saying is that the site owner is entitled to pre-judge any copy and paste as inherently unfair, and break everyone's experience as a result. That's not a judgement they should be able to make, and it's not a right they have.
      - enraged_camel 13y ago
        >>and break everyone's experience Come on. Appending a URL to the copied text doesn't break anyone's experience. It's a very tiny inconvenience at best. As for them pre-judging any copy and paste as inherently unfair, most people on the Internet copy and steal things without giving credit. Appending a URL to a chunk of copied text is a way of nudging them to cite the material. As for fair-use folks, I see it as helpful. I always cite material I copy from elsewhere manually, but now the script does it for me. In either case, it's a win.
        pavel_lishin 13y ago
        > As for them pre-judging any copy and paste as inherently unfair, most people on the Internet copy and steal things without giving credit. You're justifying their pre-judgment of people by pre-judging more people. > I always cite material I copy from elsewhere manually, but now the script does it for me. In either case, it's a win. Citing material by leaving the "\n\nRead more at http://something.somewhere/content.html" http://something.somewhere/content.html" isn't a format I've ever seen anywhere, and seems like it would be incredibly annoying to parse.
bauer 13y ago
One of the features I really love in Opera (Presto, 12.16), is the ability to deny sites the ability to detect context menu events. You can do this at a per-site level too. Very useful for sites that mess with copy/paste, or right-click in general.
dredmorbius 13y ago
how do I keep a site from changing what I copy / paste 1. Disable Javascript. I browse with NoScript / Scriptsafe plugs installed, and disable JS by default. This defeats the demo in the article (I actually had to enable JS to break my copy/paste). 2. Use a console-mode browser and/or curl the source and grab what you want from it (though I've found sites which break console tools). Better: enter domains which employ such tactics in your /etc/hosts file as 0.0.0.0.
- pavel_lishin 13y ago
  > Better: enter domains which employ such tactics in your /etc/hosts file as 0.0.0.0. As far as I can tell, blocking *.tynt.com cuts down on 99% of such gimmmicky tactics. (I wonder why they're such a major provider; the paranoid in me wants to believe that they're using patents aggressively; the lazy person in me doesn't care.)
  - dredmorbius 13y ago
    What's your blocking method? Short of setting up a nameserver and going authoritative for the domain (I've done that, I'm feeling lazy), /etc/hosts doesn't take wildcards for hostnames.
    - pavel_lishin 13y ago
      Hm, I must have just blocked the specific domain: tcr.tynt.com (as per instructions here: http://daringfireball.net/2010/05/tynt_copy_paste_jerks http://daringfireball.net/2010/05/tynt_copy_paste_jerks)
      - dredmorbius 13y ago
        NB: that's a hostname, not a domainname.
        pavel_lishin 13y ago
        Ack; I should have known that. Thank you.

adem 13y ago

what about mobile clients?

taye 13y ago
I'm really not sure and I've been too occupied to try things out. Detecting a long hold and then selecting the text before the usual mobile context menu pops up could be good enough. I only devised this solution for a desktop app.

wj 13y ago

Why restrict what a visitor can copy from your website? By reducing the site's utility they are less likely to revisit. taye, I apologize if this isn't a constructive comment but this feature has annoyed me from time to time. Forbes.com just implemented it.

taye 13y ago
No apology necessary. As I mentioned in another comment, I use NoScript to disable javascript so I wouldn't even notice that kind of thing. I agree that that is unnecessary and sort of abusive to users. I only intended on using this within web apps like a document editor etc.

Casseres 13y ago

I absolutely hated it when websites did this. If I wanted to copy the text or image, I was going to - whether it be by going to the page source or manipulating it with Firebug. As for those ads websites sometimes through in with whatever text that's being copied, I always delete it after pasting it into my text editor. I've never seen anyone else share those copy-and-pasted ads. As for trying it on the linked site, I have NoScript installed. Good luck trying to prevent me from copy-and-pasting now.

ryangripp 13y ago

command + c = fail

taye 13y ago
I don't have a mac. I was too lazy to get someone else's to test this. But I'm sure people reading can figure out how to get it working on macs :)

ben0x539 13y ago

On X11, text is basically copied once it's selected. And of course you're not hooking the menubar Edit > Copy way of copying. There's probably no way to make this consistently work for every kind of copying text. :(

kaoD 13y ago
I've seen websites preventing you from selecting any text at all. I usually select the text I'm reading as a sort of mark, so that really annoyed me.

wavefunction 13y ago

>>Try right-clicking here to see this working I right clicked on your "intercepting element," inspected with firebug, and deleted the input node. Then I could copy and paste as I desired. Firefox. 10 seconds? My point is, we have many better things to spend our time on as developers than trying to control our user's access to the same information we're providing them. This not a reproach to taye, but to the bosses that ask us to build these worthless systems.

Robadob 13y ago
In chrome I can just right click the text, keep right mouse held down while I use left mouse to highlight the text I want and then lift right mouse while hovered over my newly highlighted text and select copy. This method while overkill is easily circumvented in the provided example, without even killing js or using developer tools, it could possibly be fixed with a larger covering item, but really if you don't want people copying your text, use a library to render it as an image.

zetafunction 13y ago

This is neat... but why not use the copy/paste event handlers where possible?

taye 13y ago
Firfox doesn't fire paste events unless an editable element has focus. You would have to bring focus to an input element to make sure that an event is fired.

regularfry 13y ago

Please, please don't do this. By doing it you break UI conventions I can rely on everywhere else, and introduce yet another thing that's not quite going to work right in some combination of platform and browser. You probably don't have the budget to make sure this works properly as you intend it everywhere it's accessible, and by introducing it you're actively making your site, and by extension my experience, less reliable and less predictable.

sheetjs 13y ago
There is one case where I really do appreciate manipulating copy-paste: selecting multiple cells in a table. Excel ends up populating the plaintext as well as the HTML paste buffers. The plaintext buffer holds TSV output and the HTML buffer holds the full HTML. The HTML is the only way to distinguish between the two cells |"foo|bar"| and the single cell |"foo\tbar"| (using some CHAR magic in excel to generate the tab character) my short spiel: http://blog.sheetjs.com/post/66908170192/the-magic-behind-excel-copy-and-paste http://blog.sheetjs.com/post/66908170192/the-magic-behind-ex...
taye 13y ago
What if your site is a graphic editing web app using a <canvas> renderer? By convention users should be able to copy and paste graphical objects created within the app as well as paste text or images copied from elsewhere. If you use keyboard short-cuts in your UI to copy into your app's memory but not the system clipboard then you have no way to know whether the data the user wants to paste was copied from your app or somewhere else. If you only use the system clipboard and inform the user that copy/pasting is done with right-click or key-combos and not the browser's "Edit" menu, you can handle copy-pasting predictably. This was the most reliable method I could think of. Yes the browser's "Edit" menu is a problem and there's no way to get around that.

masklinn 13y ago

The actual way to control what is copy/pasted is to use the `oncopy` and `onpaste` events and using the clipboard API[0]. This obviously relies on the browser providing sufficient clipboard access, but that's getting there[1] Bonus: you can get (on paste) and set (on cut and copy) data in multiple file formats. And obviously you can pre-process pasted data before injecting it in the system. [0] http://www.w3.org/TR/clipboard-apis/ http://www.w3.org/TR/clipboard-apis/ [1] http://caniuse.com/clipboard http://caniuse.com/clipboard

brokenparser 13y ago

Good thing X11 skips the copy step, just select it and middle(/wheel) click to paste: Try right-clicking here to see this working

HNLogInsSuckAss 13y ago

Great way to get people to abandon your site. Disable my keyboard shortcuts? FUCK YOU.