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

Sitenizi kullanıcı aracısı dizesinden yola çıkarak yeni kullanıcı aracısı istemci ipuçlarından bahsedeceğim.

Rowan Merewood

Kullanıcı Aracısı string değeri: önemli ölçüde pasif dijital parmak izi tarayıcılarda görüntülenebilir hem de işlenmesinin zor olmasıdır. Ancak, her projede geçerli olan için gerekli olan, kullanıcı aracısı verilerini toplama ve işleme daha iyi bir çözüme giden bir yol vardır. Kullanıcı Aracısı İstemci İpuçları, hem açık hem de için kullanıcı aracısı verilerine ve verileri belirli bir kolayca oluşturabilirsiniz.

Bu makale, 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.

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

Her veri toplama türünde olduğu gibi, bu işlemin nedenini her zaman hakkında daha fazla bilgi edineceksiniz. İlk adım, sorunu çözmek için 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 arama yapabilirsiniz. navigator.userAgent kullanımı için kullanıcı arabirimi kodunuzu, arka uç kodunuzu ise User-Agent HTTP üst bilgisi. Kullanıcı arabirimi kodunuzu da kontrol etmeniz gerekir. navigator.platform ve navigator.appVersion.

İşlevsel bir bakış açısıyla, kodunuzda en çok dikkat çeken kaydetme veya işleme:

  • 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)

Muhtemelen bir üçüncü taraf kitaplığı veya hizmetini de işleyeceğiz. Bu durumda, kullanıcı aracısı istemci ipuçlarını destekler.

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: işletim sisteminin adı
    • Bunun spesifikasyonda güncellendiğini ve Chrome ve diğer Chromium tabanlı tarayıcılarda da kısa süre içinde kullanıma sunulacak.

Önerilen kullanıcı aracısı dizesinin azaltılmış sürümü de geriye dönük olarak uyumlu şekilde geri yükleyebilirsiniz. Örneğin, Chrome/90.0.4430.85 ise dize Chrome/90.0.0.0 içerecektir.

Kullanıcı aracısı dizesini yalnızca tarayıcı adı, ana sürüm, işletim sistemi kullanıyorsanız, büyük ihtimalle kodunuz çalışmaya devam eder. desteğinin sonlandırılmasıyla ilgili uyarıları görebilirsiniz.

Kullanıcı Aracısı İstemci İpuçları'na geçiş yapabiliyor ve yapmanız gerekse de önleyen kod veya kaynak kısıtlamaları olabilir. Google’da bilginin azalması, bu kullanıcı aracısı dizesinin geriye dönük uyumluluğa sahip şekilde, alan kodu daha az ayrıntılı bilgi alacak olsa da temel işlevleri koruyabilir.

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

Şu anda navigator.userAgent kullanıyorsanız şuna geçiş yapmalısınız: işlemini tamamlamadan önce navigator.userAgentData yöntemini tercih ederek kullanıcı aracısı dizesinden farklıdır.

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 içeren bir nesne dizisidir Tarayıcının, tarayıcı uyumluluğuyla ilgili özellikleri listeleyebildiği markalar. Doğrudan bir dizi biçiminde erişebilir veya Belirli bir girişin olup olmadığını kontrol etmek için some() çağrısı:

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
  });

Başka bir şirketten yeni bir bölgeye geçiş yapmak istiyorsanız sunucu tarafı işlemeden istemci tarafı işlemeye. JavaScript API, HTTP istek başlıklarına erişim gerektirir. Bu nedenle, kullanıcı aracısı değerleri alıyorum.

Strateji: Statik sunucu tarafı başlık

Sunucuda User-Agent istek başlığını kullanıyorsanız ve ihtiyaçlarınız ve sitenizin tamamında nispeten tutarlı veriler bulunuyorsa, istediğiniz istemci ipuçlarını yanıtlarınızda statik bir grup olarak belirtin. Bu, genellikle tek bir yerde yapılandırmanız gerektiğinden, nispeten basit bir yaklaşımdır. konum. Örneğin, web sunucusu yapılandırmanızda olabilir. barındırma yapılandırmanızı veya yapılandırmanın üst düzey yapılandırmasını çerçeve veya platform kullanabilirsiniz.

Yanıtları dönüştürüyorsanız veya özelleştiriyorsanız bu stratejiyi göz önünde bulundurun. kullanıcı aracısı verilerine göre sunulur.

Tarayıcılar veya diğer istemciler farklı varsayılan ipuçları sağlamayı seçebilir. Dolayısıyla, tarafından sağlanmış olsa bile gerekli olan her şeyi belirtmek için iyi bir uygulamadır. varsayılandı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 gönder:

⬇️ 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, öncelikle Sec-CH-UA üstbilgisi gönderildi ve ardından User-Agent üstbilgisine geri dönecek ayrıştırılabilir.

