bu Kullanıcı Aracısı dizesi önemli pasif parmak izi yüzeyi tarayıcılarda işlenmesi zor olduğu gibi. Bununla birlikte, kullanıcı aracısı verilerini toplamak ve işlemek için her türlü geçerli neden vardır, dolayısıyla ihtiyaç duyulan şey daha iyi bir çözüme giden yoldur. User-Agent İstemci İpuçları, hem kullanıcı aracısı verilerine olan ihtiyacınızı beyan etmenin açık bir yolunu hem de verileri kullanımı kolay bir biçimde döndürmek için yöntemler sağlar.
Bu makale, kullanıcı aracısı verilerine erişiminizi denetleme ve kullanıcı aracısı dize kullanımını Kullanıcı Aracısı İstemci İpuçlarına geçirme konusunda size yol gösterecektir.
Kullanıcı aracısı verilerinin toplanması ve kullanılmasının denetlenmesi #
Herhangi bir veri toplama biçiminde olduğu gibi, her zaman anlamalısınız Neden onu topluyorsun. Herhangi bir işlem yapıp yapmayacağınıza bakılmaksızın ilk adım, kullanıcı aracısı verilerini nerede ve neden kullandığınızı anlamaktır.
Kullanıcı aracısı verilerinin kullanılıp kullanılmadığını veya nerede kullanıldığını bilmiyorsanız, kullanıcı aracısı verilerinin kullanımı için ön uç kodunuzu aramayı düşünün. navigator.userAgent ve kullanımı için arka uç kodunuz User-Agent HTTP başlığı. Kullanımdan kaldırılmış özelliklerin kullanımı için ön uç kodunuzu da kontrol etmelisiniz. navigator.platform Ve navigator.appVersion.
İşlevsel bir bakış açısıyla, kodunuzda kaydettiğiniz veya işlediğiniz herhangi bir yeri düşünün:
- Tarayıcı adı veya sürümü
- İşletim sistemi adı veya sürümü
- Cihaz markası veya modeli
- CPU tipi, mimarisi veya bitliği (örneğin, 64 bit)
Kullanıcı aracısını işlemek için üçüncü taraf bir kitaplık veya hizmet kullanıyor olabilirsiniz. Bu durumda, User-Agent İstemci İpuçlarını desteklemek için güncelleme yapıp yapmadıklarını kontrol edin.
Yalnızca temel kullanıcı aracısı verilerini mi kullanıyorsunuz? #
User-Agent İstemci İpuçlarının varsayılan seti şunları içerir:
Sec-CH-UA: tarayıcı adı ve ana/önemli sürümSec-CH-UA-Mobile: bir mobil cihazı gösteren boole değeriSec-CH-UA-Platform: işletim sistemi adı- Bunun spesifikasyonda güncellendiğini ve Chrome’da yansıtılan ve diğer Chromium tabanlı tarayıcılar.
Önerilen kullanıcı aracısı dizisinin azaltılmış versiyonu da bu temel bilgileri geriye dönük uyumlu bir şekilde koruyacaktır. Örneğin, yerine Chrome/90.0.4430.85 dize içerecektir Chrome/90.0.0.0.
User-agent dizesini yalnızca tarayıcı adı, ana sürüm veya işletim sistemi için kontrol ediyorsanız, kullanımdan kaldırma uyarıları görme olasılığınız yüksek olsa da kodunuz çalışmaya devam edecektir.
User-Agent Client Hints’e geçiş yapabilirsiniz ve yapmanız gerekirken, bunu engelleyen eski kodunuz veya kaynak kısıtlamalarınız olabilir. Kullanıcı aracısı dizisindeki bilgilerin bu geriye dönük uyumlu şekilde azaltılmasının amacı, mevcut kodun daha az ayrıntılı bilgi almasına rağmen, yine de temel işlevselliği muhafaza etmesini sağlamaktır.
Strateji: İsteğe bağlı istemci tarafı JavaScript API’si #
Şu anda kullanıyorsanız navigator.userAgent tercihe geçmelisin navigator.userAgentData kullanıcı aracısı dizesini ayrıştırmaya geri dönmeden önce.
if (navigator.userAgentData) {
// use new hints
} else {
// fall back to user-agent string parsing
}
Mobil veya masaüstünü kontrol ediyorsanız, boole kullanın mobile değer:
const isMobile = navigator.userAgentData.mobile;
userAgentData.brands olan bir nesne dizisidir brand Ve version tarayıcının bu markalarla uyumluluğunu listeleyebildiği özellikler. Doğrudan bir dizi olarak erişebilir veya bir dizi kullanmak isteyebilirsiniz. some() belirli bir giriş olup olmadığını kontrol etmek için arayın:
function isCompatible(item) {
// In real life you most likely have more complex rules here
return ['Chromium', 'Google Chrome', 'NewBrowser'].includes(item.brand);
}
if (navigator.userAgentData.brands.some(isCompatible)) {
// browser reports as compatible
}
Daha ayrıntılı, yüksek entropili kullanıcı aracısı değerlerinden birine ihtiyacınız varsa, bunu belirtmeniz ve döndürülen ekranda sonucu kontrol etmeniz gerekir. Promise:
navigator.userAgentData.getHighEntropyValues(['model'])
.then(ua => {
// requested hints available as attributes
const model = ua.model
});
Sunucu tarafı işlemeden istemci tarafı işlemeye geçmek istiyorsanız da bu stratejiyi kullanmak isteyebilirsiniz. JavaScript API, HTTP istek başlıklarına erişim gerektirmez, bu nedenle kullanıcı aracısı değerleri herhangi bir noktada talep edilebilir.
Strateji: Statik sunucu tarafı başlığı #
kullanıyorsanız User-Agent sunucudaki istek başlığı ve bu verilere yönelik ihtiyaçlarınız sitenizin tamamında nispeten tutarlıysa, istediğiniz istemci ipuçlarını yanıtlarınızda statik bir küme olarak belirtebilirsiniz. Bu nispeten basit bir yaklaşımdır, çünkü genellikle onu tek bir konumda yapılandırmanız gerekir. Örneğin, oraya zaten başlıklar eklediyseniz, web sunucusu yapılandırmanızda, barındırma yapılandırmanızda veya siteniz için kullandığınız çerçeve veya platformun üst düzey yapılandırmasında olabilir.
Kullanıcı aracısı verilerine dayalı olarak sunulan yanıtları dönüştürüyor veya özelleştiriyorsanız bu stratejiyi göz önünde bulundurun.
Tarayıcılar veya diğer istemciler farklı varsayılan ipuçları sağlamayı seçebilir, bu nedenle, genellikle varsayılan olarak sağlanmış olsa bile ihtiyacınız olan her şeyi belirtmeniz iyi bir uygulamadır.
Örneğin, Chrome için mevcut varsayılanlar şu şekilde temsil edilir:
⬇️ Yanıt başlıkları
Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA
Yanıtlarda cihaz modelini de almak isteseydiniz, şunları gönderirdiniz:
⬇️ Yanıt başlıkları
Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA
Bunu sunucu tarafında işlerken, önce istenip istenmediğini kontrol etmelisiniz. Sec-CH-UA başlık gönderildi ve ardından geri dönüş User-Agent mevcut değilse başlık ayrıştırma.
Strateji: Kaynaklar arası isteklere ipuçları verme #
Kullanıcı Aracısı İstemci İpuçlarının istekleri üzerine gönderilmesini gerektiren kaynaklar arası veya siteler arası alt kaynaklar talep ediyorsanız, bir İzin Politikası kullanarak istenen ipuçlarını açıkça belirtmeniz gerekir.
Örneğin, diyelim ki kaynakları üzerinde barındırır belirli bir cihaz için optimize edilmiş kaynakları döndürebilir. isteyebilir Sec-CH-UA-Model ipucu, ancak açıkça yetki vermesi gerekiyor kullanmak Permissions-Policy başlık. Politika tarafından kontrol edilen ipuçlarının listesi şu adreste mevcuttur: İstemciler İpuçları Altyapı taslağı
⬇️ Yanıt blog.site ipucunu devretmek
Accept-CH: Sec-CH-UA-Model
Permissions-Policy: ch-ua-model=(self "")
⬆️ Alt kaynaklara istek cdn.site yetki verilen ipucunu dahil et
Sec-CH-UA-Model: "Pixel 5"
Yalnızca kaynaktan değil, birden çok kaynak için birden çok ipucu belirleyebilirsiniz. ch-ua menzil:
⬇️ Yanıt blog.site birden çok kaynağa birden çok ipucu atama
Accept-CH: Sec-CH-UA-Model, DPR
Permissions-Policy: ch-ua-model=(self ""),
ch-dpr=(self "" "
Strateji: ipuçlarını iframe’lere devretme #
Kaynaklar arası iframe’ler, kaynaklar arası kaynaklara benzer şekilde çalışır, ancak yetki vermek istediğiniz ipuçlarını allow bağlanmak.
⬇️ Yanıt blog.site
Accept-CH: Sec-CH-UA-Model
↪️ HTML için blog.site
iframe src="https://widget.site" allow="ch-ua-model"></iframe>
⬆️ İstek widget.site
Sec-CH-UA-Model: "Pixel 5"
bu allow iframe’deki öznitelik herhangi birini geçersiz kılar Accept-CH başlık widget.site kendini gönderebilir, bu nedenle iframe’ sitesinin ihtiyaç duyacağı her şeyi belirttiğinizden emin olun.
Strateji: Dinamik sunucu tarafı ipuçları #
Kullanıcı yolculuğunun, sitenin geri kalanından daha geniş bir ipucu seçimine ihtiyaç duyduğunuz belirli bölümleri varsa, bu ipuçlarını tüm site genelinde statik olarak istemek yerine talep üzerine talep etmeyi seçebilirsiniz. Bunu yönetmek daha karmaşıktır, ancak zaten rota bazında farklı başlıklar ayarladıysanız bu mümkün olabilir.
Burada hatırlanması gereken önemli şey, her örneğin Accept-CH başlık etkin bir şekilde mevcut kümenin üzerine yazacaktır. Bu nedenle, başlığı dinamik olarak ayarlıyorsanız, her sayfanın gereken tüm ipuçlarını istemesi gerekir.
Örneğin, sitenizde, kullanıcının işletim sistemiyle eşleşen simgeler ve kontroller sağlamak istediğiniz bir bölümünüz olabilir. Bunun için ayrıca çekmek isteyebilirsiniz Sec-CH-UA-Platform-Version uygun alt kaynaklara hizmet etmek.
⬇️ Şunun için yanıt başlıkları: /blog
Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA
⬇️ Şunun için yanıt başlıkları: /app
Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version, Sec-CH-UA
Strateji: İlk istekte gerekli olan sunucu tarafı ipuçları #
İlk istekte varsayılan ipuçları kümesinden daha fazlasına ihtiyaç duyduğunuz durumlar olabilir, ancak bu muhtemelen nadirdir, bu nedenle gerekçeyi gözden geçirdiğinizden emin olun.
İlk istek, gerçekten o kaynak için o göz atma oturumunda gönderilen ilk üst düzey istek anlamına gelir. Varsayılan ipuçları seti, ana sürüme sahip tarayıcı adını, platformu ve mobil göstergesini içerir. Burada sorulacak soru şu: İlk sayfa yüklemesiyle ilgili genişletilmiş verilere ihtiyacınız var mı?
İlk istekle ilgili ek ipuçları için iki seçenek vardır. İlk olarak, Critical-CH başlık. Bu, aynı biçimi alır Accept-CH ancak tarayıcıya, ilk istek kritik ipucu olmadan gönderilirse isteği hemen yeniden denemesi gerektiğini söyler.
⬆️ İlk istek
[With default headers]
⬇️ Yanıt başlıkları
Accept-CH: Sec-CH-UA-Model
Critical-CH: Sec-CH-UA-Model
🔃 Tarayıcı, ekstra başlıkla ilk isteği yeniden dener
[With default headers + …]
Sec-CH-UA-Model: Pixel 5
Bu, ilk istekte yeniden deneme ek yüküne neden olur, ancak uygulama maliyeti nispeten düşüktür. Fazladan başlığı gönderin, tarayıcı gerisini halleder.
İlk sayfa yüklemede gerçekten ek ipuçlarına ihtiyaç duyduğunuz durumlarda, Müşteri İpuçları Güvenilirlik teklifi bağlantı seviyesi ayarlarında ipuçlarını belirtmek için bir rota düzenliyor. Bu, Uygulama Katmanı Protokol Ayarları (ALPS) ipuçlarının HTTP/2 ve HTTP/3 bağlantılarında bu erken geçişini sağlamak için TLS 1.3’e uzantı. Bu henüz çok erken bir aşamada, ancak kendi TLS’nizi ve bağlantı ayarlarınızı aktif olarak yönetiyorsanız, bu, katkıda bulunmak için ideal bir zamandır.
Strateji: Eski destek #
Sitenizde şuna bağlı olarak eski veya üçüncü taraf kodunuz olabilir: navigator.userAgent, kullanıcı aracısı dizesinin azaltılacak bölümleri dahil. Uzun vadeli eşdeğere geçmeyi planlamalısınız navigator.userAgentData arar, ancak geçici bir çözüm vardır.
UA-CH yenileme üzerine yazmanıza izin veren küçük bir kitaplıktır. navigator.userAgent talep edilenden oluşturulmuş yeni bir dize ile navigator.userAgentData değerler.
Örneğin, bu kod ek olarak “model” ipucunu içeren bir kullanıcı aracısı dizesi oluşturacaktır:
import { overrideUserAgentUsingClientHints } from './uach-retrofill.js';
overrideUserAgentUsingClientHints(['model'])
.then(() => { console.log(navigator.userAgent); });
Ortaya çıkan dize şunu gösterecekti: Pixel 5 model, ancak yine de azaltılmış 92.0.0.0 olarak uaFullVersion ipucu istenmedi:
Mozilla/5.0 (Linux; Android 10.0; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.0.0 Mobile Safari/537.36
Daha fazla destek #
Bu stratejiler kullanım durumunuzu kapsamıyorsa, lütfen bir Privacy-sandbox-dev-support deposunda tartışma ve sorununuzu birlikte keşfedebiliriz.
fotoğrafı çeken Ricardo Rocha Açık Unsplash