Editing clipboard data when copying/pasting from a

问题:

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

回答1:

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.

回答2:

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: How do I copy to the clipboard in JavaScript?

回答3:

I've noticed lately an influx of this "clipboard hijacking" on websites. thefutoncritic.com, cracked.com... If you use Adblock just go into the "manual entries" list and add *post-copypaste.js* to it. This should prevent the sites from adding their ads to your clipboard.

回答4:

An other solution used by other websites is to use jQuery and the 'copy' / 'cut' event :

$('body').bind('copy cut',function(e){manipulate();});

Some examples here : http://www.mkyong.com/jquery/how-to-detect-copy-paste-and-cut-behavior-with-jquery/

回答5:

A news site i visit use this function to append a "source" to the copied selection:

function addLink() {
    var body_element = document.getElementsByTagName('body')[0];
    var selection;
    selection = window.getSelection();
    // change this if you want
    var pagelink = "<br><br>Fuente: Emol.com - <a href='"+document.location.href+"'>"+document.location.href+"</a><br>";
    var copytext = selection + pagelink;
    var newdiv = document.createElement('div');
    newdiv.style.position='absolute';
    newdiv.style.left='-99999px';
    body_element.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);
    window.setTimeout(function() {
        body_element.removeChild(newdiv);
    },0);
}
document.oncopy = addLink;