Strateji: Kaynaklar arası isteklere ipuçları yetkilendirme

Kaynaklar arası veya siteler arası alt kaynaklar için Kullanıcı Aracısı İstemci İpuçlarını kullanmaları için aşağıdakileri yapmanız gerekir: bir İzin Politikası kullanarak istenen ipuçlarını açıkça belirtme.

Örneğin https://blog.site web sitesinin Belirli bir cihaz için optimize edilmiş kaynakları döndürebilen https://cdn.site. https://blog.site, Sec-CH-UA-Model ipucu isteyebilir ancak Permissions-Policy kullanarak bu yetkiyi https://cdn.site adlı kullanıcıya açıkça verin kullanabilirsiniz. Politikayla kontrol edilen ipuçlarının listesi, İstemci İpuçları Altyapı taslak

⬇️ 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, çapraz kaynak kaynaklara benzer şekilde çalışır ancak allow özelliğinde yetki vermek istediğiniz ipuçlarını belirtin.

⬇️ 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,Accept-CH widget.site kendisini gönderebilir. Bu nedenle, gerekir.

Strateji: Dinamik sunucu tarafı ipuçları

Kullanıcı yolculuğunda daha geniş bir seçime ihtiyaç duyduğunuz belirli bölümler varsa daha çok ipucu bulacaksanız, o ipuçlarını isteyebilirsiniz. isteğe bağlı olarak ekleyebilirsiniz. Bu daha karmaşık bir iştir: ancak her rota için farklı başlıklar ayarladıysanız uygulanabilir.

Burada unutulmaması gereken önemli nokta, Accept-CH örneğinin mevcut grubun üzerine etkili bir şekilde yazar. Dinamik bir şekilde ardından her sayfa gerekli ipuçlarının tümünü istemelidir.

Örneğin sitenizde, hakkında bilgi vermek istediğiniz bir bölüm Kullanıcının işletim sistemiyle eşleşen simgeler ve kontroller. Bunun için uygun reklamlar sunmak için ek olarak Sec-CH-UA-Platform-Version alt kaynaklar

⬇️ /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

çok sık karşılaşmazsınız, ancak bu nadir görülen bir durumdur. gerekçeyi inceledim.

İlk istek aslında söz konusu kaynak için ilk üst düzey istek anlamına gelir. gönderilen e-posta adresleridir. Varsayılan ipucu grubu, tarayıcıyı içerir adını, ana sürümü, platformu ve mobil göstergesi içerir. Evet, şu soru "İlk sayfa yüklemesinde genişletilmiş verilere ihtiyaç duyuyor musunuz?"

İlk istekteki ek ipuçları için iki seçenek vardır. Öncelikle, Critical-CH üstbilgisinden yararlanabilirsiniz. Bu, Accept-CH ile aynı biçimdedir ancak tarayıcıya, ilk bağlantıdan önce isteği hemen yeniden denemesi gerektiğini söyler kritik ipucu olmadan gönderilmişti.

⬆️ İ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 istekte yeniden deneme işleminin ek yükünü oluşturur ancak uygulama maliyeti nispeten düşüktür. Ekstra üstbilgiyi ve tarayıcıyı gönderin gerisini bize bırakın.

Size gerçekten ihtiyaç duyduğunuz durumlarda ilk sayfa yükleme, İstemci İpuçları Güvenilirliği teklif bağlantı düzeyi ayarlarında ipuçlarını belirtmek için bir rota düzenliyor. Bu Uygulama Katmanı Protokolü'nü Ayarlar(ALPS) uzantısı: TLS 1.3'ü kullanarak ipuçlarının HTTP/2 ve HTTP/3 bağlantılarında erkenden aktarılmasını sağlayın. Bu hâlâ çok erken bir aşamadadır, ancak kendi TLS'nizi aktif olarak yönetiyorsanız bağlantı ayarlarına bağlı olarak, katkıda bulunmak için ideal bir zamandır.

Strateji: Eski destek

Sitenizde navigator.userAgent, azaltıldı. Uzun vadede, bunun eşdeğerine geçiş yapmayı planlamanız gerekir: navigator.userAgentData arıyor ancak geçici bir çözüm var.

UA-CH retrofill, yapay zekanın yeni bir dizeyle navigator.userAgent öğesinin üzerine yazmanıza olanak tanıyan kitaplık istenen navigator.userAgentData değerlerinden oluşturulmuştur.

Örneğin, bu kod, "model" etiketini içerir ipucu:

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

Sonuçta elde edilen dize Pixel 5 modelini gösterir ancak azaltılmış uaFullVersion ipucu istenmediği için 92.0.0.0:

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 şurada bir tartışma başlatın: privacy-sandbox-dev-support depo Böylece sorununuzu birlikte inceleyebiliriz.

Fotoğrafçı: Ricardo Roça Unsplash'te