Javascript Copy Hijack
04/01/2014
by
I found an interesting feature in the Digital Spy website today: text copy hijacking.
If you select some text on the site, hit Ctrl-C or right click and copy, you don't get exactly what you asked for. I copied this text from the site (I am looking out for Glastonbury tickets):
Ticket + Coach packages will go on sale on Thursday, April 2. at 7pm.
And when I pasted it I got the following:
Ticket + Coach packages will go on sale on Thursday, April 2. at 7pm.
Read more: http://www.digitalspy.co.uk/music/news/a561396/glastonbury-festival-2014-ticket-resale-announced.html#~oAboMkgLeXyhqY#ixzz2xdI6jiXf
Follow us: @digitalspy on Twitter | digitalspyuk on Facebook
A link back has been added on the end as well as Twitter and Facebook links for the site. Apart from being a bit shady, how do they do this?
At first I thought there must be a flash shim, to modify the system clipboard, since Javascript provides no way to modify this. Looking through the requests the site makes though there is no trace of anything like Jeffery Larson's _clipboard.swf.
Grepping the source for the site for the phrase "Read more:" reveals a javascript file from tynt.com, who promote their ability to "Leverage On-Site Copy & Paste Activity". Culprits identified!
My next guess was that on mouse up TYNT are adding a hidden element to the page within your selection. Checking window.getSelection(), the anchorNode and extentNode match what I selected and don't seem to have been modified.
Looking through the included ti.js I found an event listener being attached to the copy event, which it turns out is quite widely supported. When this fires the selection is grabbed using Window.getSelection(), a new temporary element is created on the page using document.createElement(). Then the selection is modified using selectAllChildren() and the temporary element is removed.
Here's a demo of the effect.