Cara Membuat Anti Copy Text Dengan Javascript dan CSS

Selamat datang di tutorial cara mencegah penyalinan teks (Anti Copy Text) di halaman web menggunakan Javascript dan CSS. Apakah Anda mengalami masalah dengan pencuri konten? Apakah artikel Anda disalin dan ditempel di tempat lain tanpa izin Anda? Maka saatnya untuk menempatkan beberapa perlindungan untuk konten Anda.

Untuk menonaktifkan penyalinan teks di CSS dan Javascript, ada 3 hal yang perlu kita lakukan:

1. Nonaktifkan klik kanan (contextmenu) untuk mencegah salin dan tempel.
2. Mengubah hasil salinan di papan klip.
3. CSS menonaktifkan pilih dan sembunyikan penyorotan teks.

Tapi bagaimana cara kita menerapkan kode Anti Copy Text ini? Baca terus untuk mengetahui caranya!

Demo Anti Copy Text

Tulisan ini tidak bisa disalin!

Baiklah, mari kita beralih ke cara-cara "Anti Copy Text" yang dapat kita terapkan untuk mencegah penyalinan.

Menonaktifkan klik kanan (contextmenu)

// (A) Prevent right click from opening
document.addEventListener("contextmenu", (evt) => {
  evt.preventDefault();
}, false);

Pertama, mari kita mulai dengan salah satu mekanisme paling umum untuk mencegah penyalinan – Menonaktifkan klik kanan, salin.

Yang harus kita lakukan menambahkan addEventListener("contextmenu"), dan mencegahnya dibuka dengan evt.preventDefault(). Ya, kita sebenarnya tidak menargetkan klik kanan mouse di sini. Karena ada cara lain untuk membuka menu, dengan sesuatu yang disebut "layar sentuh" akhir-akhir ini. Jadi contextmenu lebih akurat.

Mengubah hasil salinan di papan klip

// (B) Change the copy on the clipboard
document.addEventListener("copy", (evt) => {
  // (B1) Replace the resulting copy if you want
  evt.clipboardData.setData("text/plain", "You are prohibited from copying any text from this web.");
  // (B2) Prevents the default copy action
  evt.preventDefault();
}, false);

Selanjutnya, ini adalah salah satu yang menurut saya paling masuk akal – Bahkan setelah menonaktifkan contextmenu, orang masih dapat menyalin menggunakan tombol pintasan, atau dari item menu browser itu sendiri. Cara terbaik untuk mencegahnya adalah dengan menargetkan event penyalinan itu sendiri. Jadi, jika teks berhasil di salin maka yang muncul di papan klip adalah tulisan yang kita buat diatas. Bagian ini seharusnya cukup jelas.

Kita Listen copy event. Jika mau, Anda dapat mengubah teks hasil yang disalin di papan klip You are prohibited from copying any text from this web. dengan tulisan Anda sendiri. Terakhir, seperti biasa, kita mencegah tindakan penyalinan default – evt.preventDefault().

CSS menonaktifkan pilih dan sorotan teks

/* (C) Disable select + text highlight */
* { user-select: none; }
*::selection { background: none; }
*::-moz-selection { background: none; }

Terakhir, ini adalah mekanisme penonaktifan salinan yang hanya dilakukan dengan CSS ketat. user-select: none yang cukup baik, tetapi kita menambahkan *::selection { background: none } untuk menghapus warna latar belakang teks yang dipilih – Mempersulit untuk mengetahui blok teks mana yang telah dipilih, atau tidak ada teks yang dipilih sama sekali. Pasti cara yang bagus untuk mencegah penyalinan.

P.S. user-select: none tidak akan berfungsi di browser lama, jadi harap berhati-hati.

Menonaktifkan hanya untuk bagian tertentu

<script>
window.addEventListener("load", () => {
  // (A) Target just this section
  var target = document.getElementById("no-copy");
 
  // (B) Prevents the right-click menu from opening
  target.addEventListener("contextmenu", (evt) => {
    evt.preventDefault();
  }, false);
 
  // (C) Changes the copy on the clipboard
  target.addEventListener("copy", (evt) => {
    // (C1) Change the text of the copy if you want
    evt.clipboardData.setData("text/plain", "You are prohibited from copying any text from this web.");
 
    // (C2) Prevents default copy action
    evt.preventDefault();
  }, false);
});
</script>
 
<style>
/* (D) Disable select + text highlight */
#no-copy { user-select: none; }
#no-copy::selection { background: none; }
#no-copy::-moz-selection { background: none; }
</style>
 
<p>You can copy and paste this text.</p>
<p id="no-copy">You cannot copy this section.</p>

Tidak terlalu sulit bukan, jika Anda hanya ingin memproteksi bagian tertentu, maka targetkan saja secara spesifik var target = document.getElementById("no-copy").

Selamat, Anda sekarang telah memasang beberapa kunci, tetapi harap perhatikan bahwa ini tidak akan menghentikan "para penjiplak ulung" yang terlampau niat. Javascript dan CSS bisa mereka nonaktifkan, dan semua "perlindungan" ini akan sia-sia.

Ya. Tetapi memiliki semacam perlindungan masih lebih baik daripada tidak sama sekali. Setidaknya itu akan menghalangi banyak penjiplak yang tidak terlalu cerdas.

Itu saja untuk tutorial Cara Membuat Anti Copy Text Dengan Javascript dan CSS, dan berikut ini adalah bagian kecil tentang beberapa tambahan dan tautan yang mungkin berguna bagi Anda.

Perlindungan hukum & lainnya

Jika hal di atas tidak cukup untuk membungkam para penjiplak, maka inilah saatnya untuk mencari perlindungan hukum.

• Pertama, Anda perlu memasang jebakan. Tambahkan Watermark samar pada gambar Anda, atur pesan tersembunyi "artikel ini milik mydomain.com" di suatu tempat misalnya.
• Biarkan penjiplak mengambil umpannya.
• Kemudian, gunakan Whois untuk mengetahui perusahaan hosting penjiplak mana – Informasi mungkin disembunyikan dan Anda mungkin perlu menghubungi beberapa pihak terkait pencurian konten.
• Setelah Anda mendapatkan informasinya, hubungi perusahaan hosting, tunjukkan bukti bahwa konten Anda telah dicuri. Sebagian besar perusahaan hosting akan mematuhi, membantu, dan mematikan penjiplak untuk selamanya.
• Sebagai alternatif, Anda dapat mendaftarkan hak cipta konten dengan DMCA, membayar sedikit biaya, dan meminta mereka membantu Anda mematikan penjiplak.

Secara pribadi, saya mendaftarkan situs web saya ke Google Search Console dan Bing Webmaster Tools. Saat saya menerbitkan artikel, saya secara manual meminta perayapan dan mendaftar – penjiplak tidak akan memiliki peluang untuk memenangkan peringkat pencarian. Nyatanya, mereka hanya merugikan diri sendiri dengan menyalin lebih banyak.

Terima kasih telah membaca, dan kita telah sampai di akhir panduan ini. Saya harap ini membantu Anda dalam membuat proyek Anda, dan jika Anda ingin berbagi apa pun dengan panduan ini, jangan ragu untuk berkomentar di bawah. Semoga berhasil dan happy coding!

Infographic Cheat Sheet