Cara untuk meningkatkan keamanan aplikasi kita dari serangan XSS
Melanjutkan series Frontend Security yang lalu, kali ini saya mau membahas tentang XSS dan salah satu cara untuk menanggulanginya. Topik XSS ini akan punya sub-series karena terdapat beberapa pencegahan yang bisa kita lakukan untuk menanggulanginya, supaya saya nulisnya (lagi-lagi) enggak kebanyakan, jadi sengaja dipisah-pisah. Hehe
Get to know XSS
Cross-Site Scripting (XSS) adalah salah satu ancaman yang juga bisa jadi potensi bencana besar bagi sebuah pengembang aplikasi, terutama frontend ya. XSS ini tuh biasanya heker menyisipkan script berbahaya ke halaman web yang keliatannya aman-aman aja.
Biasanya XSS terjadi karena aplikasi kita tidak sanitize/membersihkan input yang dikirim pengguna dengan baik, walhasil ketika ada pengguna lain yang visit page kita yang bertugas untuk menampilkan hasil input dari heker tadi, bisa terjadi eksekusi script yang tidak kita duga-duga dan tidak kita nyana-nyana. Akhirnya bisa bikin data breach alias pencurian data, take over session usernya, dan bisa juga manipulasi halaman web atau deface.
Kalo emang karena input user harusnya sanitizing aja udah cukup dong? Oh ya tidak semudah itu dong, masak kita mau cegah cuma pakai satu lapis? Tango aja ratusan kok.
CSP to the rescue
Content Security Policy alias CSP adalah salah satu mekanisme agar browser tahu web kita ini hanya boleh ngambil resource dari mana aja dan apa aja yang bisa diexecute. Ibarat kaya kita ngasih tau browser bahwa “Ey aku cuma konsumsi A B C dari warung D E F ya, yang lain enggak doyan”. Sehingga ketika web kita melakukan attempt untuk akses script dari source yang tidak kita whitelist otomatis akan direject oleh browser.
Dengan adanya CSP kita bisa merasa sedikit lebih aman karena kita tahu bahwa website kita hanya bisa mengakses resource-resource yang sudah kita set sebelumnya.
Canggih ya? Terus gimana cara implementnya?
Seperti pada umumnya, kadang hal-hal yang terlihat wah itu implementasinya justru mudah. CSP juga implementasinya relatif sangat mudah, kita cukup memanfaatkan <head> tag dari HTML kita dan tambahkan
Kalo di React JS kita bisa implementasi di public/index.html kalo kita masih CRA, atau ya bisa aja kita manfaatin react-helmet
Done! Dah gitu aja brou! Simple bukan?
Tapi nyatanya dengan implementasi yang simple ini kita bisa menambahkan layer keamanan tambahan ke aplikasi web kita yang secara bersamaan meningkatkan kepercayaan pengguna ke kita.
Jadi jika aplikasimu belum implement ini, make sure untuk implement ya, it doesn’t take your time so much anyway.
Have a great day!