Menjejaki Pelawat Laman Web Menggunakan CSS

Jan Brömer, seorang pelajar fizik dari Jerman yang berminat dalam pengaturcaraan, menerbitkan contoh di GitHub menjejaki pergerakan pelawat di tapak menggunakan CSS sahaja, tanpa menggunakan kuasa JavaScript. Kod yang disediakan oleh Ian membenarkan, menggunakan bahasa formal untuk menerangkan rupa dokumen, untuk mengumpul maklumat tertentu tentang pengguna - resolusi skrin perantinya, jenis penyemak imbas (atau enjin), kehadiran fon yang ditentukan, dan lebih. Ia juga mungkin untuk menjejaki pautan yang diikuti atau dialihkan kursor oleh pengguna. Menggunakan jadual medan yang tidak kelihatan pada latar belakang halaman, anda boleh mengenal pasti keistimewaan menggerakkan tetikus merentasi skrin. Walau bagaimanapun, anda boleh menggunakan kaedah di atas untuk menjejak hanya jika pengguna melawat halaman untuk kali pertama atau menuding tetikus pada sel tertentu jadual tersembunyi, kerana tindakan berulang tidak diambil kira. Anda boleh menyemak operasi kaedah di sini . Untuk menggunakan kaedah ini, anda boleh menambah imej daripada sumber luaran pada CSS menggunakan url (“foo.bar”). Memandangkan sumber dimuatkan hanya apabila diperlukan, bukannya imej, anda boleh menentukan pautan ke skrip pengumpul dan mengikatnya pada acara seperti mengklik pada pautan atau menggerakkan tetikus ke atas pautan. Jadi kita boleh membuat pemilih dalam CSS yang mencetuskan URL tertentu apabila pengguna mengklik pada pautan:

# link2 : active :: after {
     content : url ( " track.php? action = link2_clicked " );
}

Pengesanan jenis penyemak imbas adalah berdasarkan peraturan @supports . Di sini anda perlu menyemak beberapa sifat CSS untuk penyemak imbas, seperti -webkit-appearance:

@supports ( -webkit-appearance : none ) {
     #chrome_detect :: after {
         content : url ( " track.php? action = browser_chrome " );
    }
}

Fon boleh digunakan untuk menentukan OS pengguna, kerana OS yang berbeza menghantar fon yang berbeza (contohnya, "Calibri" pada Windows). Untuk menentukan fon, anda perlu mencipta keluarga fon baharu, sumber untuk memuatkan yang akan menjadi skrip pengumpulan data. Seterusnya, dalam blok teks, fon yang diuji ditunjukkan dahulu, dan fon daripada keluarga baharu ditunjukkan kedua. Seterusnya, teks akan cuba mengayakan fon; jika fon pertama ada, maka yang kedua akan diabaikan. Tetapi jika tiada fon untuk diperiksa, maka penyemak imbas akan cuba menggunakan fon palsu sebagai sandaran dan menghantar permintaan kepada skrip luaran:

@ font-face {
     font-family : Font1;
    src : url ( " track.php? action = font1 " );
}

# font_detection1 {
     font-family : Calibri, Font1;
}

Jika selepas menggunakan kaedah tersebut tiada hasil, atau amaran PHP muncul, ini bermakna nilai harta adalah palsu atau pengguna belum lagi melawat halaman/pautan.