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. 

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkIwb2_Yk11AZJEKMxSh6l8X7YrMH33i9AL0Rc8VNCF2Qh9NBP6OPIPRZ8treVFqTjjB-ZbCfvejQrpdY2EwLb0ZzsM0qlhh1DLC6pbeOIs5G8pq8TckLhyTZduFJZ7RbMqhTxAicAuZk/" /></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.