Pubblicato il 10/04/15e aggiornato il

Come disabilitare Ctrl+P, Ctrl+U, Ctrl+C e destro del mouse per dissuadere la copia dei contenuti.

Come disabilitare le scorciatoie da tastiera Ctrl+P, Ctrl+C, Ctrl+U e il destro del mouse per rendere più difficile stampare e copiare le immagini.
A fronte di una richiesta pervenutami tramite un commento a un post riprendo il tema della copia di immagini e testi dai siti web che è molto sentito in praticamente tutte le tipologie degli webmaster. Mi si chiedeva se fosse possibile impedire che una pagina web possa essere stampata tramite la scorciatoia da tastiera Ctrl+P

Come ho già avuto modo di affermare si può parlare solo di deterrenza nei confronti dei copiatori perché un sistema assolutamente sicuro non esiste. Una persona esperta di informatica riesce comunque a copiare una pagina web magari utilizzando estensioni tipo Firebug per Firefox

Visto che ci sono ho pensato di aggiungere nuove protezioni anche contro altre scorciatoie da tastiera che possono essere una integrazione di tutte quelle procedure di protezione che ho già elencato nell'articolo su come disabilitare il destro del cursore e mostrare un avviso a tutta pagina.

DISABILITARE LA SCORCIATOIA DA TASTIERA CTRL+P


Si va su Modello > Modifica HTML, si cerca la riga </head> e, subito sopra, si incolla

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).bind("keyup keydown", function(e){
    if(e.ctrlKey && e.keyCode == 80){
        alert('Non permesso');
        return false;
    }
});
//]]>
</script>

Si salva il modello. Quando un navigatore cliccherà su Ctrl+P visualizzerà questo messaggio 

disabilitare-stampa-pagina

Con taluni browser (vedi Firefox) però viene anche visualizzata la pagina di dialogo per la stampa. Questo dovrebbe essere comunque una buona protezione contro la stampa dei nostri contenuti anche se ovviamente non si può impedire che vengano presi degli screenshot ovvero delle istantanee. Le righe evidenziate di giallo sono la Libreria jQuery e quindi possono essere tralasciate se già presenti nel template. Vediamo come si possa integrare questa protezione con altre sulla stessa falsariga.

DISABILITARE CTRL+U, CTRL+C E DESTRO DEL MOUSE


I più esperti sanno che con la combinazione di tasti Ctrl+U si accede a quello che è il Sorgente Pagina ovvero il codice HTML della pagina web che si sta visualizzando. Con questo sistema si può per esempio trovare l'URL di una immagine per scaricarla con tutto comodo oppure copiare il codice di un testo per poi incollarlo formattato in un editor. Un discorso analogo vale per la combinazione Ctrl+C che serve per copiare una selezione fatta con il cursore e per il destro del mouse che in tutti gli OS è il modo per aprire il menù contestuale che serve per copiare una immagine o per trovare il suo indirizzo.

Vediamo come disabilitare tutte queste opzioni. Si va sempre su Modello > Modifica HTML e si cerca sempre la riga </head>. Subito sopra si incolla quindi questo codice 

<script type='text/javascript'>
var isCtrl = false;
document.onkeyup=function(e)
{
if(e.which == 17)
isCtrl=false;
}
document.onkeydown=function(e)
{
if(e.which == 17)
isCtrl=true;
if((e.which == 85) || (e.which == 67) &amp;&amp; isCtrl == true)
{
return false;
}
}
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
return false;
}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
</script>

Si salva il template. In questo caso se il navigatore tenterà di cliccare sul destro del mouse o di usare le combinazioni di tasti Ctrl+U o Ctrl+C non succederà nulla senza nessun avviso.

demo-disabilitazione-destro-mouse-stampa

Volendo si possono inserire tutte queste protezioni contemporaneamente incollando i due codici uno di seguito all'altro così come è stato fatto nella Demo.




