Cara mengunci konten website agar tidak bisa di edit melalui inspect element / developer tool – Terkadang ada saja orang yang iseng melakukan perubahan-perubahan terhadap konten kita melalui fitur yang terdapat di browser seperti inspect element atau developer tools.

Cara tersebut bisa saja dilakukan oleh orang yang tidak bertanggung jawab untuk melakukan penipuan atau bahkan fitnah. Misalnya saja yang terjadi pada pendapatan seseorang di Google Adsense, kalau kita lihat di berbagai forum, banyak sekali orang yang sebenarnya pendapatannya hanya beberapa $dollar namun diubah melalui inspect element menjadi ribuan $dollar, padahal page view nya saja 0. Anda bisa lihat di screenshot berikut ini.

fake adsense earning

Hal tersebut biasanya dilakukan oleh seseorang agar dianggap hebat dan sukses oleh orang lain, sehingga program atau jasa yang dia jual terkesan sangat menjanjikan karena sudah terbukti dan bisa jualannya laku banyak. Padahal semua bohong.

Namun ada juga yang melakukan hal tersebut untuk iseng-iseng saja, sebagai bahan lucu-lucuan dan lainnya, seperti contoh diatas yang hanya untuk lucu-lucuan yang dilakukan seorang teman lalu dia share ke Facebook.

Agar konten tidak bisa di edit melalui Inspect Element / developer tool

kunci konten website jquery

Nah untuk itu, agar informasi penting yang ada di website Anda tidak bisa diubah-ubah maka ada baiknya bagian konten yang penting tersebut dibuat kebal terhadap inspect element / developer tools.

Caranya cukup mudah, gunakan saja plugin Jquery Lock.

Dengan plugin ini, kita bisa mengunci sebuah elemen agar tidak bisa di ubah-ubah oleh orang lain bahkan melalui inspect elemen atau developer tools yang ada di Google Chrome.

Penggunaannya cukup mudah, Anda cukup menyertakan jquery dan plugin jquery lock di website Anda, lalu gunakan script seperti dibawah ini, dalam contoh ini kita akan mengunci tag H1 dan DIV yang memiliki class .kunci. Selain class tersebut tetap bisa di edit.

<script src="jquery.js"></script>
<script src="jquery.lock.min.js"></script>
<script>
	$(document).ready(function() {
		$(".kunci").lock();
	});
</script>




<h1 class="kunci">Saya Tidak Bisa Diubah, Coba Deh</h1>






<div class="kunci">Saya Juga Dikunci, tidak bisa di edit</div>






<div>Konten yang ini tidak di dikunci, ini masih bisa diedit</div>






<div>Baca tutorialnya di <a href="http://www.jurnalweb.com/cara-agar-konten-website-tidak-bisa-di-edit-inspect-element">Jurnalweb.com</a></div>

Anda juga bisa menambahkan pesan alert ketika orang hendak mengubah konten dengan menambahkan parameter berikut di method lock().

$(".kunci").lock({
	alertMessage: "You can`t change this."
});

Silahkan lihat demo dan download script nya

Anda juga bisa mengunduh plugin Jquery Lock disini.

* Untuk lebih menyulitkan, lebih bagus lagi jika konten penting tersebut di generate dengan javascript juga, sehingga tetap tidak bisa di ubah ketika javascript dimatikan.

*Trik ini memang tidak 100% efektif, karena apapun yang sudah di baca browser pasti bisa diubah, namun ini cukup bagus untuk pencegahan dan setidaknya untuk menambah pengetahuan serta skill ngoding.

Semoga berguna

Artikel Lain:

background slideshow dengan jqueryCara Membuat Background Slideshow dengan Jquery show hide passwordCara Show Hide Password dengan Javascript belajar jquery10+ Website Untuk Belajar jQuery username availabilityCek Ketersediaan Data Username dengan AJAX jQuery PHP email-validation-jquery-phpTutorial Cara Validasi Email dengan AJAX jQuery dan PHP back to topMembuat tombol scroll ke atas (back to top) dengan jQuery background video html5Cara Membuat Background Video Full-Screen dengan HTML5 & Jquery embed youtubeCara Embed Video YouTube Responsive, Efisien & Tidak Berat alexa rankCara Mendapatkan Ranking Alexa dengan PHP developer javascriptTips Menjadi Developer Javascript redesign websiteTips Mengganti Theme Web Untuk Menambah Pengunjung Disable klik kanan pada webCara Mematikan Klik Kanan Pada Website Blog