Cara menggunakan react html entities

React Native adalah framework yang dibangun untuk membantu para Developer dalam mengembangkan suatu aplikasi Mobile seperti Android atau iOS. Di sini kita akan belajar gimana caranya mengtransformasi dari Design di Figma ke bentuk code (tahap development) menggunakan React Native.

Nantinya juga kita akan membangun API dan CMS untuk mengatur data-data pengguna, transaksi, dan lainnya menggunakan framework PHP yaitu adalah Laravel versi 8 ditambah dengan Jetstream.

Jika kalian tertarik untuk belajar lebih lanjut tentang bagaimana caranya Website dan Mobile developer bekerja sama dalam membangun aplikasi, silakan bergabung dan kami akan tunggu di kelas.

Di dalam tutorial Form PHP sebelumnya, kita telah membahas cara melalakukan pengecekan variabel form apakah telah tersedia untuk diproses (dengan fungsi isset()), apakah variabel tersebut kosong (dengan fungsi empty()), atau apakah variabel form tersebut memiliki tipe data tertentu.

Masih berkaitan dengan proses validasi form, kali ini kita akan membahas tentang cara mencegah user untuk memasukkan kode ’khusus’ seperti JavaScript atau kode HTML kedalam form. Dalam tutorial kali ini kita akan mempelajari Cara Validasi Form untuk Mencegah Cross-site Scripting dan HTML injection.


Pengertian Cross-site Scripting dan HTML injection

Cross-site Scripting atau sering disingkat dengan XSS adalah jenis serangan ke sebuah situs dengan cara ’menyisipkan’ kode script (biasanya JavaScript) ke dalam sebuah situs. Hal ini hanya akan berhasil jika situs tersebut memiliki fitur untuk menampilkan kembali isian form ke web browser, seperti form komentar. Sedangkan HTML injection adalah istilah yang lebih spesifik kepada cara ’menyisipkan’ kode HTML kedalam sebuah situs.

Sebagai programmer web, penanganan untuk Cross-site Scripting maupun HTML injection merupakan hal yang sangat penting, terutama dalam pembuatan kode form dengan PHP. Karena form pada dasarnya dapat diinput oleh siapa saja, maka kita perlu memproteksi situs dari kode-kode berbahaya yang bisa diinput oleh user melalui form.


Contoh Cross-site Scripting dan HTML injection

Agar lebih memahami maksud dari Cross-site Scripting dan HTML injection, kita akan coba menginputnya melalui contoh halaman form.html dan proses.php dari tutorial sebelumnya.

Silahkan buka halaman form kita (form.html), lalu input kode dibawah ini kedalam dalam salah satu kotak inputan form:

<script>alert('Selamat datang di duniailkom')</script>

Dan anda akan mendapati tampilan berikut:

Cara menggunakan react html entities
Tampilan tersebut adalah hasil dari kode JavaScript yang baru saja kita input melalui form. Kode tersebut dapat berjalan karena pada halaman proses.php kita langsung menampilkan data yang diinput oleh user tanpa melakukan proses filter.

Hal ini sangat berbahaya karena dengan kode JavaScript seseorang bisa melakukan ’hampir segalanya’ dengan situs kita. Tidak hanya sekedar menampilkan ucapan selamat seperti kode diatas, tetapi seseorang juga bisa merubah background, mengubah tampilan seluruh web, bahkan mengarahkan pengunjung ke situs lain (redirect).

Cara menggunakan react html entities
Walaupun kode diatas tidak mengandung script, namun kode HTML tersebut akan membuat tampilan hasil form menjadi berantakan (bayangkan jika kita memiliki halaman yang berisi tabel berisi nama-nama seluruh user, dan kode diatas akan menghancurkan desain web yang telah dirancang).


Cara Mencegah Cross-site Scripting dan HTML injection

