Kullanıcı Aracısı İstemci İpuçları ile kullanıcı gizliliğini ve geliştirici deneyimini iyileştirme

İstemci İpuçları API'sinin yeni bir uzantısı olan kullanıcı aracısı istemci ipuçları, geliştiricilerin kullanıcının tarayıcısıyla ilgili bilgilere gizliliği koruyan ve ergonomik bir şekilde erişmesini sağlar.

İstemci İpuçları, geliştiricilerin kullanıcının kullanıcı arayüzü hakkında etkin şekilde bilgi istemesini sağlar. cihazı veya koşulları User-Agent'tan (UA) çıkarmaya gerek kalmadan dize. Bu alternatif rotayı sunmak, proje sonunda Kullanıcı Aracısı dizesi ayrıntı düzeyini azaltır.

Verilerinizi ayrıştırmaya dayalı mevcut işlevlerinizi nasıl güncelleyeceğinizi Bunun yerine Kullanıcı Aracısı İstemci İpuçlarından yararlanmak için Kullanıcı Aracısı dizesi.

Arka plan

Web tarayıcıları istekte bulunduğunda, tarayıcı ve tarayıcı hakkında bilgiler içerir. Böylece sunucuların analizleri etkinleştirebileceği ve yanıtı özelleştirebileceği için Bu, 1996'da (HTTP/1.0 için RFC 1945) baştan sona tanımlandı. HTTP/1.0 için User-Agent dizesinin orijinal tanımını örnek:

User-Agent: CERN-LineMode/2.15 libwww/2.17b3

Bu başlık, ürünü önem sırasına göre (ör. tarayıcı veya kitaplık) ve bir yorum (ör. sürüm) oluşturun.

User-Agent dizesinin durumu

Aradan geçen on yıllar içinde, bu dize müşterinin isteği gönderen ayrıntıları (ayrıca, geriye dönük yaklaşımlar nedeniyle uyumluluk). Chrome'un mevcut Kullanıcı Aracısı'na baktığımızda dize:

