Serangan clickjacking SVG modern yang menipu pengguna dan melewati peringatan

• Teknik clickjacking baru yang memanfaatkan filter SVG diperkenalkan, memperluas serangan pemancing klik sederhana yang sudah ada menjadi serangan interaktif yang kompleks
• Dipastikan bahwa elemen filter SVG seperti feColorMatrix dan feDisplacementMap dapat diterapkan bahkan pada iframe lintas origin, sehingga memungkinkan manipulasi visual dan ekstraksi data
• Dengan kombinasi filter, pembacaan piksel, operasi logika, dan manipulasi UI berbasis kondisi menjadi mungkin, sehingga serangan clickjacking multistep atau serangan yang mengarahkan input dapat diimplementasikan
• Sebagai contoh nyata, serangan yang memanfaatkan kerentanan Google Docs berhasil dilakukan, dan peneliti menerima imbalan $3133.70 dari Google VRP
• Teknik ini mengungkap permukaan serangan baru dalam model keamanan browser dan menunjukkan bahwa pemanfaatan logis filter SVG dapat berkembang menjadi ancaman keamanan

---

Gambaran umum clickjacking SVG

• Clickjacking tradisional memiliki struktur serangan sederhana yang menutupi iframe untuk mendorong pengguna mengklik sesuatu tanpa sengaja
• Clickjacking SVG yang baru diperkenalkan memungkinkan interaksi kompleks dan kebocoran data dengan menggunakan filter SVG
• Filter seperti feColorMatrix dan feDisplacementMap dapat diterapkan pada dokumen lintas origin, sehingga konten eksternal dapat dimanipulasi secara visual

Komponen filter SVG

• Elemen filter utama mencakup <feImage>, <feFlood>, <feOffset>, <feDisplacementMap>, <feGaussianBlur>, <feTile>, <feMorphology>, <feBlend>, <feComposite>, dan <feColorMatrix>
• Elemen-elemen ini menggabungkan dan mengubah gambar masukan untuk menghasilkan gambar baru, serta dapat dihubungkan dalam bentuk rantai
• Melalui kombinasi ini, penyerang dapat dengan leluasa menerapkan efek visual, masking, dan manipulasi warna

Contoh serangan

• Captcha palsu (fake captcha): menggunakan feDisplacementMap untuk mendistorsi teks sehingga pengguna terdorong memasukkan kode sensitif
• Menyembunyikan teks abu-abu (grey text hiding): menggunakan feComposite dan feMorphology untuk menghapus petunjuk atau pesan kesalahan di kolom input sehingga pengguna terdorong memasukkan kata sandi yang ditentukan penyerang
• Pembacaan piksel (pixel reading): mendeteksi warna piksel tertentu untuk mengendalikan perilaku filter, sehingga memungkinkan serangan dinamis yang responsif seperti mendeteksi klik tombol, hover, dan status input

Operasi logika dan serangan gabungan

• Dengan menggabungkan feBlend dan feComposite, dimungkinkan untuk mengimplementasikan gerbang logika seperti AND, OR, XOR, dan NOT
• Dengan demikian, rangkaian logika lengkap di dalam filter SVG dapat dibangun, sehingga skenario clickjacking multistep dapat diotomatisasi
• Sebagai contoh, dalam serangan terhadap aplikasi “Securify”, struktur yang menipu pengguna diimplementasikan dengan mengendalikan secara logis beberapa tahap seperti membuka dialog, mengklik checkbox, dan mengklik tombol

Kasus nyata: kerentanan Google Docs

• Popup dan kolom input yang muncul setelah mengklik tombol “Generate Document” di Google Docs dideteksi dan dimanipulasi dengan logika berbasis filter SVG
• Status fokus kolom input, teks abu-abu, dan layar pemuatan dideteksi secara real-time untuk mengendalikan alur serangan
• Serangan ini dilaporkan ke Google dan menghasilkan bug bounty sebesar $3133.70

Aplikasi QR code

• Di dalam filter SVG, logika pembuatan QR code dapat diimplementasikan sehingga data piksel dapat dienkode menjadi URL lalu ditampilkan dalam bentuk QR
• Saat pengguna memindai QR tersebut, data dikirim ke server yang dikendalikan penyerang
• feDisplacementMap dan koreksi kesalahan Reed–Solomon digunakan untuk menghasilkan QR code yang dapat dipindai

Kemungkinan pemanfaatan tambahan

• Berbagai penerapan serangan lain juga dimungkinkan, seperti pembacaan teks, kebocoran data berbasis klik, dan penyisipan kursor mouse palsu
• Karena serangan dapat diimplementasikan hanya dengan CSS/SVG tanpa JavaScript, ada kemungkinan untuk melewati CSP

Signifikansi penelitian

• Clickjacking berbasis operasi logika yang menggunakan filter SVG merupakan teknik serangan baru yang belum dibahas dalam penelitian sebelumnya
• Penelitian terdahulu hanya menyebut SVG sebagai sarana penutupan visual sederhana, sedangkan penelitian ini membuktikan eksekusi logika dan kontrol interaksi
• Peneliti mengajukannya sebagai kelas kerentanan baru dan menekankan perlunya meninjau ulang sistem keamanan browser

Penutup

