Kullanıcı Aracısı İstemci İpuçlarına Taşı

Sitenizi kullanıcı aracısı dizesinden yeni Kullanıcı Aracısı İstemci İpuçlarına taşıma stratejileri.

Rowan Merewood

Kullanıcı Aracısı dizesi, işlenmesi zor olmasının yanı sıra tarayıcılarda önemli bir pasif dijital parmak izi görüntüsüdür. Bununla birlikte, kullanıcı aracısı verilerini toplamak ve işlemek için çok sayıda geçerli neden vardır. Bu nedenle, daha iyi bir çözüme giden yol gereklidir. Kullanıcı Aracısı İstemci İpuçları, hem kullanıcı aracısı verilerine ihtiyacınızı beyan etmeniz için açık bir yöntem hem de verileri kullanımı kolay bir biçimde döndürme yöntemleri sağlar.

Bu makalede, kullanıcı aracısı verilerine erişiminizi denetleme ve kullanıcı aracısı dizesi kullanımını Kullanıcı Aracısı İstemci İpuçlarına taşıma konularında bilgi verilmektedir.

Kullanıcı aracısı verilerinin toplanmasını ve kullanımını denetleyin

Her veri toplama türünde olduğu gibi, bu verileri neden topladığınızı her zaman anlamanız gerekir. Herhangi bir işlem yapıp yapmamanızdan bağımsız olarak ilk adım, kullanıcı aracısı verilerini nerede ve neden kullandığınızı anlamaktır.

Kullanıcı aracısı verilerinin nerede kullanıldığını veya kullanılıp kullanılmadığını bilmiyorsanız navigator.userAgent kullanımı için kullanıcı arabirimi kodunuzda, User-Agent HTTP üst bilgisi kullanımı için de arka uç kodunuzda arama yapmayı düşünebilirsiniz. navigator.platform ve navigator.appVersion gibi desteği sonlandırılmış özelliklerin kullanılıp kullanılmadığını da görmek için kullanıcı arabirimi kodunuzu kontrol etmeniz gerekir.

İşlevsel bir bakış açısından, kodunuzda kayıt veya işlem yaptığınız herhangi bir yeri düşünün:

  • Tarayıcı adı veya sürümü
  • İşletim sisteminin adı veya sürümü
  • Cihaz markası veya modeli
  • CPU türü, mimarisi veya bit hızı (örneğin, 64 bit)

Kullanıcı aracısını işlemek için bir üçüncü taraf kitaplığı veya hizmeti de kullanıyor olabilirsiniz. Bu durumda, kullanıcı aracısı istemci ipuçlarını destekleyecek şekilde güncellenip güncellenmediğini kontrol edin.

Yalnızca temel kullanıcı aracısı verilerini mi kullanıyorsunuz?

Varsayılan Kullanıcı Aracısı İstemci İpuçları grubu şunları içerir:

  • Sec-CH-UA: tarayıcı adı ve ana/anlamlı sürüm
  • Sec-CH-UA-Mobile: Bir mobil cihazı belirten boole değeri
  • Sec-CH-UA-Platform: İşletim sistemi adı
    • Bunun spesifikasyonda güncellendiğini ve kısa süre içinde Chrome ile diğer Chromium tabanlı tarayıcılara yansıtılacağını unutmayın.

Önerilen kullanıcı aracısı dizesinin azaltılmış sürümü aynı zamanda bu temel bilgileri geriye dönük uyumlu bir şekilde saklar. Örneğin, dize Chrome/90.0.4430.85 yerine Chrome/90.0.0.0 değerini içerir.

Kullanıcı aracısı dizesini yalnızca tarayıcı adı, ana sürüm veya işletim sistemi için kontrol ediyorsanız kodunuz çalışmaya devam eder ancak kullanımdan kaldırma uyarıları görebilirsiniz.

Kullanıcı Aracısı İstemci İpuçlarına geçiş yapabilirsiniz ve yapmanız gerekir ancak bunu engelleyen eski kod veya kaynak kısıtlamalarınız olabilir. Kullanıcı aracısı dizesindeki bilgilerin geriye dönük olarak uyumlu şekilde azaltılmasının amacı, mevcut kodun daha az ayrıntılı bilgi alacak olsa da temel işlevleri korumaya devam etmesini sağlamaktır.

Strateji: İsteğe bağlı istemci tarafı JavaScript API'si

Şu anda navigator.userAgent kullanıyorsanız kullanıcı aracısı dizesini ayrıştırmaya geçmeden önce navigator.userAgentData tercihine geçmeniz gerekir.

if (navigator.userAgentData) {
  // use new hints
} else {
  // fall back to user-agent string parsing
}

Mobil veya masaüstü için kontrol ediyorsanız boole mobile değerini kullanın:

