Protéger vos textes de la copie

Alors, d'emblée, disons-le, dès qu'on publie quoi que ce soit en ligne, on s'expose à ce que ce contenu soit repris, copié voire pillé par d'autres. Il faut donc se résigner : il n'y a aucune méthode infaillible pour empêcher la copie, sauf à ne rien publier sur un site. Je vous propose cependant un script, décliné en 3 versions, qui va vous permettre de protéger, dans une certaine mesure, les textes (et uniquement les textes) de votre site en deux temps :

  1. Il va automatiquement tronquer la sélection copiée au 250e caractère
  2. Il va automatiquement ajouter des informations de source et de copyright à la fin de cette sélection. En effet, une fois que la sélection copiée aura été collée, s'y ajouteront 2 lignes (dont vous pouvez paramétrer le contenu) : par défaut, l'une indique l'URL de la page dont provient le texte copié et l'autre précise l'auteur de la page en question.

Je vous propose de copier le texte que vous venez de lire et de le coller dans un document ou un mail pour expérimenter les effets de ce script par vous-même !

Mise en garde liminaire

Merci de prendre note des limites du script que je vous propose dans ce tutoriel :

  • Il protège uniquement les textes, pas les images.
  • Si vous l'installez sur votre site, vous serez vous-même soumis à son action en tant qu'administrateur, donc à chaque fois que vous copierez-collerez n'importe quel morceau de texte de votre site. Soyez conscients que si, comme moi, vous travaillez beaucoup par copiers-collers pour rédiger des articles et si vous remaniez beaucoup vos textes en ligne, cela peut devenir gênant voire ingérable... Ajoutez donc la protection sur la page seulement après l'avoir rédigée.
  • Prenez garde à ne pas utiliser le script sur les pages de votre site sur lesquelles vous publiez, comme moi, des codes à copier-coller : en effet, vos visiteurs ne pourront plus copier les codes car ils seront tous tronqués donc inutilisables !

En somme, utilisez ce script avec intelligence.

Démonstration du résultat

Sélectionnez le texte du cadre ci-dessous, copiez-le et collez-le dans un mail ou dans votre traitement de texte préféré. Au bout du 250ème caractère, le texte copié-collé sera coupé et s'y ajouteront automatiquement 2 lignes invitant le lecteur à lire la suite du texte sur la page dont il est tiré et la "punchline" de mon site. Magique, hein ?

Illud tamen clausos vehementer angebat quod captis navigiis, quae frumenta vehebant per flumen, Isauri quidem alimentorum copiis adfluebant, ipsi vero solitarum rerum cibos iam consumendo inediae propinquantis aerumnas exitialis horrebant. Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?

Pour les utilisateurs de Internet Explorer, voici un aperçu du résultat (en effet, le script ne marche pas avec IE avant la version 9 - désolée... ) :

Screenshot : rendu du code
Voici le texte du cadre copié et collé dans un email
Flèche vers le haut

Méthode 1 : protéger tout le site

C'est la technique la plus simple à mettre en place. Avec elle, tout texte copié depuis n'importe quel endroit de votre site sera coupé au 250ème caractère, suivi de l'URL de la page dont provient le texte copié et d'une ligne de votre choix (copyright, par exemple) :

 

Le reste est à lire ici : http://votre-site.jimdo.com

Copyright © Bidule Machin

Où insérer le code ?

Rendez-vous dans la barre d'admin de votre site, puis cliquez sur Paramètres > Modifier le Head. C'est dans la fenêtre de saisie qui apparaît que vous copiez-collez le code donné.

Capture de Paramètres > Modifier le head
Paramètres > Modifier le head

Le code à copier-coller

Vous pouvez personnaliser la ligne dont les éléments sont en rouge en écrivant vos propres textes.

<script type="text/javascript">
function addLink() {
    var body_element = document.getElementsByTagName('body')[0];
    var selection;
    selection = window.getSelection();
    var pagelink = "<br /><br />Le reste est à lire ici : <a href='"+document.location.href+"'>"+document.location.href+"</a><br />Copyright &copy; Bidule Machin";
    var selectiontxt = selection.toString();
var copytext = selectiontxt.substring(0,250)+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; </script>

Cliquez sur le bouton Enregistrer, puis passez en mode Aperçu. Sélectionnez du texte sur une page de votre site et collez-le dans un mail. Les lignes s'ajoutent automatiquement à la fin du texte collé.

Attention, si vous choisissez la méthode 1, vous ne pourrez pas utilisez les deux autres méthodes. En revanche, les méthodes 2 et 3 peuvent coexister sur un même site.
Flèche vers le haut

Méthode 2 : protéger des pages spécifiques

Avec ce code, vous ne protégez que certaines pages de votre choix, pas votre site entier. Je l'ai utilisé pour protéger mon répertoire de widgets pour Jimdo. L'effet est le même : quand on copie-colle un extrait de cette page dans un document, un mail, sur un site... le texte est coupé au 250ème caractère et suivi des 2 lignes suivantes (par exemple) :

Screenshot de la page protégée
Les 2 dernières lignes sont automatiquement ajoutées au texte copié qui est tronqué

Etape 1 : insérer la première partie du code

Rendez-vous dans la barre d'admin de votre site, puis cliquez sur Paramètres > Modifier le Head. C'est dans la fenêtre de saisie qui apparaît que vous copiez-collez le code donné.

Capture de Paramètres > Modifier le head
Paramètres > Modifier le head

Copiez-collez ce code en remplaçant les textes en rouge par les vôtres :

<script type="text/javascript">
function addLink() {
    var body_element = document.getElementsByTagName('body')[0];
    var selection;
    selection = window.getSelection();
    var pagelink = "<br /><br />Le reste est à lire ici : <a href='"+document.location.href+"'>"+document.location.href+"</a><br />Copyright &copy; Bidule Machin";
    var selectiontxt = selection.toString();
var copytext = selectiontxt.substring(0,250)+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); } </script>

