rutherford rutherford - 2 years ago 111
Javascript Question

Editing clipboard data when copying/pasting from a website

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 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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download