Editing clipboard data when copying/pasting from a website

Question

I have seen a few sites now where if you highlight text of an article, copy it, and then paste in they can add more text to it.

Try copying and pasting a section of text from an article at http://belfasttelegraph.co.uk/ and you'll see what I mean - they add a link to the original article in the pasted text.

How is this done? I'm assuming there is some javascript at work here

Answer 1

You will notice that this happens only when you use the key combination [Ctrl+C] and not if you highlight text and chose copy from the right-click menu.

They are simply trapping the [Ctrl+C] keystroke.

Further, to add data to the clipboard, take a look at this post: http://stackoverflow.com/questions/400212/how-to-copy-to-clipboard-in-javascript

Answer 2

This is a good effect, you can see the scripting that is fired on copy using Firebug (in Firefox).

Start up Firebug and load the page, choose clear (because the page uses a lot of ajax there are very quickly 100 requests). Then choose the 'All' tab and try to copy. You will see a request for a 1x1 pixel image but if you press on the + button to look at the details, you will see in the 'params' tab that this GET request passes your requested text as the 'content' parameter, with some xpath information that will be used to manipulate the clipboard DOM:

start_node_xpath    /HTML/BODY[@id='belfast']/DIV[@id='root']/DIV[@id='content']/DIV[@id='mainColumn']/DIV[@id='article']/DIV[5]/P[39]/text()

end_node_xpath  /HTML/BODY[@id='belfast']/DIV[@id='root']/DIV[@id='content']/DIV[@id='mainColumn']/DIV[@id='article']/DIV[5]/P[41]/text()

As @Crimson pointed out there are methods to manipulate the clipboard, like zeroclipboard which use Flash and an image.

I reckon that is how the technique is done by using the image get request to change the clipboard.