Salah satu risiko yang kerap menghantui setiap aplikasi adalah adanya serangan XSS pada Codelgniter. Teknologi kini semakin canggih, oleh karena itu Anda pastinya dapat melakukan antisipasi terhadap serangan tersebut. Tetapi, apabila apabila aplikasi Anda telah terkena serangan, maka Anda harus bertindak secara cepat dan tepat untuk mengatasi serangan XSS pada Codelgniter tersebut.
Mengatasi serangan XSS memang tidak bisa dilakukan secara sembarangan. Terdapat penanganan khusus yang harus dilakukan oleh seseorang yang telah paham mengenai hal tersebut. Untuk mengetahui bagaimana cara mengatasi serangan XSS di Codelgniter, maka berikut ini adalah beberapa hal yang perlu Anda simak terlebih dahulu mulai dari pengertian hingga cara penanganannya.
Pengertian XSS
Bagi Anda yang bekerja di bidang pemrograman, pasti sudah tidak asing dengan singkatan XSS. XSS sendiri merupakan sebuah singkatan dari Cross Site Scripting. Istilah ini digunakan untuk merujuk kepada suatu serangan yang biasa menargetkan aplikasi web. Serangan XSS ini biasanya dilakukan dengan cara menginjeksi kode javascript yang berasal dari sisi klien.
Apabila suatu aplikasi terkena serangan ini, maka dapat terjadi pencurian data, pengambil-alihan kendali di sesi pengguna, phishing, serta penginputan kode jahat tertentu. Oleh karena itu, para pengembang menggolongkan serangan XSS sebagai salah satu serangan cyber yang berbahaya dan dapat menimbulkan banyak kerugian.
Cara Mengatasi Serangan XSS pada Codelgniter
Untuk dapat mengatasi serangan XSS oleh peretas, maka Anda sebagai pengembang harus mengikuti hal yang dilakukan oleh peretas tersebut. Dengan kata lain, untuk menangkap seorang peretas, maka Anda harus berpikir dan bertindak seperti peretas. Untuk itu, berikut ini adalah cara melakukan serangan XSS sehingga Anda dapat memperkecil celah-celah peretasan di kemudian hari.
Reflected XSS
Reflected XSS adalah salah satu jenis serangan yang cukup sering dilakukan oleh seorang peretas. Serangan ini biasanya terjadi karena adanya serangan di bagian input dari parameter query string yang ditampilkan. Contoh dari reflected XSS dapat ditunjukkan pada penjelasan berikut ini.
<?php class Search extends CI_Controller { public function index() { $data["keyword"] = $this->input->get("keyword"); // do search and render result to view $this->load->view('search', $data); } }
Susunan kode pemrograman yang ada pada fitur pencarian. Apabila kode tersebut kemudian dilihat pada menu View, maka $keyword yang ditampilkan akan menjadi seperti berikut.
<p>Hasil pencarian dengan kata kunci <?= $keyword ?></p> <p>Hasil: ...</p>
Reflected XSS dapat terjadi apabila peretas mengubah kode pemrograman di atas. Apabila peretas menginputkan keyword dengan menggunakan kode Javascript seperti berikut, maka akan mengubah hasil pencariannya.
index.php/search/?keyword=<script>alert('hacked!')</script>
Tampilan website, khususnya pada fitur pencarian akan berubah dan menampilkan halaman kosong dengan notifikasi bahwa halaman tersebut telah diretas. Berikut ini adalah gambarnya.
Untuk mengatasi jenis serangan reflected XSS, Anda bisa mengatasi serangan XSS pada codelgniter tersebut dengan cara melakukan perubahan pada kode pemrograman di fitur pencarian. Anda dapat menggunakan fungsi htmlentities() pada bagian View guna menampilkan variabel $keyword. Berikut ini adalah susunan kode pemrograman yang dapat Anda salin ke website.
<p>Hasil pencarian dengan kata kunci <?= htmlentities($keyword) ?></p> <p>Hasil: ...</p>
Dengan mengaplikasikan kode pemrograman tersebut, Anda telah dapat mengatasi serangan reflected XSS yang membahayakan. Apabila kode tersebut berhasil mengatasi serangan XSS, maka tampilan website milik Anda, khususnya di halaman pencarian akan menjadi seperti berikut.
Stored XSS
Selain serangan reflected XSS, terdapat juga serangan ke codelgniter yang bernama stored XSS. Serangan jenis ini merupakan serangan yang dilakukan dengan cara memasukkan sebuah injeksi XSS ke berbagai input yang ada dan disimpan di database maupun berbagai tempat penyimpanan lain. Oleh karena itu, untuk mendeteksi serangan ini cukup mudah. Anda hanya perlu memperhatikan input-input tersebut di halaman View. Apabila terjadi serangan XSS, maka akan terjadi eksekusi kode injeksi XSS. Contoh dari serangan jenis stored XSS adalah sebagai berikut.
Apabila Anda tengah membuat sebuah fitur untuk aplikasi berbasis website tentang lowongan pekerjaan, maka berikut ini adalah input yang dibutuhkan ketika hendak menambahkan sebuah lowongan baru.
- Name judul lowongan kerja
- Job_image_url alamat URL poster lowongan kerja
- Job_url alamat URL pendaftaran lowongan kerja
Input-input tersebut harus Anda perhatikan baik-baik agar lowongan baru dapat ditambahkan. Terkait kode controllernya, berikut adalah kode yang harus Anda gunakan. Pastikan Anda menuliskannya persis seperti kode-kode berikut.
<?php class Jobvacancy extends CI_Controller { public function addjob() { if ($this->input->method() === "post") { $data["job"] = $this->input->post(); // di sini biasanya dilakukan penyimpanan ke database return $this->load->view("list_job", $data); } $this->load->view('add_job_form'); } }
Setelah memasukkan kode controllernya, selanjutnya Anda akan melihat kode pemrograman seperti berikut ini di halaman View.
Berikut ini adalah kode pemrograman yang ada di halaman View untuk bagian Nama Pekerjaan:
<h1><?= $job["name"] ?></h1> <img src='<?= $job["job_image_url"] ?>' /> <br> <a href='<?= $job["job_url"] ?>'>Link Pendaftaran</a>
Sedangkan berikut ini adalah kode pemrograman yang ada di halaman View untuk bagian Penambahan Format Pekerjaan.
<form action="" method="post"> <label for="name">Vacancy Job name</label> <input type="text" name="name" > <br> <label for="job_image_url">Image URL</label> <input type="text" name="job_image_url"> <br> <label for="job_url">Job URL</label> <input type="text" name="job_url"> <br> <input type="submit" value="Simpan"> </form>
Setelah memasukkan kode-kode di controller secara benar serta mengecek ketepatan kode-kode pemrograman di halaman View, maka tampilan pada website akan menjadi seperti berikut.
Setelah memastikan bahwa tampilan website lowongan kerja yang ingin Anda buat seperti gambar di atas, maka salah satu macam seringan Stored XSS dapat diatasi. Namun begitu, Anda juga harus mengatasi beberapa macam serangan Stored XSS lainnya. Dengan kata lain, website yang Anda kembangkan belum sepenuhnya aman dari serangan para peretas.
Anda perlu mengantisipasi atribut src pada bagian image serta atribut hred pada link yang dibuat. Hal tersebut karena para peretas juga kerap memberikan sebuah injeksi sehingga website tidak dapat beroperasi seperti biasanya. Apabila injeksi telah dimasukkan oleh peretas pada atribut src atau hred, maka tampilan website akan menjadi seperti berikut.
Salah satu jenis serangan XSS lainnya adalah serangan menggunakan suatu double quote yang ada di atribut HTML. Berikut ini adalah double quote yang biasa digunakan untuk penyerangan sebuah website.
<img src="<?= htmlentities($job["job_image_url"]) ?>" /> <a href="<?= htmlentities($job["job_url"]) ?>">Link Pendaftaran</a>
Setelah menggunakan atribut double quote tersebut, maka berikut ini adalah tampilannya ketika dibuka di bagian Inspect Elements.
Guna mengatasi serangan XSS pada codelgniter seperti di atas, maka Anda dapat melakukan validasi data di sisi klien ataupun server. Untuk melakukan validasi data di bagian server, berikut ini adalah controller yang harus Anda tuliskan.
<?php class Jobvacancy extends CI_Controller { public function addjob() { $this->load->library('form_validation'); if ($this->input->method() === "post") { $data["job"] = $this->input->post(); $rules = [ [ 'field' => 'name', 'label' => 'Name', 'rules' => '' ], [ 'field' => 'job_image_url', 'label' => 'Image URL', 'rules' => 'valid_url' ], [ 'field' => 'job_url', 'label' => 'Job URL', 'rules' => 'valid_url' ], ]; $this->form_validation->set_rules($rules); if ($this->form_validation->run() == FALSE) { return $this->load->view('add_job_form'); } // di sini biasanya dilakukan penyimpanan ke database return $this->load->view("list_job", $data); } $this->load->view('add_job_form'); } }
Setelah berhasil menuliskan controller sesuai dengan kode-kode di atas, selanjutnya adalah mengubah view di bagian formatnya dengan cara memasukkan kode-kode berikut.
<form action="" method="post"> <label for="name">Vacancy Job name</label> <input type="text" name="name" value="<?= htmlentities(set_value('name'), ENT_QUOTES) ?>"> <div style="color: tomato;"><?= form_error('name') ?></div> <br> <label for="job_image_url">Image URL</label> <input type="text" name="job_image_url" value="<?= htmlentities(set_value('job_image_url'), ENT_QUOTES) ?>"> <div style="color: tomato;"><?= form_error('job_image_url') ?></div> <br> <label for="job_url">Job URL</label> <input type="text" name="job_url" value="<?= htmlentities(set_value('job_url'), ENT_QUOTES) ?>"> <div style="color: tomato;"><?= form_error('job_url') ?></div> <br> <input type="submit" value="Simpan"> </form>
Apabila Anda telah melakukan semua cara di atas, berarti Anda telah berhasil melakukan validasi data di server. Sedangkan, untuk melakukan validasi data di bagian klien, maka Anda harus memasukkan kode view berikut untuk bagian formatnya.
<form action="" method="post"> <label for="name">Vacancy Job name</label> <input type="text" name="name" value="<?= htmlentities(set_value('name'), ENT_QUOTES) ?>"> <div style="color: tomato;"><?= form_error('name') ?></div> <br> <label for="job_image_url">Image URL</label> <input type="url" pattern="[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)" name="job_image_url" value="<?= htmlentities(set_value('job_image_url'), ENT_QUOTES) ?>"> <div style="color: tomato;"><?= form_error('job_image_url') ?></div> <br> <label for="job_url">Job URL</label> <input type="url" pattern="[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)" name="job_url" value="<?= htmlentities(set_value('job_url'), ENT_QUOTES) ?>"> <div style="color: tomato;"><?= form_error('job_url') ?></div> <br> <input type="submit" value="Simpan"> </form>
Apabila validasi data Anda berhasil, maka tampilannya akan berubah menjadi seperti pada gambar di bawah ini. Dengan kata lain, Anda telah berhasil mengamankan website dari serangan Stored XSS.
Demikian informasi terkait mengatasi serangan XSS pada codelgniter yang dapat Anda pahami dan pelajari. Memahami cara mengatasi serangan XSS tersebut sangatlah penting bagi seorang pengembang. Dengan memahami cara-cara tersebut, maka Anda dapat terhindar dari berbagai kerugian yang dikarenakan peretasan yang terjadi di website Anda.
