Pengantar

Framework JavaScript modern seperti React dan Vue sering dipersepsikan aman secara default dari serangan Cross-Site Scripting (XSS). Persepsi ini muncul karena keduanya menerapkan mekanisme auto-escaping terhadap data user sebelum dirender ke DOM. Namun, kenyataannya XSS belum sepenuhnya punah.

Faktanya, banyak insiden keamanan modern justru terjadi pada aplikasi berbasis framework populer akibat miskonsepsi developer terhadap cara kerja proteksi bawaan. Artikel ini membahas mengapa XSS masih relevan di era React dan Vue, serta di mana celah keamanannya sering muncul.

Apa Itu Cross-Site Scripting (XSS)

Cross-Site Scripting adalah celah keamanan yang memungkinkan attacker menyisipkan skrip berbahaya ke dalam halaman web yang kemudian dieksekusi di browser korban (dikutip dari OWASP).

Melalui XSS, penyerang dapat:

  • Mencuri cookie sesi

  • Melakukan aksi atas nama user

  • Mengubah tampilan halaman

  • Menyisipkan malware atau phishing script

baca juga : Privileged Access Management (PAM): Strategi Mengunci Akses Admin agar Tidak Menjadi Pintu Masuk Ransomware

Mengapa Framework Modern Dianggap “Aman dari XSS”

React dan Vue memang dirancang dengan prinsip secure-by-default.

Auto-Escaping pada Template Rendering

Secara default:

  • React melakukan escaping pada JSX expression

  • Vue melakukan escaping pada template interpolation ({{ }})

Artinya, input user akan ditampilkan sebagai teks biasa, bukan sebagai HTML atau JavaScript yang dapat dieksekusi.

Namun, proteksi ini bukan jaminan mutlak.

Sumber XSS di Aplikasi React

Walaupun React memiliki proteksi bawaan, developer tetap dapat—secara tidak sadar—membuka celah XSS.

Penggunaan dangerouslySetInnerHTML

React menyediakan fitur dangerouslySetInnerHTML untuk merender HTML mentah langsung ke DOM. Fitur ini secara eksplisit melewati mekanisme escaping React (dikutip dari dokumentasi resmi React).

Jika HTML yang dirender berasal dari:

  • Input user

  • Data API eksternal

  • Konten CMS tanpa sanitasi

maka XSS dapat terjadi dengan sangat mudah.

XSS melalui Library Pihak Ketiga

Banyak aplikasi React bergantung pada:

  • Markdown renderer

  • Rich text editor

  • HTML parser

Jika library tersebut tidak melakukan sanitasi yang ketat, skrip berbahaya dapat lolos dan dieksekusi di browser user.

baca juga : Container Image Scanning: Mencegah “Supply Chain Attack” dengan Membedah Kerentanan Layer pada Docker Image

Celah XSS pada Aplikasi Vue

Vue memiliki mekanisme serupa dengan React, namun tetap memiliki titik rawan.

Directive v-html

Directive v-html memungkinkan rendering HTML mentah ke dalam DOM. Sama seperti dangerouslySetInnerHTML, fitur ini melewati sistem escaping bawaan Vue.

Tanpa sanitasi input yang benar, v-html dapat menjadi jalur langsung serangan XSS.

Kesalahan Trust Boundary

Developer sering menganggap data dari backend sebagai “aman”, padahal:

  • Backend bisa menerima input user

  • API bisa disusupi payload berbahaya

  • Integrasi third-party bisa dimanipulasi

Framework tidak dapat melindungi aplikasi jika boundary kepercayaan sudah salah sejak awal.

Mengapa XSS Tetap Relevan di Era SPA

Single Page Application (SPA) justru memperluas dampak XSS.

Akses ke Token dan State Aplikasi

Dalam SPA:

  • Token sering disimpan di memory atau localStorage

  • State global mudah diakses oleh JavaScript

Jika XSS terjadi, attacker dapat mengontrol keseluruhan sesi user tanpa perlu eksploit tambahan.

Strategi Mitigasi XSS pada Framework Modern

Framework membantu, tetapi tanggung jawab keamanan tetap di tangan developer.

Prinsip Defense in Depth

Beberapa praktik penting:

  • Hindari rendering HTML mentah jika tidak perlu

  • Selalu sanitasi input user

  • Gunakan Content Security Policy (CSP)

  • Audit library pihak ketiga secara rutin

baca juga : SUID Executable: Celah Eskalasi Hak Akses yang Sering Terabaikan oleh System Administrator

Kesimpulan

React dan Vue memang menawarkan proteksi awal terhadap Cross-Site Scripting, namun bukan berarti aplikasi yang dibangun di atasnya otomatis aman. XSS tetap dapat muncul akibat kesalahan implementasi, penggunaan fitur berisiko, dan asumsi kepercayaan yang keliru terhadap data.

Di era framework modern, keamanan bukan hanya soal teknologi yang digunakan, tetapi juga bagaimana developer memahami batasan dan risiko dari setiap fitur yang tersedia.

Related Posts: