Pubblicato il 29/03/15e aggiornato il

Come impedire di farci copiare le immagini con il destro del mouse o con il drag & drop.

Come impedire che vengano copiate le nostre immagini più importanti disabilitando il destro del cursorte o impedendo il trascinamento con il drag & drop.
Premetto che un esperto di informatica può sempre trovare il modo di copiare una immagine magari andando sul sorgente pagina per poi riuscire a trovarne l'indirizzo. Però in genere chi commette furti di foto non è un grande conoscitore di internet altrimenti non rischierebbe una infrazione di questo genere che potrebbe compromettere tutto il suo lavoro visto che ci sono delle norme internazionali molto precise per combattere le violazioni di copyright.

D'altra parte gli autori di siti con immagini molto preziose come potrebbero essere gli artigiani che propongono i loro lavori, le ragazze che si occupano di make-up o di nail-art, i fotografi professionisti o anche chi abbia scattato una foto importante perché si trovava nel posto giusto al momento giusto sono da sempre alle prese con la piaga del furto di immagini. Pensate a una food blogger che impiega ore per la realizzazione di una ricetta e che poi si vede copiare le immagini da un altro sito che oltre a riproporre l'elenco degli ingredienti o la preparazione magari con qualche modifica ne copia integralmente le immagini. Ci sono dei metodi grafici per introdurre degli watermark nelle foto ma per ragioni estetiche vengono quasi sempre inseriti nelle parti esterne e quindi possono essere nascosti mediante un semplice ritaglio.  Mi sono già occupato su come procedere per disabilitare il destro del mouse per impedire che la foto venga copiata o scaricata. Mi è stato però fatto osservare giustamente che si può scaricare una foto non solo con il destro del mouse ma anche trascinandola in una nuova scheda del browser. Con i sistemi operativi Mac la cosa è addirittura molto intuitiva. 

Ho quindi modificato il codice per impedire anche questa opzione. Questa protezione non va inserita in tutte le immagini ma solo in quelle che noi riteniamo più importanti. Il codice da utilizzare dovremo incollarlo in modalità HTML quando la pubblichiamo un post o una pagina 

<img draggable="false" oncontextmenu="alert('Testo che si visualizza cliccando il destro del mouse');return false" oncopy="alert('Testo che si visualizza cliccando il destro del mouse');return false" src="URL_IMMAGINE" />   

Successivamente si pubblica come al solito, meglio se lo facciamo direttamente da HTML senza tornare su Scrivi perché Blogger potrebbe modificare automaticamente il codice. La riga che impedisce il drag & drop o trascinamento della foto è stato evidenziata di giallo mentre se si clicca con il destro del mouse si visualizzerà in un alert il testo colorato di rosso

alert-destro-mouse

Come test provate a cliccare con il destro del cursore su questa foto o tentate di trascinarla


Il codice utilizzato per questa immagine di test è il seguente

<div align="center"><img draggable="false" oncontextmenu="alert('Perché vuoi copiare le mie foto? Chiedimi il permesso!');return false" oncopy="alert('Perché vuoi copiare le mie foto? Chiedimi il permesso!');return false" src="http://lh6.ggpht.com/_nT13UtBmmiU/TRmvhYaL-NI/AAAAAAAAQ5w/feaYRcvSoSk/natura-sexy.jpg" /></div>

Se nel vostro sito avete già installata la libreria JQuery per impedire il trascinamento delle immagini per copiarle si può usare anche questo codice

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<img src="URL_IMMAGINE" ondragstart="return false;"/>

dove la parte evidenziata di verde è JQuery. Con questo secondo metodo però è più difficile inserire il sistema per disabilitare anche il destro del mouse. Sono graditi i commenti sulla efficienza di questa funzionalità se si prova a scaricare la foto di test con i vari browser e con differenti sistemi operativi. Non dite che siete riusciti nella impresa accedendo al codice sorgente perché so bene che si può fare.




3 commenti :

  1. Ciao, con Firefox (36.0.4) e Windows 7, l'immagine può essere trascinata se selezione e drag & drop avvengono in due fasi distinte: clicco sull'immagine, rilascio il mouse, trascino l'immagine dove voglio.

    Comunque, come hai già scritto tu, sono solo rimedi per scoraggiare i meno esperti. Anche l'alert può essere disattivato al secondo click, spuntando l'pzione "Impedisci a questa pagina di aprire ulteriori finestre di dialogo". Per non parlare della cache... :)

    MAeSI

    RispondiElimina
    Risposte
    1. L'obiettivo è quello di rendere il download delle immagini più difficile come deterrenza per i copiatori alle prime armi in fatto di informatica che poi sono la grande maggioranza :)
      @#

      Elimina
    2. Certo, perfettamente d'accordo. La nostra (siamo in due) era solo una segnalazione sull'efficienza della funzionalità, come da te richiesto in questo articolo :)

      MAeSI

      Elimina

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.