const isMobile = navigator.userAgentData.mobile;

userAgentData.brands, brand ve version özelliklerine sahip bir nesne dizisidir. Tarayıcı, burada tarayıcının bu markalarla uyumluluğunu listeleyebilir. Bu alana doğrudan bir dizi olarak erişebilir veya belirli bir girişin mevcut olup olmadığını kontrol etmek için bir some() çağrısı kullanabilirsiniz:

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 Promise içinde sonucu kontrol etmeniz gerekir:

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 isterseniz de 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 zamanda istenebilir.

Strateji: Statik sunucu tarafı başlık

Sunucuda User-Agent istek başlığını kullanıyorsanız ve bu verilere ilişkin 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. Genellikle yalnızca tek bir yerde yapılandırmanız gerektiğinden bu nispeten basit bir yaklaşımdır. Örneğin, zaten üstbilgileri, barındırma yapılandırmanızı veya siteniz için kullandığınız çerçevenin ya da platformun üst düzey yapılandırmasını buraya eklediyseniz web sunucusu yapılandırmanızda olabilir.

Sunulan yanıtları kullanıcı aracısı verilerine göre dönüştürüyor veya özelleştiriyorsanız bu stratejiyi kullanabilirsiniz.

Tarayıcılar veya diğer istemciler farklı varsayılan ipuçları sağlamayı tercih edebilir. Bu nedenle, genellikle varsayılan olarak sağlansa bile, ihtiyacınız olan her şeyi belirtmek iyi bir uygulamadır.

Örneğin, Chrome için geçerli varsayılan ayarlar şu şekilde gösterilir:

⬇️ Yanıt başlıkları

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA

Yanıtlarda cihaz modelini de almak isterseniz şunu göndermeniz gerekir:

⬇️ 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 istenen Sec-CH-UA başlığının gönderilip gönderilmediğini kontrol etmeli ve sonra mevcut değilse User-Agent üst bilgi ayrıştırması yöntemini kullanmalısınız.

Strateji: Kaynaklar arası isteklere ipuçları yetkilendirme

Kullanıcıların isteklerinde Kullanıcı Aracısı İstemci İpuçlarının gönderilmesini gerektiren kaynaklar arası veya siteler arası alt kaynaklar istiyorsanız İzin Politikası kullanarak istediğiniz ipuçlarını açıkça belirtmeniz gerekir.

Örneğin https://blog.site sitesinin, https://cdn.site adresinde belirli bir cihaz için optimize edilmiş kaynakları döndürebilen kaynakları barındırdığını varsayalım. https://blog.site, Sec-CH-UA-Model ipucunu isteyebilir, ancak Permissions-Policy başlığını kullanarak ipucu için açık bir şekilde https://cdn.site adlı kullanıcıya yetki vermesi gerekir. Politikayla kontrol edilen ipuçlarının listesi, İstemci İpuçları Altyapı taslağı'nda bulunabilir

⬇️ blog.site adlı kullanıcının ipucu için verdiği yanıt

Accept-CH: Sec-CH-UA-Model
Permissions-Policy: ch-ua-model=(self "https://cdn.site")

⬆️ cdn.site platformundaki alt kaynaklara gönderilen istekler, yetki verilmiş ipucunu içeriyor

Sec-CH-UA-Model: "Pixel 5"

Yalnızca ch-ua aralığından değil, birden fazla kaynak için birden fazla ipucu belirtebilirsiniz:

⬇️ blog.site tarafından birden fazla kaynağa birden fazla ipucu için yetkinin verildiği yanıt

Accept-CH: Sec-CH-UA-Model, DPR
Permissions-Policy: ch-ua-model=(self "https://cdn.site"),
                    ch-dpr=(self "https://cdn.site" "https://img.site")

Strateji: iframe'lere ipuçları yetkisi verme

Kaynaklar arası iframe'ler, kaynaklar arası kaynaklara benzer şekilde çalışır. Ancak allow özelliğinde yetki vermek istediğiniz ipuçlarını belirtirsiniz.

⬇️ blog.site adlı kullanıcının yanıtı

Accept-CH: Sec-CH-UA-Model

↪️ blog.site için HTML

<iframe src="https://widget.site" allow="ch-ua-model"></iframe>

⬆️ widget.site isteği

Sec-CH-UA-Model: "Pixel 5"

iframe'deki allow özelliği, widget.site tarafından gönderilebilecek tüm Accept-CH üst bilgilerini geçersiz kılacağından, iframe'in eklediği sitenin ihtiyaç duyacağı her şeyi belirttiğinizden emin olun.

Strateji: Dinamik sunucu tarafı ipuçları