14 commenti :

  1. Sei sempre chiarissimo, ottimo post :D

    RispondiElimina
  2. Ah Ernesto si può copiare anche con CTRL+INS e incollare con Shift+INS, si può fare qualcosa?
    Eh poi volevo chiederti puoi darmi qualche consiglio per favore, si può segnalare a google questa cosa? o magari dimmi tu cosa fare.. perché ho provato a contattare il proprietario del blog ma non risponde e continua a copiare spudoratamente..

    RispondiElimina
    Risposte
    1. Credo che le misure contro chi copia siano inutili a meno che chi ti copia non sia un ragazzino che ancora non ha capito come funziona un blog. Nel tuo caso non mi pare che sia un ragazzino ma un webmaster con pochi scrupoli. In questo caso ti puoi rivolgere a Google e chiedere l'applicazione del DMCA Act
      http://www.ideepercomputeredinternet.com/2010/11/come-proteggerci-da-chi-copia-articoli.html
      accedendo a questo modulo online e seguendo le istruzioni
      https://support.google.com/legal/answer/1120734#notification
      @#


      Elimina
  3. mi sa che resta sempre il "visualizza sorgente" purtroppo
    (distruggi il mio commento dopo la lettura :-) )

    RispondiElimina
  4. Ciao grazie della guida.

    C'è la possibilità di evitare che gli utenti possano zommare orimpiciolire la pagina tramite i comandi CTRL + OPPURE CTRL più rotellina del mouse?

    Ne avrei molto bisogno

    RispondiElimina
    Risposte
    1. @# Si può fare. Devi incollare questa riga di codice
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

      al posto di quest'altra

      <meta content='width=1100' name='viewport'/>

      dove il dato 'width=1100' può anche essere diverso. Salva prima il modello e prendi nota delle variazioni per rimettere tutto a posto nel caso servisse

      Elimina
  5. Ciao Ernesto, ho un problema. Nel mio Blog https://ylodibeautylife.blogspot.com se noti sopra il titolo c'è una striscia colorata e non so cosa sia e come toglierla. Puoi aiutarmi?

    RispondiElimina
    Risposte
    1. @# Magari se mi chiedi di investigare sul tuo codice la prossima volta non disabilitare il destro del mouse perché questo mi mette in difficoltà :)

      Nel tuo modello hai questo codice

      /* Main content
      ----------------------------------------------- */
      .blog-content {
      background-color: #fff;
      padding-bottom: 50px;
      }
      .blog-content .content {
      margin-bottom: 30px;
      }
      .blog-content .content .post-wrapper:after {
      content: '';
      display: table;
      clear: both;
      }
      .blog-content .post {
      position: relative;
      background-color: #fff;
      margin-bottom: 10px;
      }

      Non vedo un margin-top. Il problema credo che il contenuto inizi troppo in basso e questo lascia una riga di colore visibile. Quindi va fatto iniziare prima. Prova a incollare questa riga di codice

      margin-top:-5px !important;

      subito dopo la riga

      .blog-content {

      Se non funzionasse prova con quest'altra riga
      padding-top:-5px !important;
      incollata nello stesso posto.

      Elimina
    2. @# Prova con questo codice
      #header {margin-top:-5px !important;}
      o con quest'altro
      #header {padding-top:-5px !important;}
      da incollare sopra alla riga
      ]]></b:skin>

      Elimina
    3. Questo ]]> mi compare solo alla fine di un paragrafo, nella prima parte dell'html. Non so dove inserirlo, prima di questa riga o all'inizio del paragrafo? Perdonami se ti sto facendo impazzire ma non ne capisco molto

      Elimina
    4. Intorno alla decima dodicesima riga c'è la sezione < b:skin > che è nascosta. Devi cliccare sulla freccetta nera posta a sinistra per visualizzare tutto il codice. Dopo averlo fatto con Ctrl+F troverai la riga di cui al commento 5.c. Il codice lo devi incollare sopra a quella riga dopo aver però aperto tutto il codice
      @#

      Elimina
  6. Mi dispiace, pensavo non fosse necessario. Comunque ho provato entrambi ma non funzionano :(

    RispondiElimina
  7. buongiorno Ernesto, avevo un problema nella casella di ricerca che non faceva inserire a lettera U ed ho scoperto che eliminando questo codice anticopia il problema è risolto.

    lo segnalo qui perchè magari qualcuno ha avuto il mio stesso problema.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.