Institutional Repository | Satya Wacana Christian University: Perancangan Animasi Interaktif Pembelajaran Web Security XSS dan SQL Injection Berbasis Web

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

  

Universitas Kristen SatyaWacana

Salatiga

November 2014

  

Perancangan Animasi Interaktif Pembelajaran

Web Security XSS dan SQL Injection Berbasis Web _{1) 2)}

  Erlangga Galih Hariwidayanto, T. Arie Setiawan Prasida, ₃₎ Agustinus Fritz Wijaya Fakultas Teknologi Informasi Universitas Kristen Satya Wacana _{arie_setiawan_p@yahoo.com 3) agustinus.fritz@gmail.com}

  

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.

  Mahasiswa Fakultas Teknologi Informasi Jurusan Teknik Informatika, Universitas ₂₎ Kristen Satya Wacana Salatiga. ₃₎ Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga. Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga.

  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 membuat mahasiswa memiliki keterbatasan dalam menguasai teori dan

  security

  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 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.

  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

  atau kemampuan untuk menyembunyikan data informasi seorang user,

  Privacy

  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 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

  (WHID) pada tahun 2011, dengan nyata

  Web Hacking Incident Database

  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]

  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.

  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.

  

Mulai

Identifikasi Masalah

Analisis

Kebutuhan SIstem

  

Perancangan Sistem

(Prototyping model)

Pengujian

Selesai

i

  

Gambar 2 Diagram Alur Tahapan Perancangan Sistem 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.

  

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 mengakses sebuah website. Pada skema ini ditunjukan jalannya data dan

  user

  bagaimana user dari web server mengakses. Berikut penjelasan skema animasi Gambar 5: 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 user 1 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 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.

  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.

  

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. menggambarkan fungsionalitas yang diharapkan dari

  Use Case Diagram

  sebuah sistem yang menjelaskan keseluruhan kerja sistem secara garis besar dengan mempresentasikan interaksi antara aktor yang dibuat, serta memberikan gambaran fungsi _Help – fungsi pada sistem tersebut. _{<<extend>> <<extend>> Help Penyerangan <<extend>> <<extend>>}

_{<<include>> <<include>>}

User _{<<extend>> <<extend>> Penyerangan Penanggulangan <<extend>>}

  

XSS Menu SQL Injection _{<<extend>> Penanggulangan}

Kesimpulan Kesimpulan

Gambar 8 Use Case Diagram Sistem 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. _{user sistem Start}

  Menampilkan User Akses Website Halaman Utama Menampilkan

  Menu Sql Injection

  XSS End

  

Gambar 9 Activity Diagram Untuk Melihat Materi

  digunakan untuk menggambarkan skenario, mengenai

  Sequence diagram 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.

  

Gambar 10 Sequence Diagram melihat materi XSS

Gambar 11 Sequence Diagram melihat materi SQL Injection

  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 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 .

  

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.

  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 pada materi penanggulangan SQL Injection .

  Website dapat menampilkan

  User Dapat langsung mengakses pada

  Valid Tombol Penyerangan pada materi XSS

  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 back to menu pada materi SQL Injection

  Website dapat menampilkan halaman pada materi kesimpulan SQL Injection .

  User Dapat langsung mengakses pada frame Materi Kesimpulan SQL Injection dengan memilih tombol kesimpulan

  Valid Tombol kesimpulan pada materi SQL Injection

  User Dapat langsung mengakses pada frame Materi penanggulangan SQL Injection dengan memilih tombol penanggulangan

  Website dapat menampilkan halaman awal.

  Valid Tombol Penanggulangan pada materi SQL Injection

  Website dapat menampilkan halaman pada materi penyerangan SQL Injection .

  User Dapat langsung mengakses pada frame Materi Penyerangan SQL Injection dengan memilih tombol penyerangan

  Valid Tombol Penyerangan pada materi SQL Injection

  XSS Website dapat menampilkan animasi materi XSS.

  Valid User akses materi XSS Website menerima request dari browser lalu browser menampilkan animasi dari materi

  Website menerima request dari browser lalu browser menampilkan animasi dari materi SQL Injection Website dapat menampilkan animasi materi SQL Injection .

  Valid User akses materi SQL Injection

  Valid

  

frame Materi halaman pada materi

Penyerangan XSS penyerangan XSS dengan memilih tombol penyerangan Tombol Penanggulangan User Dapat langsung Website dapat

  Valid pada materi XSS mengakses pada menampilkan

frame Materi halaman pada materi

penanggulangan XSS penanggulangan dengan memilih

  XSS . tombol penanggulangan

  Tombol kesimpulan pada User Dapat langsung Website dapat valid materi XSS mengakses pada menampilkan

frame Materi halaman pada materi

penanggulangan XSS kesimpulan XSS. dengan memilih tombol penanggulangan Tombol back to menu User Dapat langsung Website dapat

  Valid pada materi XSS mengakses pada menampilkan

halaman awal XSS halaman awal pada

dengan memilih saat memilih tombol

tombol back to menu back to menu saat user sedang melihat materi XSS

  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 CM TM Hasil Interpretasi

M skor Skor Likert

  1 Apakah aplikasi virtual lab 8

  15

  2 81 81%

  web security ini mampu

  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

  web security ini membantu

  mahasiswa mengerti materi dengan lebih mudah? 10 9

  6 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

  

user , hal ini mengartikan user terbantu dengan aplikasi ini, karena tidak ada yang

  6 76 76%

  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

  5 Apakah Aplikasi virtual lab

  12

  membantu siswa dalam pembelajaran web security?

  3 Apakah aplikasi virtual lab

  2 Apakah aplikasi virtual lab

  web security ini membantu

  mahasiswa mengerti bagaimana website dapat diserang oleh hacker

  5

  13

  7 73 73%

  web security ini membantu

  7

  mahasiswa mengerti bagaimana mencegah serangan SQL Injection?

  8

  13

  4 79 79%

  4 Apakah aplikasi virtual lab

  web security ini membantu

  mahasiswa mengerti bagaimana mencegah serangan XSS?

  pada jawaban tidak membantu di setiap pertanyaan yang sudah diajukan. Melalui 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,

  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).