How to control what is copy-pasted to and from the clipboard in the browser(taye.me)
taye.me
How to control what is copy-pasted to and from the clipboard in the browser
http://taye.me/blog/user-interaction/2013/12/02/browser-clipboard-copy-paste.html
39 comments
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
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"|
|"foo\tbar"| (using some CHAR magic in excel to generate the tab character)
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.
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.
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.
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.
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.
> 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.)
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.)
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.
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.
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)
NB: that's a hostname, not a domainname.
Ack; I should have known that. Thank you.
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.
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.
> 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…").
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…").
Your use sounds quite nice. Sadly, it seems that the abuse is much more common. Thanks for the suggestions.
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.
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.
The majority of times, if not the total, that I encounter this poor design is when I'm in the process of pasting a quote into a tweet while sharing the link with others. Too clever by half.
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?
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.
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.
If I want to copy content without authors permission, I won't copy and paste and will just wget the shit out of your web page and carry on. You prevented nothing.
But as a regular user, you just made me angry preventing me to copy and paste or adding obnoxious content (which I'm going to delete anyways).
So you traded a light barrier (if any) to unfair users for a huge annoyance to legitimate ones. Not very smart IMHO.
But as a regular user, you just made me angry preventing me to copy and paste or adding obnoxious content (which I'm going to delete anyways).
So you traded a light barrier (if any) to unfair users for a huge annoyance to legitimate ones. Not very smart IMHO.
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.
>>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.
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.
> 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" isn't a format I've ever seen anywhere, and seems like it would be incredibly annoying to parse.
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" isn't a format I've ever seen anywhere, and seems like it would be incredibly annoying to parse.
> Come on. Appending a URL to the copied text doesn't break anyone's experience. It's a very tiny inconvenience at best.
No. It makes something that should be in muscle memory, which I shouldn't even have to think about, which I do countless times a day on other sites and with other tools exactly the way I expect, and forces me to stop and think about it. It breaks my concentration and breaks my flow. Sites which do this are broken. The site owners have reached out and purposefully chosen to make my tools misbehave. You don't get to tell me that's a "tiny inconvenience". Especially not when the reasoning behind it is so utterly asinine.
> most people on the Internet copy and steal things without giving credit.
I really, really hope you're trolling. Even if this bore the slightest, tiniest resemblance to reality, it wouldn't justify trying to break my tools. "There exists an infringing use case therefore all uses must be interfered with"? No. No. NO.
No. It makes something that should be in muscle memory, which I shouldn't even have to think about, which I do countless times a day on other sites and with other tools exactly the way I expect, and forces me to stop and think about it. It breaks my concentration and breaks my flow. Sites which do this are broken. The site owners have reached out and purposefully chosen to make my tools misbehave. You don't get to tell me that's a "tiny inconvenience". Especially not when the reasoning behind it is so utterly asinine.
> most people on the Internet copy and steal things without giving credit.
I really, really hope you're trolling. Even if this bore the slightest, tiniest resemblance to reality, it wouldn't justify trying to break my tools. "There exists an infringing use case therefore all uses must be interfered with"? No. No. NO.
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, I apologize if this isn't a constructive comment but this feature has annoyed me from time to time. Forbes.com just implemented it.
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.
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.
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.
As for trying it on the linked site, I have NoScript installed. Good luck trying to prevent me from copy-and-pasting now.
>>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.
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.
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.
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/
[1] http://caniuse.com/clipboard
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/
[1] http://caniuse.com/clipboard
Good thing X11 skips the copy step, just select it and middle(/wheel) click to paste:
Try right-clicking here to see this workingOn 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. :(
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.
This is neat... but why not use the copy/paste event handlers where possible?
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.
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.