Embed Size (px)
Citation preview
Perancangan Animasi Interaktif Pembelajaran Web
Security XSS dan SQL Injection Berbasis Web
Artikel Ilmiah
Peneliti :
Erlangga Galih Hariwidayanto (672009028)
T. Arie Setiawan Prasida S.T., M.Cs.
Agustinus Fritz S.Kom., M.Cs.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen SatyaWacana
Salatiga
November 2014
Perancangan Animasi Interaktif Pembelajaran Web
Security XSS dan SQL Injection Berbasis Web
Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Peneliti :
Erlangga Galih Hariwidayanto (672009028)
T. Arie Setiawan Prasida S.T., M.Cs.
Agustinus Fritz S.Kom., M.Cs.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen SatyaWacana
Salatiga
November 2014
i
Universitas Kristen SatyaWacana
Salatiga
November 2014
ii
iii
iv
v
vi
1
Perancangan Animasi Interaktif Pembelajaran Web
Security XSS dan SQL Injection Berbasis Web 1)
Erlangga Galih Hariwidayanto, 2)
T. Arie Setiawan Prasida, 3)
Agustinus Fritz Wijaya
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Jl. Diponegoro 52-60, Salatiga 50711, Indonesia
Email: 1)
[email protected] Abstract
In today's world, the online website technology has led to a wide range of
security issues called cyber crime. The absence of website security course in Faculty of
Technology and Information (FTI) in Satya Wacana Christian University (SWCU),
especially in website programming department, cause the students lack of understanding
in cyber crime that happens recently. This research use development method.
Development models used are procedural models are descriptive models, showing the
steps to be followed to produce an application. This application is designed with
interactive animations that show how the activity of hackers to attack a particular website
SQL Injection and XSS, also included an interactive animation how hackers attack
prevention by providing examples of programming code that is able to block the hacker
attack. Interactive animation applications can assist students in learning web security so
that students understand how to secure a website.
Key Words : Application, Animation,, Web Security, Learning , SQL Injection, Cross
Site Scripting, Hacker.
Abstrak Teknologi website yang terus berkembang didunia saat ini telah memunculkan
berbagai macam masalah keamanan yang disebut dengan cyber crime. Tidak adanya
matakuliah khusus web security pada pembelajaran di FTI UKSW khususnya konsentrasi
rekayasa web membuat mahasiswa tidak mengetahui masalah cyber crime yang sedang
marak terjadi. Penelitian ini menggunakan metode penelitian pengembangan. Model
Pengembangan yang dipakai adalah model prosedural yaitu model yang bersifat
deskriptif, menunjukkan langkah-langkah yang harus diikuti untuk menghasilkan sebuah
aplikasi. Aplikasi ini dirancang dengan animasi interaktif yang menampilkan aktivitas
bagaimana hacker melakukan penyerangan terhadap sebuah website khususnya SQL
Injection dan XSS, disertakan juga animasi interaktif bagaimana cara penanggulangan
serangan hacker dengan memberikan contoh kode pemrograman yang mampu menghalau
serangan hacker. Aplikasi animasi interaktif dapat membantu mahasiswa dalam
mempelajari web security sehingga mahasiswa mengerti bagaimana mengamankan
sebuah website.
Kata Kunci : Aplikasi, Animasi, Interaktif, Web Security, Pembelajaran, Hacker, SQL
Injection, Cross Site Scripting.
1)
Mahasiswa Fakultas Teknologi Informasi Jurusan Teknik Informatika, Universitas
Kristen Satya Wacana Salatiga. 2)
Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga. 3)
Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga.
2
1. Pendahuluan Perkuliahan merupakan faktor utama mahasiswa dalam menuntut ilmu di
jenjang pendidikan universitas. Mahasiswa menimba ilmu dari proses
perkuliahan, mencerna materi yang diberikan sebagai bekal saat di dunia kerja [1].
Oleh sebab itu proses perkuliahan adalah hal penting bagi mahasiswa dalam
mencari ilmu sebagai bekal nantinya saat mahasiswa menjalani dunia pekerjaan.
Proses perkuliahan yang baik akan menghasilkan sumber daya manusia
berkualitas sehingga dapat bertahan dalam pesatnya perkembangan teknologi
yang terus berkembang.
Salah satu masalah yang muncul di bidang teknologi informasi saat ini
adalah Cyber Crime khususnya SQL Injection dan XSS yang sering kali
menyerang website yang sudah dibangun oleh para programer. Pada akhirnya
programmer website harus membangun ulang atau memperbaiki website yang
telah dibuat dan menerima banyak kerugian. Data yang diambil dari Web Hacking
Incident Database menyatakan SQL Injection dan XSS menjadi serangan
terbanyak yang dilakukan hacker terhadap aplikasi website dengan 18% untuk
SQL Injection dan 12% untuk XSS [2].
Pembelajaran web security mempelajari bagaimana seorang programer
web mengimplementasikan keamanan pada website yang sedang dikembangkan
untuk melindungi pengguna website. Padahal saat ini cyber crime sudah berhasil
menginfeksi banyak website di seluruh dunia yang tidak diperlengkapi dengan
security system dari serangan-serangan hacker. Tanpa sarana yang tepat dalam
pembelajaran web security, mahasiswa menjadi kurang pengetahuan dalam
menangani masalah kerentanan keamanan sebuah website.
Setelah melakukan observasi pada perkuliahan di FTI UKSW khususnya
konsentrasi rekayasa web, saat ini belum ada matakuliah khusus yang
mengajarkan tentang bagaimana menjaga keamanan sebuah website. Kuisioner
yang telah diberikan kepada mahasiswa FTI UKSW khususnya konsentrasi
rekayasa web juga menyatakan bahwa mahasiswa tidak memiliki pengetahuan
tentang serangan SQL Injection dan XSS, dari hasil kuisioner juga didapatkan data
bahwa mahasiswa membutuhkan dasar-dasar ilmu pengetahuan tentang web
security dan mengetahui cara-cara mengidentifikasi serta mencegah gangguan
keamanan pada sebuah website. Kurangnya sumber daya pembelajaran di
universitas dan tidak adanya matakuliah khusus yang membahas tentang web
security membuat mahasiswa memiliki keterbatasan dalam menguasai teori dan
praktek menerapkan web security pada pembuatan sebuah website. Tanpa sarana
yang tepat dalam pembelajaran web security, mahasiswa menjadi kurang
pengetahuan dalam menangani masalah kerentanan keamanan sebuah website.
Berdasarkan masalah tersebut muncul sebuah ide untuk memberikan
pembelajaran web security di luar perkuliahan kepada mahasiswa FTI konsentrasi
web agar dapat menanggulangi serangan Cyber Crime khususnya SQL Injection
dan XSS. Sarana yang dapat digunakan untuk memberikan pembelajaran web
security adalah dengan merancang website yang dapat membantu mahasiswa
mempelajari dasar keamanan website, yang dirancang secara menarik dengan
penjelasan materi menggunakan animasi interaktif sesuai masukan dari
mahasiswa yang sudah mengisi kuisioner. Website ini memberikan materi
3
pembelajaran tentang langkah-langkah pengamanan website dengan animasi
interaktif yang dimulai dengan melihat cara penyerangan oleh hacker yang
menggunakan metode SQL Injection dan XSS, lalu mahasiswa diberikan petunjuk
code program bagaimana menanggulangi serangan hacker dari metode tersebut.
Sehingga mahasiswa dapat belajar bagaimana cara penyerangan yang dilakukan
hacker dan penanggulangan serangan terhadap keamanan website, menggunakan
rancangan aplikasi animasi interaksi dengan cara mengakses website ini dan
mahasiswa dapat mengaksesnya kapanpun dan dimanapun.
2. Tinjauan Pustaka Penelitian berjudul “Improving Web Security Education with Virtual Labs
and Share Course Modules.”, oleh Lixin Tao, Li-Chiau Chen, dan Chienting Lin
dari Pace University juga menggunakan animasi interaksi sebagai alat untuk
menyampaikan materi ilmu teknologi informasi khususnya dasar keamanan
website, dalam hal ini menggunakan VMware sebagai alat pembelajaran web
security education [1].
Penelitian berjudul "Pengembangan Media Pembelajaran Batik
Menggunakan Animasi multimedia Interaktif Pada Mata Pelajaran Seni Budaya di
SMA 1 Wonosobo" membahas tentang pengembangan media pembelajaran
dengan menggunakan Animasi multimedia interaktif sebagai sumber belajar
tentang batik untuk menggantikan metode pembelajaran konfensional dengan
sumber ajar Lembar kerja Siswa (LKS).[3]
Penelitian mengenai SQL Injection berjudul “SQL Injection Attacks:
Techniques and Protection Mechanism.”, oleh Nikita Patel, membahas Web
Privacy atau kemampuan untuk menyembunyikan data informasi seorang user,
namun saat ini hampir semua aplikasi memiliki kelemahan yang membuat
serangan terhadap data pribadi itu sangat memungkinkan. Serangan dapat terjadi
karena desain yang buruk, kesalahan konfigurasi, atau buruknya pembuatan kode
program aplikasi web. Serangan dapat menyerang database, control terhadap
aplikasi web, dan komponen lain yang harus dilindungi dari serangan. Segala
bentuk serangan SQL Injection sangat berbahaya bagi seluruh komponen website
[4].
Penelitian tentang serangan Cross-Site Scripting pada aplikasi web
berjudul “Prevention of Cross-Site Scripting Attacks on Current Web
Applications”, oleh Joaquin Garcia membahas cara memasukan kode berbahaya,
dalam rangka memanipulasi kepercayaan antara pengguna website dengan
aplikasi website. Jika kerentanan dalam hal pengamanan website berhasil
dieksploitasi, pengguna web yang berbahaya secara instan dapat mencuri data dari
user atau mungkin dari aplikasi website sekalipun [5].
Media pembelajaran adalah segala sesuatu yang dapat digunakan untuk
menyalurkan pesan (bahan pembelajaran), sehingga dapat merangsang perhatian,
minat, pikiran, perasaan, sikap dan kepercayaan siswa dalam kegiatan belajar
untuk mencapai tujuan belajar. Aplikasi animasi interaktif web security termasuk
dalam media pembelajaran karena dapat menyampaikan pesan (bahan
pembelajaran) yang dikemas dengan menampilkan gambar bergerak yang dapat
4
merangsang perhatian dan minat mahasiswa untuk belajar dan mengerti
penyerangan dan penanggulangan SQL Injection dan XSS.
Animasi berasal dari kata animation yang berarti ilusi dari gerakan.
Animasi adalah sekuen gambar yang diekspos pada tenggang waktu tertentu
sehingga tercipta sebuah ilusi gambar bergerak, ilusi dari gerakan tersebut dapat
terjadi secara cepat sekumpulan gambar yang mempunyai gerakan secara bertahap
dari masing-masing bagian objek gambar tersebut. Maka dapat disimulkan
animasi adalah kumpulan gambar yang disusun secara berurutan untuk dapat
menciptakan ilusi gerak. Pembelajaran dengan menggunakan animasi komputer
memberikan kesempatan kepada peseta didik untuk belajar secara dinamis dan
interaktif. Untuk itu pemanfaatan pembelajaran animasi merupakan salah satu
faktor yang sangat penting untuk menjadikan sebuah aplikasi pembelajarn
semakin menarik. Pemanfaatannya merupakan suatu hal yang harus digunakan
secara tepat.
Melalui penelitian ini, Aplikasi animasi interaktif digunakan sebagai alat
pembelajaran web security khususnya dua kasus serangan pada aplikasi web yang
sangat berbahaya yaitu SQL Injection dan XSS.Karena animasi interaktif dapat
menyampaikan bahan pembelajaran dengan sangat baik, sebab meliputi aspek
visual, audio, dan kinetik yang akan merangsang perhatian, dan minat mahasiswa
untuk mempelajari web security. Aplikasi animasi interaktif akan disajikan dalam
bentuk website agar target user dapat langsung mengakses dari mana saja aplikasi
ini sekaligus mampu berinteraksi dan belajar tentang web security.
Web security adalah proses keamanan otomatis untuk halaman HTML saat
dilakukan browsing pada setiap server. Web security adalah masalah utama dan
ancaman terbesar pada organisasi yang konsen pada masalah intelektual, data-data
penting klien, dan rahasia dagang. Kurangnya kewaspadaan pada web security
dapat mengakibatkan hilangnya reputasi sebuah perusahaan, bahkan dapat
menghancurkan semua bisnis perusahaan itu. Pada Gambar 1 yang dibuat oleh
Web Hacking Incident Database (WHID) pada tahun 2011, dengan nyata
menunjukan banyak sekali beberapa metode hacking yang berbeda-beda, SQL
Injection dan XSS menjadi yang paling populer.
Gambar 1 Data Serangan dari Web Hacking Incident Database [2]
5
SQL Injection adalah salah satu dari kebanyakan mekanisme serangan
yang digunakan oleh hacker untuk mencuri data dari sebuah organisasi. SQL
Injection adalah teknik serangan pada aplikasi website yang paling umum
digunakan saat ini. Teknik ini adalah tipe serangan dengan mengambil
keuntungan dari kode program yang tidak tepat pada aplikasi web yang
memungkinkan hacker menyuntikkan perintah SQL ke form login untuk
mendapatkan akses ke data yang tersimpan pada database.
Cross-Site Scripting dikenal juga sebagai XSS/CSS terbukti menjadi salah
satu teknik hacking aplikasi layer yang paling umum. Cross Site Scripting
memungkinkan penyerang untuk menanamkan kode JavaScript berbahaya,
VBScript, ActiveX, HTML, atau Flash ke dalam halaman dinamis yang memiliki
kerentanan untuk menipu pengguna, mengeksekusi script pada mesin (web server)
dalam rangka untuk mengumpulkan data. Penggunaan XSS dapat digunakan untuk
mengambil informasi pribadi, memanipulasi atau mencuri cookie, menciptakan
permintaan yang salah bagi pengguna yang valid, atau mengeksekusi kode
berbahaya pada aplikasi yang digunakan end-user. Beberapa teknik hacking
seperti Information Disclosures, Content Spoofing dan Stolen Credentials adalah
efek lanjutan dari teknik hacking dengan metode XSS.
3. Metode Perancangan Sistem Tahap ini merupakan penjelasan bagan-bagan yang menggambarkan langkah-
langkah dalam penelitian perancangan aplikasi animasi interaksi sebagai alat
pembelajaran web security. Gambar 2 adalah diagram alur tahapan perancangan
sistem.
Gambar 2 Diagram Alur Tahapan Perancangan Sistem
Mulai
Identifikasi Masalah
Analisis
Kebutuhan SIstem
Perancangan Sistem
(Prototyping model)
Pengujian
Selesai
i
6
Dalam tahap ini diidentifikasikan permasalahan yang ada untuk
menentukan ruang lingkup kebutuhan dari aplikasi yang akan dibangun dari
masalah yang timbul. Pengumpulan kebutuhan dimulai dengan analisis kebutuhan
itu sendiri dengan menyebarkan kuisioner yang diberikan kepada mahasiswa FTI
angkatan 2010. Hasil analisis dari kuisioner menunjukkan mahasiswa belum
mengenal tentang jenis serangan seperti SQL Injection dan XSS yang dapat
merusak sistem sebuah website. Pada kenyataannya SQL Injcetion dan XSS adalah
serangan terbanyak yang terjadi pada website yang ada di jaringan internet.
Perancangan Sistem dilakukan dengan menggunakan metode prototyping.
Prototyping memiliki 3 tahapan dalam merancang sebuah sistem. Pertama Listen
to Customer, Build/Revise Moke-up, lalu Customer Test Drives Moke-ups. Tahap
ini berjalan berulang-ulang hingga didapat sistem yang sudah sesuai dengan
kebutuhan user.
Gambar 3 Tahapan Model Prototype
Gambar 3 merupakah tahapan model prototype. Tahap pertama Listen to
Customer adalah analisis kebutuhan sistem yang dilakukan dengan melakukan
wawancara atau menyebar kuisioner kepada calon pengguna aplikasi yaitu
mahasiswa FTI UKSW khususnya konsentrasi rekayasa web. Tahapan kedua
Buil/Revise Mock-Up adalah tahapan dimana pembangunan sistem berlangsung,
dari tahap sebelumnya yang telah mengumpulkan kebutuhan sistem. Lalu tahapan
terakhir adalah Customer Test Drives Mock-up, pada tahapan ini customer
melakukan uji coba pada sistem. Jika User menemukan kekurangan atau satu lain
hal yang tidak sesuai pada sistem, akan dilakukan perancangan kembali dari tahap
awal Listen to Customer dan berlanjut ke tahap berikutnya, begitu seterusnya
hingga sistem benar-benar sesuai kebutuhan customer.
Pada prototype pertama, aplikasi dirancang dengan sketsa gambar untuk
menunjukan jalannya video animasi yang nantinya animasi akan dibangun dengan
aplikasi flash, user dapat melihat bagaimana proses penyerangan hingga
penanggulangan dalam satu animasi yang berjalan terus menerus hingga akhir dari
animasi. Terdapat 3 aktor yaitu client, admin web, dan hacker dalam frame
berbeda. Gambar 4 adalah sketsa Animasi interaktif prototype pertama yang
menunjukkan bagaimana penyerangan terjadi dan bagaimana penanggulangannya.
7
Gambar 4 Sketsa Awal Animasi Interaktif Web Security
Gambar 4 menunjukan halaman awal yang berisi skema animasi interaktif
jalannya data. Data, cookies dan script berbahaya dapat dikirim ke web server
dengan enkripsi dari HTTP dan tanpa masalah melewati firewall dari web server.
Dan dibagian header terdapat pilihan scene mana yang bisa dipilih oleh user untuk
melihat animasi lain. Selanjutnya skema animasi dari user1 ada pada Gambar 5.
Gambar 5 Skema Animasi User 1
Gambar 5 menunjukan seluruh skema animasi yang terjadi pada tahap
user mengakses sebuah website. Pada skema ini ditunjukan jalannya data dan
bagaimana user dari web server mengakses. Berikut penjelasan skema animasi
Gambar 5:
8
a. User 1 adalah pengguna web yang mau menjual anjingnya, User 1
mengakses login page dari web fjb.com. saat login user 1 mengirim
data dan cookies yang terenkripsi dalam http, ke web server.
b. Webserver melakukan pengecekan ke database ada/tidak data akun
user 1. Kemudian web server meredirect ke fjb.com/list/ yang datanya
diambil dari database dan di tampilkan di tampilan browser user 1.
Lalu user 1 membuat posting baru untuk menjual anjingnya.
c. User 1, mengisi Judul Iklan dan deskripsi tentang anjingnya, dengan
memberikan penjelasan bahwa anjingnya female tetapi user 1
memberikan code html<b>female</b> agar terlihat lebih jelas. Lalu
data tadi dikirim ke web server untuk disimpan dalam databas.
d. Setelah menerima data dari user 1. Web server mengkonfirmasi data
user1 sudah dimasukan.
Gambar 6 Skema Animasi Hacker
Gambar 6 menunjukan skema animasi yang terjadi pada tahap
terjadinya penyerangan dan akibat dari penyerangan yang terjadi. Pada skema
ini ditunjukan jalannya data dan bagaimana user dari web server mengakses
dan terjebak pada script yang sudah dimasukan oleh hacker. Berikut
Penjelasan skema dari animasi dan interaksi aktor Hacker:
a. Hacker berpura-pura menjadipengguna web yang mau menjual anjingnya, Hacker mengakses login page dari web fjb.com. saat login
user 1 mengirim data dan cookies yang terenkripsi dalam http, ke web
server.
b. Hacker melakukan pengecekan terhadap posting-posting pada fjb.com. Saat membuka posting dari User1, Hacker melihat User1 dapat
9
memasukan code html pada tulisan Female. Hacker menarik
kesimpulan adacelah untuk melakukan hacking dengan XSS pada web
tersebut.
c. Hacker membuat posting baru(palsu) dengan judul iklan yang menarik agar dibuka oleh user lain dari web tersebut. Hacker menyisipkan
script yang berfungsi mengirim cookies user yang membuka posting
iklan tersebut. Karena tidak ada proteksi dengan script seperti ini web
server langsung menyimpannya dalam database.
d. Saat ada User lain membuka posting iklan akan otomatis mengirimkan cookies ke email hacker. Dengan cookiesuser lain itu hacker dapat
melakukan apapun, seperti mencuri data-data dari user korbannya.
Berikut Penjelasan tentang animas yang terjadi pada user2, yang
terkena serangan dari hacker
a. User 3 membuka web fjb.com, setelah login dan mengirim cookies ke
web server, web server menampilkan list iklan yang terdapat dalam
database. Karena iklan dari hacker yang menarik maka User 3 tertarik
untuk membuka posting dari web tersebut.
b. Begitu membuka dan membaca posting hacker tersebut, tanpa sengaja
user 3 mengirimkan data dan cookies yang dimilikinya ke web server
untuk dikirim dalam bentuk email ke Hacker. Begitu juga semua user
yang membuka posting iklan hacker tersebut.
Setelah melakukan evaluasi pada prototype pertama dengan melakukan
wawancara kepada mahasiswa yang sebelumnya sudah mengisi kuisioner dan
dosen yang berkompetensi di bidang keamanan jaringan, dibuatlah prototype
kedua sebagai penyempurnaan dari evaluasi yang dilakukan pada prototype
pertama. Karena pada prototype pertama tidak disertakan interaksi maka pada
prototype kedua dibuat agar user dapat berinteraksi, dan dikarenakan prototype
pertama menggunakan banyak pergantian halaman yang membingungkan user
dari web animasi interaktif ini, maka dibuatlah prototype kedua yang menyatukan
semua aktor dalam satu halaman agar user dapat mengetahui keterkaitan antar
aktor. Gambar 8 adalah hasil dari prototype kedua.
10
Help
Penyerangan
Penanggulangan
Kesimpulan
Help
Penyerangan
Penanggulangan
Kesimpulan
User
XSS Menu SQL Injection
<<include>><<include>>
<<extend>>
<<extend>>
<<extend>>
<<extend>>
<<extend>>
<<extend>>
<<extend>>
<<extend>>
Gambar 7 Skema Prototype Kedua
Pada Gambar 7 diperlihatkan prototype 2 sebagai perbaikan dari
prototype 1 yang dibuat dengan animasi dan interaksi. Terdapat user1, user2, dan
hacker sebagai aktor yang dapat melakukan interaksi, user dapat memilih
interaksi pada aktor sesuai dengan pilihan materi yang ingin dilihat (SQL Injection
atau XSS). Disediakan juga menu interaksi pencegahan serangan dari hacker untuk
menunjukan cara pencegahan serangan dari hacker. Pada saat aplikasi berjalan,
terdapat keterangan-keterangan yang akan menjelaskan bagaimana penyerangan
terjadi dan cara penanggulangan dengan text dan audio. User juga dapat
mengulangi pembahasan materi penyerangan, penanggulangan dan kesimpulan
dengan disediakannya tombol-tombol pengulangan. Prototype kedua selanjutnya
diberi background dan aplikasi selanjnya masuk tahap pembuatan animasi dengan
menggunakan aplikasi flash.
Use Case Diagram menggambarkan fungsionalitas yang diharapkan dari
sebuah sistem yang menjelaskan keseluruhan kerja sistem secara garis besar
dengan mempresentasikan interaksi antara aktor yang dibuat, serta memberikan
gambaran fungsi – fungsi pada sistem tersebut.
Gambar 8 Use Case Diagram Sistem
11
Gambar 8 menunjukkan 1 aktor dalam sistem yaitu pengguna. Use case
Menu XSS, berfungsi untuk melihat materi tentang XSS yang didalamnya terdapat
menu help, penyerangan, penanggulangan, dan kesimpulan. Use case Menu SQL
Injection, berfungsi untuk melihat materi tentang SQL Injection yang didalamnya
terdapat menu help, penyerangan, penanggulangan, dan kesimpulan.
Activity Diagram sistem ini hanya memiliki satu hak akses yaitu user.
User dapat masuk tanpa harus melalui login, karena seluruh sistem dibuat dalam
flash animasi siapapun yang ingin menggunakan bisa langsung mengakses tanpa
perlu menggunakan akun khusus. Gambar 9 menunjukkan activity diagram untuk
user melihat kedua materi.
Gambar 9 Activity Diagram Untuk Melihat Materi
Sequence diagram digunakan untuk menggambarkan skenario, mengenai
detail suatu event untuk mengasilkan output tertentu berdasarkan waktu.
Sequence diagram untuk user terdiri dari lihat materi XSS dan lihat materi
SQL Injection. Sequence diagram melihat materi XSS ditunjukkan pada Gambar
10. Sequence diagram melihat materi SQL Injection ditunjukkan pada Gambar 11.
Start
User Akses
Website
Menampilkan
Halaman Utama
Menampilkan
Menu
Sql Injection XSS
End
sistemuser
12
Gambar 10 Sequence Diagram melihat materi XSS
Gambar 11 Sequence Diagram melihat materi SQL Injection
4. Hasil dan Pembahasan Implementasi dari perancangan pembelajaran web security khususnya SQL
Injection dan XSS menggunakan animasi interaktif. Kedua materi ini disajikan
pada aplikasi berbasis animasi interaktif yang dijalankan pada sebuah website. Di
dalam perancangan aplikasi ini terdapat tiga tahapan dalam pembelajarannya,
tahap pertama penyerangan yang memberikan materi tentang bagaimana seorang
hacker dapat meretas sebuah website sesuai dengan materi yang dipilih oleh
mahasiswa XSS atau SQL Injection. Lalu tahap kedua penanggulangan, pada tahap
ini mahasiswa diajarkan bagaimana seharusnya developer mempersiapkan sebuah
website dengan proteksi terhadap serangan hacker. Tahap yang ketiga adalah
kesimpulan. Gambar 12 adalah tampilan awal yang akan muncul saat mahasiswa
mengakses aplikasi pembelajaran web security ini.
Gambar 12 Tampilan Menu Awal Animasi Interaktif Web Security
13
Gambar 13 adalah tampilan penjelasan bagaimana hacker melakukan
penyerangan terhadap website. Pada kedua penjelasan ditampilkan dua kasus
berbeda sesuai cara-cara yang sering atau umumnya digunakan oleh hacker untuk
meretas sebuah website. Pada bagian ini di tampilan animasi interaktif disertai
audio dan text yang menjelaskan bagaimana sebuah website diserang oleh hacker
menggunakan cara SQL Injection dan XSS. Pada bagian ini ditampilkan animasi
bagaimana hacker mengakses website lalu mencari celah untuk melakukan hack.
Animasi menunjukan jalannya data HTML, dan Cookie yang nantinya menjadi
jalan hacker untuk mengeksploitasi sebuah website.
Gambar 13 Penjelasan Pada Saat Hacker Menyerang dengan SQL Injection dan XSS
Gambar 14 adalah tampilan animasi interaktif penjelasan bagaimana
seharusnya developer melakukan proteksi terhadap serangan XSS dan SQL
Injection. Pada penjelasan ini dibahas penanggulangan yang disertai kode
program yang dimisalkan dengan bahasa pemrograman PHP. Mahasiswa
diberikan paparan bagaimana mencegah dengan melakukan filtering pada bagian
tertentu sesuai serangan yang dilakukan oleh hacker. Pada bagian ini animasi
menunjukan dimana seharusnya sebuah kode program filtering diletakan agar
hacker tidak dapat menembus celah-celah yang tersedia pada sebuah aplikasi
website.
14
Gambar 14 Tampilan Penjelasan Penanggulangan Serangan SQL Injection dan XSS
Gambar 15 adalah tampilan kesimpulan kedua materi, dimana penjelasan
yang disajikan membahas review dari bagaimana celah yang dapat digunakan
hacker untuk menyerang dan review bagaimana penanggulangan yang dapat
dilakukan seorang developer website.
Gambar 15 Tampilan Kesimpulan dari Materi SQL Injection dan XSS
Pengujian dilakukan untuk mengetahui seberapa besar sistem ini
membantu dan memecahkan masalah yang ada. Pengujian validasi menggunakan
metode pengujian Black Box, dimana dilakukan pengujian spesifikasi terhadap
fungsi-fungsi dalam aplikasi. Metode pengujian Black Box tidak memerlukan
pengujian terhadap alur jalannya algoritma program, tetapi lebih ditekankan pada
eksekusi unit atau modul dari program.
15
Tabel 1 Pengujian Black Box Aktivitas Pengguna Aplikasi
Aktivitas
Yang Diharapkan Pengamatan Status
User Akses Aplikasi Website menerima
request dari browser
lalu browser
menampilkan
halaman awal
aplikasi virtual lab
web security SQL
injection dan XSS
Website dapat
menampilkan
halaman awal.
Valid
User akses materi
SQL Injection Website menerima
request dari browser
lalu browser
menampilkan
animasi dari materi
SQL Injection
Website dapat
menampilkan
animasi materi SQL
Injection.
Valid
User akses materi XSS Website menerima
request dari browser
lalu browser
menampilkan
animasi dari materi
XSS
Website dapat
menampilkan
animasi materi XSS.
Valid
Tombol Penyerangan
pada materi SQL Injection User Dapat langsung
mengakses pada
frame Materi
Penyerangan SQL
Injection dengan
memilih tombol
penyerangan
Website dapat
menampilkan
halaman pada materi
penyerangan SQL
Injection.
Valid
Tombol Penanggulangan
pada materi SQL Injection User Dapat langsung
mengakses pada
frame Materi
penanggulangan
SQL Injection
dengan memilih
tombol
penanggulangan
Website dapat
menampilkan
halaman pada materi
penanggulangan
SQL Injection.
Valid
Tombol kesimpulan pada
materi SQL Injection User Dapat langsung
mengakses pada
frame Materi
Kesimpulan SQL
Injection dengan
memilih tombol
kesimpulan
Website dapat
menampilkan
halaman pada materi
kesimpulan SQL
Injection.
Valid
Tombol back to menu pada
materi SQL Injection User Dapat langsung
mengakses pada
halaman awal SQL
Injection dengan
memilih tombol
back to menu
Website dapat
menampilkan
halaman awal pada
saat memilih tombol
back to menu saat
user sedang melihat
materi SQL Injection
Valid
Tombol Penyerangan
pada materi XSS User Dapat langsung
mengakses pada
Website dapat
menampilkan Valid
16
frame Materi
Penyerangan XSS
dengan memilih
tombol penyerangan
halaman pada materi
penyerangan XSS
Tombol Penanggulangan
pada materi XSS User Dapat langsung
mengakses pada
frame Materi
penanggulangan XSS
dengan memilih
tombol
penanggulangan
Website dapat
menampilkan
halaman pada materi
penanggulangan
XSS.
Valid
Tombol kesimpulan pada
materi XSS User Dapat langsung
mengakses pada
frame Materi
penanggulangan XSS
dengan memilih
tombol
penanggulangan
Website dapat
menampilkan
halaman pada materi
kesimpulan XSS.
valid
Tombol back to menu
pada materi XSS User Dapat langsung
mengakses pada
halaman awal XSS
dengan memilih
tombol back to menu
Website dapat
menampilkan
halaman awal pada
saat memilih tombol
back to menu saat
user sedang melihat
materi XSS
Valid
Tahap pengujian selanjutnya adalah tahap uji responden yang melibatkan
25 orang responden yang memiliki keterkaitan dengan sistem yang dibangun, ke
25 orang ini adalah sebagian dari responden kuisioner saat pengumpulan teori
awal penelitian ini. Pengujian user dilakukan dengan memberikan pertanyaan dan
wawancara yang diolah untuk menghitung persentase hasil dengan skala likert.
Tabel 2 adalah skor yang akan dikalikan dengan jumlah user yang memilih
kuisioner dengan pertanyaan yang sudah ditetapkan.
Tabel 2 Tabel Skor Likert [7]
Jawaban Skor
Sangat Membantu 4
Membantu 3
Cukup Membanu 2
Tidak Membantu 1
Tabel 3 adalah hasil dari perhitungan Skala likert [7]. Berdasarkan
kuisioner yang diberikan kepada user. Presentase yang didapat dari masing-
masing pertanyaan termasuk cukup dalam membantu user aplikasi dalam
pembelajaran web security khususnya SQL Injection dan XSS.
Tabel 3 Tabel Hasil perhitungan Likert
No Pertanyaan S
M
M CM TM Hasil
skor
Interpretasi
Skor Likert
1 Apakah aplikasi virtual lab 8 15 2 0 81 81%
17
web security ini mampu
membantu siswa dalam
pembelajaran web security?
2 Apakah aplikasi virtual lab
web security ini membantu
mahasiswa mengerti
bagaimana website dapat
diserang oleh hacker
5 13 7 0 73 73%
3 Apakah aplikasi virtual lab
web security ini membantu
mahasiswa mengerti
bagaimana mencegah
serangan SQL Injection?
8 13 4 0 79 79%
4 Apakah aplikasi virtual lab
web security ini membantu
mahasiswa mengerti
bagaimana mencegah
serangan XSS?
7 12 6 0 76 76%
5 Apakah Aplikasi virtual lab
web security ini membantu
mahasiswa mengerti materi
dengan lebih mudah?
10 9 6 0 79 79%
Dari hasil kuisioner yang telah diberikan kepada 25 user yang melakukan
uji coba, pertanyaan pertama mengenai mampukah aplikasi virtual lab web
security ini membantu user dalam melakukan pembelajaran web security
mendapatkan hasil perhitungan likert sebesar 81%, hal ini mengartikan mayoritas
user terbantu dengan adanya aplikasi ini untuk mempelajari web security. Pada
pertanyaan ke dua mengenai mampukah aplikasi ini membantu siswa mengerti
bagaimana cara hacker melakukan penyerangan didapatkan hasil 73% dari seluruh
user, hal ini mengartikan user terbantu dengan aplikasi ini, karena tidak ada yang
menjawab aplikasi ini tidak membantu. Pada pertanyaan ke tiga 79% dari
perhitungan likert menunjukan bahwa user terbantu untuk mengerti materi tentang
SQL Injection. Dari pertanyaan ke empat 76% dari perhitungan skala likert
terhadap jawaban user yang melakukan uji coba menunjukan bahwa user terbantu
dalam meengerti bagaimana mencegah serangan XSS. Pada pertanyaan terakhir
mengenai bisakah aplikasi ini membantu user mempelajari materi dengan lebih
mudah didapat perhitungan likert yang menyatakan 79% aplikasi ini membantu
user mempelajari materi lebih mudah.
Pada Tabel 3 dari total 5 pertanyaan yang diajukan setelah responden
mencoba aplikasi ini, rata-rata hasil dari perhitungan skala likert berada pada
presentase diatas 60% sehingga membuat aplikasi ini mencapai taraf cukup dalam
membantu user yang ingin mempelajari tentang web security khususnya dalam
SQL Injection dan XSS. Dapat dilihat juga tidak ada user yang memberikan nilai
pada jawaban tidak membantu di setiap pertanyaan yang sudah diajukan. Melalui
18
hasil kuisioner ini, dapat disimpulkan bahwa sebagian besar user yang
menggunakan aplikasi ini terbantu dalam hal mempelajari materi yang disajikan.
5. Simpulan Setelah merancang, mengimplementasi dan menguji aplikasi animasi
interaktif ini, aplikasi yang dirancang dapat menampilkan animasi interaktif yang
dapat diakses dengan baik melalui website, dan dapat menjalankan semua
fungsinya dengan baik. Dari aplikasi ini dapat dengan mudah membantu
mahasiswa dalam memberi gambaran umum tentang serangan yang dilakukan
oleh hacker. Mahasiswa juga terbukti terbantu dengan adanya aplikasi dengan
animasi interaktif ini sebagai sarana pembelajaran web security khususnya
penanggulangan SQL Injection dan XSS. Hal ini dapat dilihat dari hasil uji
responden pada mahasiswa yang hasil rata-rata perhitungan skala likert
menunjukkan diatas 60% yang berarti aplikasi animasi interaktif ini cukup
membantu dalam hal mempelajari web security khususnya SQL Injection dan XSS
dan pada beberapa pertanyaan hasil hitung skala likert menunjukan sangat kuat.
Untuk pengembangan lebih lanjut, dapat menambahkan materi selain SQL
Injection dan XSS, dan menambahkan latihan pada aplikasi agar para user
langsung dapat berlatih bagaimana cara penanggulangan serangan-serangan
hacker.
6. Daftar Pustaka [1] Lixin Tao, Li-Chiou Chen, Chienting Lin, 2010, Improving Web Security
Education with Virtual Labs and Shared Course Modules, New York.
[2] Acunetic, 2012, Cross Site Scripting Attack,
(http://www.acunetix.com/websitesecurity/cross-site-scripting/ diakses pada
tanggal 21 Mei 2013).
[3] Kurniawan, David, 2013, Pengembangan Media Pembelajaran Batik
Menggunakan Animasi Multimedia Interaktif Pada Mata Pembelajaran Seni
Budaya Di SMA 1 Wonosobo, Solo.
[4] Patel, Nikita, 2011, SQL Injection Attacks: Techniques and Protection
Mechanism, India.
[5] Garcia-Alfar, Joaquin, 2011, Prevention of Cross-Site Scripting Attacks on
Current Web Applications, Barcelona.
[6] Pressman, Roger, 2001, Software Engineering a PRACTITIONER’S
APPROACH, http://www.BZUpages.COM (diakses pada tanggal 5 Februari
2014).
[7] Sri Handayani, Febria, 2014, Contoh Terapan Perhitungan Manual dan
Analisa Hasil Kuisioner Menggunakan Skala Likert,
http://news.palcomtech.com/2014/04/contoh-terapan-perhitungan-manual-
dan-analisa-hasil-kuesioner-menggunakan-skala-likert/ (diakses pada
tanggal 28 July 2014).