Salah satu cara sederhana untuk menghindari Cross-site Scripting dan HTML injection adalah dengan membuat karakter-karakter yang memiliki ’makna’ di dalam HTML dan JavaScript untuk diubah menjadi named entity, yaitu menkonversi karakter khusus seperti < menjadi &lt;, dan karakter > menjadi &gt;. Atau cara lainnya adalah dengan menghilangkan sama sekali seluruh tag HTML atau script dari inputan user.

Cara menggunakan react html entities
Kemudian perhatikan hasil tampilan dari proses.php. Seperti yang dirancang, kali ini hasil inputan tersebut akan difilter agar lebih aman.
Cara menggunakan react html entities

Jika anda melihat kode yang dihasilkan, maka akan terlihat bahwa fungsi htmlspecialchars() akan mengubah

<script> alert('Selamat datang di duniailkom')</script>

menjadi

&lt;script&gt; alert('Selamat datang di duniailkom')&lt;/script&gt;

Perhatikan bahwa karakter khusus seperti < dan > telah diubah menjadi named entity.

Sedangkan untuk kotak inputan email, seluruh tag <br> telah di filter dan dihapus secara otomatis.


Validasi dengan htmlspecialchars atau strip_tags?

Pilihan apakan menggunakan fungsi htmlspecialchars() atau strip_tags() tergantung kepada alur logika form yang kita buat. Untuk isian form seperti user_name, email, dan alamat akan lebih aman jika kita tidak membolehkan tag HTML sama sekali (menggunakan fungsi strip_tags()), namun untuk kotak form komentar, mungkin kita akan membolehkan beberapa tag untuk diproses seperti tag <b>, tag <i>, atau mungkin juga tag <a>.

Fungsi strip_tags() memiliki argumen kedua yang bisa diisi dengan tag-tag HTML apa saja yang ’dibolehkan’. Jika kita membolehkan tag <a>, <b> dan tag <i> untuk variabel $komentar, maka penulisannya bisa dibuat menjadi:

$komentar=strip_tags($komentar, '<a><b><i>').

Sedangkan untuk fungsi htmlspecialchars(), jika anda ingin karakter tanda kutip ( ’ ) juga diubah menjadi named entity, kita bisa menambahkan 1 argumen optional untuk fungsi htmlspecialchars(), dengan pilihan ENT_QUOTES. Sehingga dalam contoh variabel $nama, kita bisa menulisnya menjadi:

$nama=htmlspecialchars($nama, ENT_QUOTES);

Dengan demikian, jika diinput:

<script>alert('Selamat datang di duniailkom')</script>

Akan diproses menjadi:

Dunia <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> Ilkom
0

Perhatikan bahwa karakter kutip ( ‘ ) diganti menjadi kode &#039.


Mengenal Fungsi htmlentities()

Selain fungsi htmlspecialchars() dan fungsi strip_tags(), dalam pembahasan mengenai validasi dan karakter entity HTML, PHP masih memiliki 1 lagi fungsi yang sering dipakai, yakni fungsi htmlentities().

Fungsi htmlentities() akan mengkonversi seluruh karakter khusus di dalam sebuah string menjadi entity, tidak hanya karakter <, >, & dan ” seperti pada fungsi htmlspecialchars(). Fungsi htmlentities() akan memproses karakter khusus lain seperti: ™, ©, ®, atau Σ menjadi named entity.

Sebagai contoh, berikut adalah hasil konversi fungsi htmlentities():

Dunia <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> Ilkom
1

Dan berikut adalah hasilnya:

Cara menggunakan react html entities
Seperti yang terlihat bahwa fungsi htmlentities() akan mengubah seluruh karakter khusus menjadi named entity HTML.


Dalam tutorial kali ini, kita telah membahas penggunaan fungsi htmlspecialchars(), fungsi strip_tags() dan fungsi htmlentities() untuk membuat form kita lebih aman. Dalam tutorial berikutnya, kita akan membahas trik dalam menampilkan pesan kesalahan di halaman form.html, bukan di halaman proses.php seperti yang kita tampilkan pada tutorial ini dan tutorial form PHP sebelumnya.