Modification des données du presse-papiers lors de la copie/du collage à partir d'un site Web

Question

J'ai vu quelques sites où, si vous mettez en surbrillance le texte d'un article, copiez-le, puis collez-y du texte. Essayez de copier et coller une section de texte d'un article au http://belfasttelegraph.co.uk/ et vous verrez ce que je veux dire - ils ajoutent un lien vers l'article original dans le texte collé.

Comment cela est-il fait? Je suppose qu'il y a du javascript au travail ici

Answer 1

Ceci est un bon effet, vous pouvez voir le script qui est tiré sur la copie à l'aide Firebug (dans Firefox).

Démarrez Firebug et chargez la page, choisissez clear (car la page utilise beaucoup d'ajax il y a très rapidement 100 requêtes). Ensuite, choisissez l'onglet "Tous" et essayez de copier. Vous verrez une demande pour une image 1x1 pixel mais si vous appuyez sur le bouton + pour voir les détails, vous verrez dans l'onglet 'params' que cette requête GET passe votre texte demandé comme paramètre 'content', avec quelques informations XPath qui sera utilisé pour manipuler le DOM de presse-papiers:

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() 

Comme @Crimson a souligné qu'il existe des méthodes pour manipuler le presse-papiers, like zeroclipboard qui utilisent flash et une image. Je pense que c'est comme cela que la technique est faite en utilisant la requête get image pour changer le presse-papiers.

Answer 2

Vous remarquerez que cela se produit uniquement lorsque vous utilisez la combinaison de touches [Ctrl + C] et non si vous surlignez du texte et choisissez une copie dans le menu contextuel.

Ils piègent simplement la touche [Ctrl + C].

De plus, pour ajouter des données au presse-papiers, jetez un oeil à ce poste: How do I copy to the clipboard in JavaScript?

Answer 3

J'ai récemment remarqué un afflux de ce "détournement de presse-papiers" sur les sites Web. thefutoncritic.com, cracked.com ... Si vous utilisez Adblock, allez dans la liste des "entrées manuelles" et ajoutez * post-copypaste.js *. Cela devrait empêcher les sites d'ajouter leurs annonces dans votre presse-papiers.

Answer 4

Une autre solution utilisée par d'autres sites Web est d'utiliser jQuery et l'événement 'copie'/'cut':

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

Quelques exemples ici: http://www.mkyong.com/jquery/how-to-detect-copy-paste-and-cut-behavior-with-jquery/

Answer 5

Un site de nouvelles que je visite l'utilisation de cette fonction pour ajouter une "source" à la sélection copiée:

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;