• Penelitian ini dinilai sebagai kasus pertama serangan keamanan yang memanfaatkan filter SVG layaknya bahasa pemrograman
• Penulis berencana mempresentasikan topik terkait pada 39c3 dan Disobey 2026 pada akhir 2025
• Artikel ini ditulis hanya dengan 42kB HTML/CSS/SVG tanpa gambar maupun JS, memperlihatkan kreativitas riset keamanan eksperimental

[GN⁺]

Komentar Hacker News

• Jika developer mengatur header X-Frame-Options dengan benar, masalah seperti ini akan teratasi
  Tetapi secara realistis, sepertinya mereka akan menanggapinya dengan cara seperti menghapus setengah dari spesifikasi SVG di browser sambil memburu masalah keamanan

  • Ini belum sepenuhnya terselesaikan. Beberapa aplikasi (misalnya Google Docs) memang membutuhkan framing
    Selain itu, serangan seperti ini juga dimungkinkan di situs yang memungkinkan injeksi HTML, bukan hanya frame
  • Ada terlalu banyak ranjau keamanan di SVG. Terutama jika SVG disediakan pengguna dan tidak dapat dipercaya, opsi paling sederhana adalah menonaktifkannya saja

• Saya sendiri sudah menonaktifkan SVG karena alasan keamanan
  Tapi belakangan saya mulai berpikir mungkin CSS juga perlu dinonaktifkan
  Andai CSS tetap hanya dipakai untuk menghias teks, tetapi sekarang sudah berubah seperti bahasa pemrograman sehingga mudah disalahgunakan oleh peretas atau pengiklan

  • Saya setuju dengan komentar “andai CSS dibiarkan tetap sederhana”, tetapi sebenarnya serangan seperti ini jauh lebih mudah dilakukan pada akhir 2000-an
    Sekarang nyaris tidak mungkin
  • Daripada merusak browser demi memperketat keamanan, saya pikir lebih baik menyimpan data sensitif di luar browser
  • Inti masalahnya bukan CSS melainkan iFrame. Ini sumber kerentanan keamanan yang terus berulang sejak masa awal browser
  • Saya penasaran apakah ada alasan keamanan lain selain demo ini. Di sebagian besar platform, serangan ini tidak bekerja
  • Itu reaksi yang berlebihan. Kemungkinan terkena serangan seperti ini sangat rendah, dan ini juga tidak bisa menembus sandbox atau session cookie

• Saat melihat “contoh yang mendeteksi apakah piksel berwarna hitam murni lalu menyalakan atau mematikan filter”, saya benar-benar bingung
  Saya tidak mengerti kenapa HTML/CSS bisa menjadi serumit ini
  Ada <checkbox> dan <label> tersembunyi, lalu saat diklik checkbox ditoggle, dan hanya dengan CSS gayanya berubah sesuai status
  SVG sebenarnya tidak menggambar apa pun dan hanya mendefinisikan filter
  Aneh juga bahwa ada sampai dua <feTile> yang dipakai sehingga area tile dan area output didefinisikan terpisah
  Lalu elemen seperti <fake-frame> atau <art-frame> itu apa?

  • Menurut saya struktur seperti ini cukup keren. Kita bisa membuat konten interaktif tanpa JavaScript
    Saat <label> diklik, checkbox ditoggle; itu adalah perilaku bawaan HTML
    Statusnya dideteksi dengan selector CSS :has()
<feTile> adalah satu elemen filter yang digunakan untuk men-tile atau memotong gambar input
    <fake-frame> dan <art-frame> adalah custom element yang didefinisikan sendiri
    Saya merangkum hal terkait di posting blog
  • Sebenarnya kebanyakan fitur ini bukan sesuatu yang “modern”, melainkan sudah ada sejak 1990-an
    Perpindahan fokus saat <label> diklik mengikuti tradisi UI desktop
    Fitur mengubah gaya berdasarkan status checkbox juga sudah ada sejak era Firefox 1
    Menyematkan filter SVG langsung ke HTML juga merupakan fitur lama
    Jadi ini bukan masalah HTML baru, melainkan kombinasi fitur lama

• Demo ini mengingatkan saya pada peretasan Flash Player di masa lalu
  Mirip dengan cara dulu pengguna ditipu agar mengizinkan system storage
  Grafis vektor benar-benar terasa seperti sesuatu yang tidak bisa mengendalikan dirinya sendiri

• SVG adder terasa seperti karya seni. Sangat keren

  • Demo yang sangat kuat. Baru hari ini saya tahu bahwa untuk Turing completeness, sekadar functional completeness tidak cukup; juga diperlukan penyimpanan dan akses acak
    Saya merujuk ke posting Stack Overflow terkait hal ini

• Di Chrome Android saya (lebih tepatnya browser Kiwi), tampilannya rusak atau terlihat aneh, mungkin karena dark mode
  Saya penasaran apakah orang lain juga mengalami hal yang sama

  • Di Firefox, contoh hanya tampil dengan benar setelah Dark Reader dimatikan
  • Contoh terkait QR rusak saat tingkat zoom bukan 100%

• Tulisan ini mengingatkan saya pada demo perhitungan CSS yang pernah saya lihat dulu

• Ini benar-benar karya yang mengesankan. Saya tidak tahu bagaimana cara memperbaikinya, tetapi perlu ditangani secepatnya

• Post yang sangat keren. Saya menikmati membacanya dari awal sampai akhir