Client Rects Nedir?

Client Rects, tarayıcı tarafından sağlanan ve web sayfası öğelerinin yerleşim bilgilerini elde etmek için kullanılan bir API kümesidir. Bu bilgiler, öğenin sayfadaki tam konumunu ve boyutlarını içerir. Veriler “dikdörtgenler” (rects) biçiminde döndürülür ve öğenin üst, alt, sol, sağ, genişlik ve yükseklik gibi ayrıntılı bilgilerini kapsar.



Client Rects Nasıl Parmak İzine Dönüşür?

Client Rects’in bir tarayıcı parmak izi izleme teknolojisi hâline gelebilmesinin temel nedeni şudur: İki cihaz tamamen aynı web sayfasını açsa bile donanım yapılandırması, işletim sistemi, tarayıcı türü ve sürümü, ekran çözünürlüğü, yazı tipi ayarları gibi faktörlerdeki farklılıklar nedeniyle nihai olarak oluşturulan web sayfası öğesi yerleşim bilgileri birbirinden farklı olabilir.



Örneğin: Aynı metin parçası veya aynı düğme, bir cihazda biraz daha büyük görünebilirken başka bir cihazda konumu hafifçe kaymış olabilir. Bu küçük farkları çıplak gözle fark etmek zordur, ancak Client Rects API aracılığıyla hassas biçimde yakalanabilirler.



Client Rects Parmak İzinin Oluşturulma Süreci

Web siteleri, Client Rects aracılığıyla tarayıcı parmak izi elde ederken genellikle aşağıdaki adımları izler:



Birinci adım: Hedef öğeyi seçme veya oluşturma



Web sitesi öncelikle yerleşim bilgilerini toplamak için kullanılacak bir öğe seçmelidir. Bu bir metin kutusu, bir düğme veya sayfadaki mevcut herhangi bir öğe olabilir. Parmak izinin kararlılığını ve benzersizliğini artırmak için web sitesi, parmak izi toplama amacıyla özel olarak gizli bir öğe de dinamik olarak oluşturabilir.



İkinci adım: Öğenin Client Rects bilgilerini alma



JavaScript aracılığıyla öğenin getClientRects() yöntemi çağrılarak öğenin yerleşim bilgileri alınır. Döndürülen veriler, öğenin konum ve boyut bilgilerini içerir——üst (top), alt (bottom), sol (left), sağ (right), genişlik (width) ve yükseklik (height) gibi.



Üçüncü adım: Verileri kaydetme veya işleme



Web sitesi bu ham verileri kaydeder veya veriler üzerinde daha ileri işlemler yapar. Örneğin, öğenin alanını hesaplama (genişlik × yükseklik), öğenin diğer öğelerle göreli konum ilişkisini hesaplama vb.



Dördüncü adım: Tarayıcı parmak izi oluşturma



Son olarak web sitesi, bu yerleşim bilgilerini IP adresi, kullanıcı aracısı dizesi gibi diğer verilerle birleştirir ve belirli bir algoritma aracılığıyla kullanıcıyı tanımlamak ve izlemek için benzersiz bir tarayıcı parmak izi oluşturur.



Bunun yalnızca basitleştirilmiş bir örnek olduğunu unutmamak gerekir. Gerçek uygulamalarda web siteleri, parmak izinin benzersizliğini ve kararlılığını artırmak için birden fazla öğenin Client Rects verilerini toplayabilir ve daha karmaşık istatistiksel işlemler ile analizler gerçekleştirebilir.



Client Rects’i, web sitesinin bir “cetveli” olarak düşünebilirsiniz——tarayıcınızın sayfa öğelerini nasıl oluşturduğunu ve yerleştirdiğini hassas biçimde ölçer; bu ölçüm sonuçları ise farklı cihazlar arasında küçük ancak tanımlanabilir farklılıklar gösterir.