Etape 2 : insérer la deuxième partie du code

Au début de la page que vous voulez spécifiquement protéger, ajoutez un élément Widget/HTML :

Screenshot : ajouter un widget/HTML

Dans le cadre de saisie qui apparaît, copiez-collez ce petit code :

<script type="text/javascript">
//<![CDATA[
document.oncopy = addLink;
//]]>
</script>

Enregistrez. Rien n'apparaît sur la page : c'est normal. Pourtant, le script opère désormais sur cette page : faites le test ! Répétez cette étape (n°2) sur chaque page à protéger, c'est-à-dire autant de fois que vous avez de pages à protéger.

Flèche vers le haut

Méthode 3 : protéger certains textes seulement

Si vous le souhaitez, vous pouvez protéger seulement des morceaux de textes, comme je l'ai fait dans la démonstration de cette page. Cela se fait assez simplement.

Etape 1 : insérer la première partie du code

Copiez-collez ce code dans Paramètres > Modifier le Head :

<script type="text/javascript">
function addLink() {
    var body_element = document.getElementsByTagName('body')[0];
    var selection;
    selection = window.getSelection();
    var pagelink = "<br /><br />Le reste est à lire ici : <a href='"+document.location.href+"'>"+document.location.href+"</a><br />Copyright &copy; Bidule Machin";
    var selectiontxt = selection.toString();
var copytext = selectiontxt.substring(0,250)+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); } </script>

Enregistrez la modification. Pour l'instant, rien ne se passe ; c'est normal.

Etape 2 : créer les zones à protéger

On va voir pas à pas comment créer la zone spécifique à protéger.

  • Ajoutez un élément texte à l'endroit où vous voulez saisir le texte à protéger :
Screenshot : ajouter un élément texte
  • Dans la fenêtre de saisie, écrivez votre texte normalement : mettez-le en forme, avec des couleurs, du gras, des liens, etc... 
Screenshot : le bouton HTML
  • Cliquez sur le bouton HTML de l'éditeur. Le code correspondant à votre texte s'affiche dans une fenêtre pop-over.
Screenshot : éditeur HTML
  • Ajoutez dans le code, tout en haut, ceci : <div id="protected"> et, tout en bas, ceci : </div>
Screenshot : ajout de la zone de protection
  • Appuyez sur le bouton Mettre à jour en bas de la fenêtre pop-over.
Screenshot : mettre à jour
  • Retour à l'éditeur de texte : appuyez sur le bouton Enregistrer.
Screenshot : enregistrer
  • Votre texte s'affiche complètement normalement. La balise de protection est invisible !
Screenshot : le texte protégé

Etape 3 : insérer la deuxième partie du code

A la fin de votre page, en bas, ajoutez un élément widget/HTML :

Screenshot : ajouter un widget/HTML

Dans la fenêtre de saisie qui apparaît, copiez-collez ce code :

<script type="text/javascript">
//<![CDATA[
var tab_protected = document.getElementsByClassName("protected");
for(var i=0; i<tab_protected.length; i++){
   document.getElementsByClassName('protected')[i].oncopy = addLink;
}
//]]>
</script>

Enregistrez. Rien n'apparaît à l'endroit où vous avez collé le code. C'est normal ; le script est pourtant bien opérationnel. Toutes les zones protégées de la page le sont ; les autres textes ne le sont pas.

Vous pouvez créer autant de zones à protéger que vous voulez dans une page. Si vous créez des zones protégées dans une autre page, n'oubliez pas d'ajouter, en bas de cette autre page, la deuxième partie du code (étape 3).

Commentaires, par ici !

Écrire commentaire

Commentaires : 1
  • #1

    demoiselleslibellules (lundi, 18 mars 2013 21:23)

    Pas facile du tout et je n' y arrive pas !! dommage ....

Ruban