Mozilla/5.0 (Linux; Android 10; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4076.0 Mobile Safari/537.36

Yukarıdaki dize, kullanıcının işletim sistemi ve sürümünü, cihaz modelini, tarayıcının markasını ve tam sürümünü bir mobil tarayıcı olduğu çıkarımında bulunacak ve diğer eski nedenlerle yaşadığınızdır.

Bu parametrelerin olası değerlerin tam çeşitliliğiyle birlikte kullanılması Kullanıcı Aracısı dizesinin, tek bir kullanıcının belirli bir benzersiz bir şekilde tanımlamalısınız.

User-Agent dizesi, birçok geçerli kullanım alanına olanak tanır. hem de geliştiriciler ve site sahipleri için önemli bir amaca hizmet eder. Ancak, kullanıcıların geri bildirimleri Gizli izleme yöntemlerine karşı korunduğundan, ve UA bilgilerini göndermek varsayılan olarak bu hedefe aykırıdır.

Konu Kullanıcı Aracısı olduğunda ise web uyumluluğunun iyileştirilmesi de gerekir. dize. Yapılandırılmamış olduğundan ayrıştırmak gereksiz karmaşıklığa neden olur. Genellikle kullanıcılara zarar veren hataların ve site uyumluluğu sorunlarının nedeni budur. Bu sorunlar, yaygın olmayan tarayıcıların kullanıcılarına orantısız bir şekilde zarar da verir. siteleri, yapılandırmalarını test edememiş olabilir.

Yeni Kullanıcı Aracısı İstemci İpuçları ile tanışın

Kullanıcı Aracısı İstemci İpuçları aynı bilgilere erişilmesini sağlamak için, ancak gizliliği korumaya yönelik tarayıcıların, User-Agent dizesinin varsayılan her şeyi yayınlıyor. İstemci İpuçları, sunucunun tarayıcıdan istemciyle ilgili bir dizi veri istemesi gereken model (ipuçları) ve tarayıcı kendi politikalarını veya kullanıcı yapılandırmasını hangi verilerin döndürüleceğini belirler. Bu, tüm aramaları göstermek yerine varsayılan olarak User-Agent bilgilerini içerir. Erişim artık gözden geçirelim. Geliştiriciler de daha basit bir API'den yararlanıyor; artık düzenli değil !

Mevcut İstemci İpuçları grubu birincil olarak tarayıcının görünümünü açıklar ve bağlantı özellikleri. Ayrıntılı bilgiyi İstemci İpuçlarıyla Kaynak Seçimini Otomatikleştirme bölümünde bulabilirsiniz. ama sürecin kısa bir özetini aşağıda bulabilirsiniz.

Sunucu, bir başlık aracılığıyla belirli İstemci İpuçlarını ister:

⬇️ Sunucudan yanıt

Accept-CH: Viewport-Width, Width

Veya bir meta etiket:

<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />

Tarayıcı, daha sonra aşağıdaki üstbilgileri tekrar göndermeyi seçebilir istekler:

⬆️ Sonraki istekler

Viewport-Width: 460
Width: 230

Sunucu, yanıtlarını çeşitlendirmeyi tercih edebilir. Örneğin, uygun bir çözüm olabilir.

Kullanıcı Aracısı İstemci İpuçları, Sec-CH-UA ile özellik aralığını genişletir ön eki Accept-CH sunucu yanıtı başlığı aracılığıyla belirtilebilir. Herkes için önce açıklayıcıyla başlayın, ardından daha sonra teklifin tamamını ayrıntılı bir şekilde inceleyebilirsiniz.

Chromium 89'daki Kullanıcı Aracısı İstemci İpuçları

Kullanıcı Aracısı İstemci İpuçları, 89 sürümünden itibaren Chrome'da varsayılan olarak etkindir.

Varsayılan olarak, tarayıcı tarayıcı markasını, önemli / ana sürümü, platform ve müşterinin mobil cihaz olup olmadığını belirten bir gösterge:

⬆️ Tüm istekler

Sec-CH-UA: "Chromium";v="93", "Google Chrome";v="93", " Not;A Brand";v="99"
Sec-CH-UA-Mobile: ?0
Sec-CH-UA-Platform: "macOS"

User-Agent yanıtı ve istek başlıkları

⬇️ Yanıt Accept-CH
⬆️ İstek başlığı
⬆️ İstek
Örnek değer
Açıklama
Sec-CH-UA "Chromium";v="84",
"Google Chrome";v="84"
Tarayıcı markalarının ve önemli versiyonlarının listesi.
Sec-CH-UA-Mobile ?1 Tarayıcının mobil cihazda olup olmadığını (doğru için ?1) veya olmadığını (yanlış için ?0) gösteren boole değeri.
Sec-CH-UA-Full-Version "84.0.4143.2" [Kullanımdan kaldırıldı]Tarayıcının tam sürümü.
Sec-CH-UA-Full-Version-List "Chromium";v="84.0.4143.2",
"Google Chrome";v="84.0.4143.2"
Tarayıcı markalarının ve tam sürümlerinin listesi.
Sec-CH-UA-Platform "Android" Cihazın platformu, genellikle işletim sistemidir (OS).
Sec-CH-UA-Platform-Version "10" Platformun veya işletim sisteminin sürümü.
Sec-CH-UA-Arch "arm" Cihazın temel mimarisi. Bu, sayfanın görüntülenmesiyle alakalı olmayabilir ancak site, varsayılan olarak doğru biçimde olan bir indirme olanağı sunmak isteyebilir.
Sec-CH-UA-Model "Pixel 3" Cihazın modeli.
Sec-CH-UA-Bitness "64" Temel mimarinin bitliği (ör. bir tam sayı veya bellek adresinin bit cinsinden boyutu)

Örnek exchange

Örnek bir exchange aşağıdaki gibi görünür:

⬆️ Tarayıcıdan ilk istek
Tarayıcı /downloads sayfasını çağırır ve varsayılan temel User-Agent'ı gönderir.

GET /downloads HTTP/1.1
Host: example.site

Sec-CH-UA: "Chromium";v="93", "Google Chrome";v="93", " Not;A Brand";v="99"
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Platform: "Android"

⬇️ Sunucudan yanıt
Sunucu sayfayı geri gönderir ve buna ek olarak tam tarayıcı sürümünü ve platformu ister.

HTTP/1.1 200 OK
Accept-CH: Sec-CH-UA-Full-Version-List

⬆️ Sonraki istekler
Tarayıcı, sunucuya daha fazla bilgi edinir ve ekstra ipuçlarını sonraki tüm kabul edersiniz.

GET /downloads/app1 HTTP/1.1
Host: example.site

Sec-CH-UA: " Not A;Brand";v="99", "Chromium";v="98", "Google Chrome";v="98"
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Full-Version-List: " Not A;Brand";v="99.0.0.0", "Chromium";v="98.0.4738.0", "Google Chrome";v="98.0.4738.0"
Sec-CH-UA-Platform: "Android"

JavaScript API

Başlıkların yanı sıra User-Agent'a JavaScript içinden de erişilebilir. navigator.userAgentData Varsayılan Sec-CH-UA, Sec-CH-UA-Mobile ve Sec-CH-UA-Platform üstbilgi bilgilerine brands ve Sırasıyla mobile mülk:

// Log the brand data
console.log(navigator.userAgentData.brands);

// output
[
  {
    brand: 'Chromium',
    version: '93',
  },
  {
    brand: 'Google Chrome',
    version: '93',
  },
  {
    brand: ' Not;A Brand',
    version: '99',
  },
];

// Log the mobile indicator
console.log(navigator.userAgentData.mobile);

// output
false;

// Log the platform value
console.log(navigator.userAgentData.platform);

// output
"macOS";

Ek değerlere getHighEntropyValues() çağrısıyla erişilebilir. İlgili içeriği oluşturmak için kullanılan "yüksek entropi" bilgi entropisi anlamına gelir. kelime - bu değerlerin kullanıcının kimliği hakkında ortaya koyduğu bilgi miktarı emin olun. Ek üstbilgilerin istenmesinde olduğu gibi, bu da hangi değerlerin (varsa) döndürüldüğünü belirler.

// Log the full user-agent data
navigator
  .userAgentData.getHighEntropyValues(
    ["architecture", "model", "bitness", "platformVersion",
     "fullVersionList"])
  .then(ua => { console.log(ua) });

// output
{
   "architecture":"x86",
   "bitness":"64",
   "brands":[
      {
         "brand":" Not A;Brand",
         "version":"99"
      },
      {
         "brand":"Chromium",
         "version":"98"
      },
      {
         "brand":"Google Chrome",
         "version":"98"
      }
   ],
   "fullVersionList":[
      {
         "brand":" Not A;Brand",
         "version":"99.0.0.0"
      },
      {
         "brand":"Chromium",
         "version":"98.0.4738.0"
      },
      {
         "brand":"Google Chrome",
         "version":"98.0.4738.0"
      }
   ],
   "mobile":false,
   "model":"",
   "platformVersion":"12.0.1"
}

Demo

Başlıkları ve JavaScript API'sini kendi cihazınızda şu adresten deneyebilirsiniz: user-agent-client-hints.glitch.me.

Kullanım süresi ve sıfırlama için ipucu

Accept-CH başlığı aracılığıyla belirtilen ipuçları, tarayıcı oturumunda veya farklı bir ipucu kümesi belirtilene kadar.

Bu, sunucu şunları gönderirse:

⬇️ Yanıt

Accept-CH: Sec-CH-UA-Full-Version-List

Bu durumda tarayıcı tüm isteklerde Sec-CH-UA-Full-Version-List üstbilgisini gönderir bu site için geri bildirim alırsınız.

⬆️ Sonraki talepler

Sec-CH-UA-Full-Version-List: " Not A;Brand";v="99.0.0.0", "Chromium";v="98.0.4738.0", "Google Chrome";v="98.0.4738.0"

Ancak başka bir Accept-CH üstbilgisi alınırsa bu, tamamen değiştirin.

⬇️ Yanıt

Accept-CH: Sec-CH-UA-Bitness

⬆️ Sonraki talepler

Sec-CH-UA-Platform: "64"

Daha önce istenen Sec-CH-UA-Full-Version-List gönderilmeyecek.

Accept-CH üstbilgisinin, dönüşüm hunisinin tamamını kapsayan için istenen ipuçlarını (yani tarayıcı, belirtilen ipuçlarını gönderir) alt kaynaklar için bu seçeneği işaretleyin. İpuçları bir sonraki sitede gezinmeye devam edecekse, bunların teslim edileceğine inanmamalı veya bunları varsaymamalıdır.

Bunu, tarayıcı tarafından gönderilen tüm ipuçlarını etkili bir şekilde temizlemek için de kullanabilirsiniz (yanıtta boş bir Accept-CH) gönderebilirsiniz. Bunu herhangi bir yere ekleyebilirsiniz kullanıcının tercihlerini sıfırladığından veya sitenizden çıkış yaptığından emin olun.

Bu kalıp, ipuçlarının <meta http-equiv="Accept-CH" …> etiketi. İstenen ipuçları yalnızca sayfa tarafından başlatılan ve sonraki gezinme sırasında değil.

İpucu kapsamı ve kaynaklar arası istekler

Varsayılan olarak, İstemci İpuçları yalnızca aynı kaynak isteklerde gönderilir. Yani, https://example.com konusunda daha spesifik ipuçları, ancak https://downloads.example.com tarihinde optimize etmek istediklerinde yapılmayacaklar daha fazla ipucu alabilirsiniz.

Kaynaklar arası isteklerde ipuçlarına izin vermek için her ipucu ve kaynak belirtilmelidir Permissions-Policy üstbilgisi ile. Bunu bir Kullanıcı Aracısı İstemci İpucuna uygulamak için ipucunun küçük harfle yazılması ve sec- önekinin kaldırılması gerekir. Örneğin:

⬇️ example.com tarafından gönderilen yanıt

Accept-CH: Sec-CH-UA-Platform-Version, DPR
Permissions-Policy: ch-ua-platform-version=(self "downloads.example.com"),
                    ch-dpr=(self "cdn.provider" "img.example.com");

⬆️ downloads.example.com isteği

Sec-CH-UA-Platform-Version: "10"

⬆️ cdn.provider veya img.example.com istekleri

DPR: 2

Kullanıcı Aracısı İstemci İpuçları nerede kullanılır?

Hızlı yanıt, ayrıştırma yaptığınız tüm örnekleri yeniden düzenlemeniz gerektiğidir. işlemini yapan kullanıcı aracısını veya kullanıcıyı aynı bilgilere erişin (ör. navigator.userAgent, navigator.appVersion, veya navigator.platform) kaldırın.

Bunu bir adım daha ileri götürerek, User-Agent kullanımınızı yeniden incelemelisiniz. kullanın ve mümkün olduğunda bunları başka yöntemlerle değiştirin. Genellikle bir görev için kullanarak aynı hedefe ulaşmanıza yardımcı olacaktır. veya duyarlı tasarıma sahip olduğundan emin olun. Kullanıcı Aracısı verilerine güvenmenin temel sorunu, her zaman incelemekte olduğunuz mülk ile bu mülkün davranışı arasında bir eşlemenin sürdürülmesini sağlar. sağlar. Bu, uygulamanızın algılanmasını sağlamak için gereken ek bakımdır. kapsamlı ve güncel kalmasını sağlamaktır.

Bu uyarılar göz önünde bulundurularak, Kullanıcı Aracısı İstemci İpuçları deposu, siteler için bazı geçerli kullanım alanlarını listeler.

User-Agent dizesine ne olur?

Plan, web'de gizli izleme özelliğini mevcut User-Agent dizesi ile açığa çıkan tanımlayıcı bilgilerin miktarı hem de mevcut sitelerde gereksiz kesintilere neden olmaz. User-Agent ile Tanışın İstemci İpuçları artık size yeni anahtar kelime önerilerini anlama ve bunlarla denemeler yapma özelliği ile birlikte çalışır.

Sonuçta, User-Agent dizesindeki bilgiler, aynı üst düzey tarayıcıyı ve önemli verileri sağlar. sürüm bilgilerini varsayılan ipuçlarına göre ayarlayın. Chromium'da bu değişiklik ekosistemine ek süre tanıması için en az 2022'ye yeni kullanıcı aracısı istemci ipuçları özelliklerini değerlendirin.

Şu API'yi etkinleştirerek bunun bir sürümünü test edebilirsiniz: Chrome 93'ten about://flags/#reduce-user-agent işareti (Not: Bu işaret Chrome 84 - 92 sürümlerinde about://flags/#freeze-user-agent olarak adlandırılmıştır). Bu, uyumluluk nedeniyle geçmiş girişleri içeren, ancak arındırılmış ayrıntılar. Örneğin:

Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.0.0 Mobile Safari/537.36

Küçük resim: Sergey Zolkin açık Başlangıç