Cara Mencegah Copy Paste Dengan CSS

Banyak cara yang bisa dilakukan untuk mencegah copy paste content atau postingan blog, baik dengan menggunakan plugin atau tanpa plugin, menggunakan script php, javascript dll, tapi begitu mudahnya pula untuk mengakalinya seperti yang pernah saya bahas di postingan sebelumnya yaitu cara mengatasi disable klik kanan.

Beberapa bulan terakhir saya iseng-iseng pasang script CSS yang berfungsi menonaktifkan fungsi user-select pada mouse (mouse selection) sehingga pengunjung tidak bisa menyeleksi tulisan/teks menggunakan mouse kiri khususnya pada bagian postingan.

Karena postingan blog ini banyak yang berisi tutorial yang di dalamnya banyak script/code yang harus dishare maka pada bagian itu (bagian yang berisi script/code) harus tetap bisa dicopy paste. Hal ini sebenarnya sudah saya antisipasi dengan cara membuat conditional tag yakni pada bagian element <pre> </pre> (elemen untuk menempatkan script/code) pada blog ini masih tetap bisa dicopy codenya.

Dengan conditional tag alhamdulillah bisa berjalan di browser Chrome. Namun untuk Firefox conditional tag-nya ternyata tidak berfungsi (bagian yang berisi script/code tetap tidak bisa dicopy), ini benar-benar di luar dugaan saya karena saya lebih sering menggunakan Chrome, dan baru saya ketahui seminggu yang lalu setelah banyak yang protes tidak bisa copy code dari blog ini. Pada kesempatan ini sekaligus saya mohon maaf, jika beberapa pengunjung ada yang mengalami kesulitan dengan copy paste script/code khususnya ketika menggunakan Firefox. Namun masalah ini sudah bisa saya atasi yakni dengan menonaktifkan fungsi user-select hanya pada elemen  yang mengandung syntax <p> </p> (paragraph), sedangkan untuk <pre> </pre> (elemen untuk menempatkan script/code) masih tetap bisa dicopy codenya.

Gara-gara saya menonaktifkan fungsi user-select (pengunjung tidak bisa menyeleksi tulisan/teks menggunakan mouse kiri) ternyata cukup banyak yang menanyakan cara pasangnya. Walau sebenarnya cara ini sudah cukup lama ada dan sudah banyak yang mempostingnya namun masih banyak juga yang belum tahu caranya. Dan berikut ini script/code CSS yang saya gunakan :

display:block;
-khtml-user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
-o-user-select:none;
user-select:none;
unselectable:on;

Tambahkan script/code CSS tersebut pada bagian properties dari sebuah ID atau class yang akan dinonaktifkan mouse seleksinya, misalnya jika akan diterapkan di semua elemen dari blog dari ujung rambut sampai ujung kaki, kita bisa menambahkan kode tersebut pada properties body :

body{display:block;
-khtml-user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
unselectable:on;}

Atau misalnya hanya pada bagian postingan saja silahkan tambahkan code tersebut pada properties dari ID atau class dari postingan, untuk wordpress biasanya menggunakan ID atau class.post atau ada juga yang menggunakan .post .content, silahkan disesuaikan dengan masing-masing theme. Untuk blog tutorial yang berisi script/code yang akan dishare sebaiknya script/code untuk mendisable user-select ditempatkan pada tag <p> </p> (paragraph) pada bagian postingan supaya bagian elemen <pre> </pre> (elemen untuk menempatkan script/code) agar masih tetap bisa dicopy (kebetulan saya pakai cara ini). Jika class dari <p> </p> (paragraph) pada bagian postingan belum ada di file CSS, kita bisa menambahkannya, caranya :

Cari ID atau class postingan, misalnya untuk theme yang saya gunakan ini (theme Inove) class pada postingan bernama .post .content kemudian kita buat class tersendiri menjadi .post .content p (ditambahkan huruf p dibelakangnya) selanjutnya masukkan script/code CSS untuk mendisable user-select pada properties dari class yang telah kita buat tadi, code keseluruhan menjadi :

.post .content p{display:block;
-khtml-user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
-o-user-select:none;
user-select:none;
unselectable:on;}

Penjelasan dari code di atas :

Untuk Webkit, syntaxnya :

-webkit-user-select: auto | none | text

auto : user dapat menyeleksi conten dari sebuah element.
none : user tidak dapat menyeleksi conten (disable user-select).
text : user dapat menyeleksi text dari sebuah element.

Contoh :
user dapat menyeleksi conten dari sebuah element :

p {-webkit-user-select: auto;}

user tidak dapat menyeleksi conten (disable user-select) :

p {-webkit-user-select: none;}

user dapat menyeleksi text dari sebuah element :

p {-webkit-user-select: text;}

Untuk Gecko/Firefox syntaxnya :

-moz-user-select: none | text | all | element

Untuk Internet Explorer 10 syntax yang biasa digunakan :

-ms-user-select: none | text | auto | element

none : user tidak dapat menyeleksi conten (disable user-select).
text : user dapat menyeleksi text dari sebuah element.
auto : user dapat menyeleksi conten dari sebuah element.
Catatan :

• Cara ini ternyata tidak bisa diterapkan di browser Opera (tidak berfungsi), walaupun sudah ditambahkan parameter yang biasa digunakan di browser Opera, atau ada yang tahu caranya dan ingin menambahkan? saya akan sangat berterima kasih.
• Mohon dikoreksi jika penjelasan saya tentang user selection ini ada yang kurang pas atau kurang tepat.

Cara mengatasi  disable user-select :

Seperti yang saya singgung di atas, banyak cara yang bisa dilakukan untuk mencegah copy paste content atau postingan blog, baik dengan menggunakan plugin atau tanpa plugin, menggunakan script php, javascript, CSS dll, tapi begitu mudahnya pula untuk mengakalinya.

Demikian halnya dengan cara ini, meskipun sudah diterapkan disable user-select (mouse selection tak berfungsi) cara ini bisa disiasati dengan menggunakan browser jadul yang tidak support CSS3, Opera atau jika menggunakan Firefox klik menu View pilih Page Style kemudian klik/pilih yang No Style, maka dalam sekejap semua fungsi CSS tidak akan berfungsi termasuk disable user-select (mouse selection).

Selanjutnya yaa terserah anda apakah mau copas atau tidak, dalam hal ini saya tidak mengajarkan copas dalam arti yang negatif yaitu aktifitas salin tempel postingan orang lain kemudian dipublish di blog sendiri atau orang lain tapi tanpa menyertakan/menyebutkan link sumbernya. Kalau copas dari blog sendiri yaaa gak apa-apa atau copas blog orang lain tapi hanya untuk dikonsumsi dan dibaca sendiri di komputer lokal misalnya.