Śledzenie odwiedzających witrynę za pomocą CSS

Jan Brömer, student fizyki z Niemiec zainteresowany programowaniem, opublikował na GitHubie przykład śledzenia ruchu osób odwiedzających witryny przy użyciu wyłącznie CSS, bez wykorzystania mocy JavaScript. Kod dostarczony przez Iana pozwala, używając formalnego języka opisującego wygląd dokumentu, zebrać pewne informacje o użytkowniku - rozdzielczość ekranu jego urządzenia, typ przeglądarki (lub silnika), obecność określonych czcionek oraz więcej. Możliwe jest także śledzenie linków, po których użytkownik podążał lub na które najechał kursor. Korzystając z niewidocznej tabeli pól w tle strony, możesz zidentyfikować osobliwości poruszania się myszą po ekranie. Powyższą metodę śledzenia możesz jednak zastosować tylko wtedy, gdy użytkownik odwiedzi stronę po raz pierwszy lub najedzie myszką na konkretną komórkę ukrytej tabeli, ponieważ powtarzające się działania nie są brane pod uwagę. Działanie metody możesz sprawdzić tutaj . Aby skorzystać z tej metody, możesz dodać obraz z zewnętrznego źródła do CSS za pomocą adresu URL („foo.bar”). Ponieważ zasoby są ładowane tylko wtedy, gdy są potrzebne, zamiast obrazu można podać łącze do skryptu zbierającego i powiązać go ze zdarzeniami, takimi jak kliknięcie łącza lub najechanie myszką na łącze. Możemy więc utworzyć w CSS selektor, który wywoła określony adres URL, gdy użytkownik kliknie link:

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

Wykrywanie typu przeglądarki opiera się na regułach @supports . Tutaj musisz sprawdzić niektóre właściwości CSS przeglądarki, takie jak -webkit-appearance:

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

Czcionki mogą służyć do określenia systemu operacyjnego użytkownika, ponieważ różne systemy operacyjne wysyłają różne czcionki (na przykład „Calibri” w systemie Windows). Aby zdefiniować czcionkę należy utworzyć nową rodzinę czcionek, której źródłem wczytywania będzie skrypt zbierający dane. Następnie w bloku tekstu jako pierwsza wskazywana jest czcionka badana, a jako druga czcionka z nowej rodziny. Następnie tekst spróbuje wystylizować czcionkę; jeśli występuje pierwsza czcionka, druga zostanie zignorowana. Jeśli jednak nie ma czcionki do sprawdzenia, przeglądarka spróbuje użyć czcionki fikcyjnej jako czcionki zastępczej i wyśle ​​żądanie do zewnętrznego skryptu:

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

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

Jeśli po zastosowaniu metody nie ma żadnych wyników lub pojawi się ostrzeżenie PHP, oznacza to, że wartość właściwości jest fałszywa lub użytkownik nie odwiedził jeszcze strony/linku.