Membuat Log / Message Pada Console Browser
Sudah lama sepertinya saya tidak melakukan posting di sini, mungkin karena memang banyak kerjaan di dunia nyata, dan juga belajar sana belajar sini. Nah kali saya ingin membagikan cara untuk Membuat Log / Message Pada Console Browser, yang nantinya akan memuculkan pesan Log seperti gambar diatas. Tujuan dari pesan ini sebenarnya adalah untuk mencegah end-user / pengunjung untuk melakukan Self-XSS attack pada suatu situs atau website.
Facebook dan Google+ sudah menerapkan fitur ini pada website mereka, karena memang Self-XSS Attack ini sudah cukup membuat risau pengguna internet, terlebih lagi bagi orang – orang yang memiliki rasa ingin tahu yang tinggi akan hacking. Pengguna akan di iming – imingi akan dapat membobol akun seseorang atau website seseorang dengan menggunakan fitur console developer pada browser dengan menggunakan klik kanan dan pilih inspect, kemudian tinggal memasukan javascript. Padahal javascript yang di copy-paste dan dieksekusi tersebut dapat membahayakan pengguna yang melakukan hal tersebut, yang salah satunya adalah justru dapat memberikan akses akun atau privacy orang tersebut kepada hacker (pemberi iming – iming).
Baik untuk mempelajari mengenai Self-XSS bisa dipelajari lebih lanjut pada https://en.wikipedia.org/wiki/Self-XSS atau https://www.facebook.com/selfxss. Disini saya hanya akan membahas bagaimana cara Membuat Log / Message Pada Console Browser untuk memperingatkan pengujung agar tidak menggunakan browser console tersebut kepada website kita, demi menjaga keamanan dan juga kenyamanan pengunjung.
Disini saya akan menggunakan CMS WordPress sebagai tutorial. Cara ini sebenarnya sangatlah mudah, terlebih lagi bila sobat memiliki keterampilan atau kemampuan dalam CSS, pastinya akan lebih mudah lagi. Pertama pergi ke Edit Themes, Appearance –> Editor. Kemudian Theme Header / Header.php karena kita akan memunculkannya pada setiap halaman yang kita miliki, terutama halaman yang akan diakses oleh pengunjung seperti Homepage, Posting, Page, Archive, dan halaman selainnya. Setelah berada pada Theme Header, scroll langsung kebagian paling bahwa dari header.php dan masukan code dibawah ini pada bagian paling bawah.
<script>
console.log("%cWelcome to RDH.ASIA", "color: blue; font-size: x-large; font-family:tahoma; font-weight:bold");
</script>Script tersebut akan menghasilkan log atau message pada console seperti gambar diatas sebelumnya, yaitu “Welcome to RDH.ASIA” dengan font tahoma, style bold (tebal), dan ukuran x-large (bisa diganti dengan satuan px, misalkan 20px, 30px, 15px), dan berwarna. Sedangkan %c merupakan format untuk dapat memasukan CSS kedalam log sehingga dapat di custom syle, ukuran, warna, dan lainnya sesuai dengan keinginan pembuat log.
Untuk mempelajari lebih lanjut mengenai cara Membuat Log / Message Pada Console Browser atau fitur lain yang ada pada console browser developer yang ada pada Google Chrome, bisa mempelajarinya di https://developer.chrome.com/devtools/docs/console. Disana kita dapat mengetahui lebih lanjut mengenai console developer itu sendiri, serta format – format yang dapat kita gunakan sebagai developer atau pemilik website.