Kullanıcı yolculuğunda, sitenin geri kalanına göre daha fazla ipucuna ihtiyaç duyduğunuz belirli bölümleriniz varsa bu ipuçlarını sitenin tamamında statik olarak değil, istek üzerine talep etmeyi seçebilirsiniz. Yönetmesi daha karmaşıktır ancak her rota için farklı başlıklar ayarladıysanız bunu yapmanız uygun olabilir.

Burada unutulmaması gereken önemli nokta, Accept-CH üst bilgisinin her bir örneğinin mevcut grubun üzerine etkili bir şekilde yazacağıdır. Bu nedenle, başlığı dinamik olarak ayarlıyorsanız her sayfa gerekli ipuçlarının tümünü istemelidir.

Örneğin, sitenizde kullanıcının işletim sistemiyle eşleşen simgeler ve denetimler sağlamak istediğiniz bir bölüm olabilir. Bunun için uygun alt kaynakları sunmak amacıyla Sec-CH-UA-Platform-Version öğesini de alabilirsiniz.

⬇️ /blog için yanıt başlıkları

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA

⬇️ /app için yanıt başlıkları

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version, Sec-CH-UA

Strateji: İlk istekte sunucu tarafı ipuçları gerekir

İlk istekte varsayılan ipucu grubundan daha fazlasına ihtiyaç duyabileceğiniz durumlar olabilir. Ancak bu nadiren yapılacak bir şeydir. Bu nedenle gerekçeyi incelediğinizden emin olun.

İlk istek aslında, söz konusu tarama oturumunda söz konusu kaynak için gönderilen ilk üst düzey istek anlamına gelir. Varsayılan ipuçları grubu, ana sürümle birlikte tarayıcı adını, platformu ve mobil göstergesini içerir. Burada sormamız gereken soru şu: İlk sayfa yüklemesinde genişletilmiş verilere ihtiyaç duyuyor musunuz?

İlk istekteki ek ipuçları için iki seçenek vardır. İlk olarak, Critical-CH başlığını kullanabilirsiniz. Bu, Accept-CH ile aynı biçimi alır ancak ilk istek önemli ipucu olmadan gönderilirse tarayıcıya, isteği hemen yeniden denemesi gerektiğini bildirir.

⬆️ İlk istek

[With default headers]

⬇️ Yanıt başlıkları

Accept-CH: Sec-CH-UA-Model
Critical-CH: Sec-CH-UA-Model

🔃 Tarayıcı, ilk isteği ekstra başlıkla yeniden dener

[With default headers + …]
Sec-CH-UA-Model: Pixel 5

Bu, ilk istek üzerinde yeniden deneme işleminin ek yükünü yaratır ancak uygulama maliyeti nispeten düşüktür. Fazladan üstbilgiyi gönderin, tarayıcı gerisini halleder.

İlk sayfa yüklemesinde gerçekten ek ipuçları gerektirmenizin olduğu durumlar için İstemci İpuçları Güvenilirliği teklifi, bağlantı düzeyindeki ayarlarda ipuçlarını belirtmek için bir rota düzenler. Bu, HTTP/2 ve HTTP/3 bağlantılarında ipuçlarının bu erken geçişini sağlamak için TLS 1.3'e yönelik Uygulama Katmanı Protokol Ayarları(ALPS) uzantısının kullanılmasını sağlar. Henüz çok erken olsa da kendi TLS ve bağlantı ayarlarınızı aktif olarak yönetiyorsanız bu dönem katkıda bulunmak için ideal bir zamandır.

Strateji: Eski destek

Sitenizde, kullanıcı aracısı dizesinin azaltılacak kısımları da dahil olmak üzere navigator.userAgent uygulamasına dayalı eski veya üçüncü taraf kodlar olabilir. Uzun vadede, eşdeğer navigator.userAgentData çağrılarına geçiş yapmayı planlamalısınız ancak geçici bir çözüm var.

UA-CH retrofill, istenen navigator.userAgentData değerlerinden oluşturulan yeni bir dizeyle navigator.userAgent öğesinin üzerine yazmanıza olanak tanıyan küçük bir kitaplıktır.

Örneğin, bu kod, ek olarak "model" ipucunu içeren bir kullanıcı aracısı dizesi oluşturur:

import { overrideUserAgentUsingClientHints } from './uach-retrofill.js';
overrideUserAgentUsingClientHints(['model'])
  .then(() => { console.log(navigator.userAgent); });

Sonuç dizesinde Pixel 5 modeli gösterilir ancak uaFullVersion ipucu istenmediği için azaltılmış 92.0.0.0 gösterilmeye devam eder:

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 alanınızı kapsamıyorsa lütfen sorununuzu birlikte keşfedebilmemiz için privacy-sandbox-dev-destek deposunda tartışma başlatın.

Fotoğrafçı: Ricardo Rocha Unsplash'te