Kullanıcı Aracısı İstemci İpuçları, geliştiricilerin kullanıcının tarayıcısı hakkındaki bilgilere gizliliği koruyan ve ergonomik bir şekilde erişmesine olanak tanıyan Client Hints API'nin yeni bir uzantısıdır.
İstemci İpuçları, geliştiricilerin, cihazı veya koşulları kullanıcı aracısı (UA) dizesinden ayrıştırmak yerine, kullanıcının cihazı veya koşulları hakkında etkin bir şekilde bilgi istemesini sağlar. Bu alternatif rotanın sağlanması, User-Agent dize ayrıntı düzeyini azaltmanın ilk adımıdır.
Kullanıcı aracısı dizesini ayrıştırmaya dayanan mevcut işlevinizi, bunun yerine kullanıcı aracısı istemci ipuçlarını kullanmak üzere nasıl güncelleyeceğinizi öğrenin.
Arka plan
Web tarayıcıları istek gönderirken tarayıcıyla ve ortamıyla ilgili bilgileri ekler. Böylece sunucular analizleri etkinleştirebilir ve yanıtı özelleştirebilir. Bu, 1996'da (HTTP/1.0 için RFC 1945) tanımlanmıştır. Burada, Kullanıcı Aracı dizesi için orijinal tanımı ve bir örnek bulabilirsiniz:
User-Agent: CERN-LineMode/2.15 libwww/2.17b3
Bu başlığın amacı, ürün (ör. tarayıcı veya kitaplık) ve yorumu (ör. sürüm) önem sırasına göre belirtmektir.
User-Agent dizenin durumu
Aradan geçen on yıllar boyunca bu dize, isteği yapan istemciyle ilgili çeşitli ek ayrıntılar (ve geriye dönük uyumluluk nedeniyle gereksiz bilgiler) topladı. Chrome'un mevcut User-Agent dizelerine baktığımızda şunu görebiliriz:
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ü, cihaz modeli, tarayıcının markası ve tam sürümü, mobil tarayıcı olduğunu anlamak için yeterli ipucu ve geçmiş nedenlerle diğer tarayıcılara yapılan çeşitli referanslar hakkında bilgi içerir.
Bu parametrelerin olası değerlerin çeşitliliğiyle birlikte kullanılması, User-Agent dizesinin bireysel kullanıcıların benzersiz şekilde tanımlanmasına olanak tanıyacak kadar bilgi içerebileceği anlamına gelir.
User-Agent dizesi, birçok geçerli kullanım alanına olanak tanır ve geliştiriciler ile site sahipleri için önemli bir amaca hizmet eder. Bununla birlikte, kullanıcıların gizliliğinin gizli izleme yöntemlerine karşı korunması da son derece önemlidir ve UA bilgilerinin varsayılan olarak gönderilmesi bu hedefe aykırıdır.
User-Agent dizesi söz konusu olduğunda web uyumluluğunu iyileştirmek de gerekiyor. Yapılandırılmamış olduğundan ayrıştırılması gereksiz karmaşıklığa yol açar. Bu da genellikle kullanıcılara zarar veren hatalara ve site uyumluluğu sorunlarına neden olur. Sitelerin yapılandırmalarına göre test edilememeleri nedeniyle bu sorunlar, daha az yaygın tarayıcıların kullanıcılarını orantısız bir şekilde etkiler.
Yeni Kullanıcı Aracısı İstemci İpuçları ile tanışın
Kullanıcı Aracısı İstemci İpuçları aynı bilgilere erişim sağlarken gizliliği daha çok koruyarak tarayıcıların her şeyi yayınlama varsayılanını kullanıcı aracısı dizesinin nihayetinde azaltmasını sağlar. İstemci İpuçları, sunucunun tarayıcıdan istemci hakkında bir veri grubu (ipuçları) istemesi ve tarayıcının hangi verilerin döndürüleceğini belirlemek için kendi politikalarını veya kullanıcı yapılandırmasını uygulaması gereken bir model uygular. Bu, kullanıcı aracısı bilgilerinin tümünün varsayılan olarak gösterilmesi yerine erişimin artık açık ve denetlenebilir bir şekilde yönetildiği anlamına gelir. Geliştiriciler de daha basit bir API'den yararlanır. Artık normal ifadelere gerek yok.
Mevcut Müşteri İpuçları grubu, temel olarak tarayıcının görüntüleme ve bağlantı özelliklerini açıklar. Ayrıntıları Müşteri İpuçları ile Kaynak Seçimini Otomatikleştirme başlıklı makalede inceleyebilirsiniz. Ancak burada, süreçle ilgili kısa bir hatırlatma verilmiştir.
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ı, sonraki isteklerde aşağıdaki üstbilgileri geri göndermeyi seçebilir:
⬆️ Sonraki istekler
Viewport-Width: 460
Width: 230
Sunucu, uygun bir çözünürlükte resim sunmak gibi yöntemlerle, yanıtlarını çeşitlendirmeyi seçebilir.
Kullanıcı Aracısı İstemci İpuçları, Accept-CH sunucu yanıtı üstbilgisi aracılığıyla belirtilebilecek Sec-CH-UAön ekiyle özellik aralığını genişletir. Tüm ayrıntılar için açıklayıcıyı inceleyin ve ardından teklifin tamamını inceleyin.
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.
Tarayıcı, varsayılan olarak tarayıcı markasını, önemli / ana sürümü, platformu ve istemci mobil cihaz ise bir göstergeyi döndürür:
⬆️ 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 üstbilgileri
⬇️ 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 sürümlerinin listesi. |
Sec-CH-UA-Mobile |
?1 |
Tarayıcının mobil cihazda olup olmadığını (doğru için ?1, yanlış için ?0) belirten boole değeri. |
Sec-CH-UA-Full-Version |
"84.0.4143.2" |
[Desteği sonlandı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 sistemi). |
Sec-CH-UA-Platform-Version |
"10" |
Platform veya işletim sisteminin sürümü. |
Sec-CH-UA-Arch |
"arm" |
Cihazın temel mimarisi. Bu, sayfanın görüntülenmesiyle alakalı olmasa da site, varsayılan olarak doğru biçimi kullanan bir indirme seçeneği sunabilir. |
Sec-CH-UA-Model |
"Pixel 3" |
Cihazın modeli. |
Sec-CH-UA-Bitness |
"64" |
Temel mimarinin bit sayısı (ör. tam sayı veya bellek adresinin bit cinsinden boyutu) |
Örnek exchange
Bir örnek exchange şöyle görünür:
⬆️ Tarayıcıdan gelen ilk istek
Tarayıcı, siteden /downloadssayfasını ister ve varsayılan temel User-Agent'ını 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 ayrıca tarayıcının tam 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 ek bilgilere erişim izni verir ve sonraki tüm isteklerde ek ipuçlarını geri gönderir.
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'e JavaScript'de navigator.userAgentData aracılığıyla da erişilebilir. Varsayılan Sec-CH-UA, Sec-CH-UA-Mobile ve Sec-CH-UA-Platform üst bilgi bilgilerine sırasıyla brands ve mobile özellikleri üzerinden erişilebilir:
// 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ı aracılığıyla erişilir. "Yüksek entropi" terimi, bilgi entropisi anlamına gelir. Başka bir deyişle, bu değerlerin kullanıcının tarayıcısı hakkında gösterdiği bilgi miktarıdır. Ek başlıkları istemede olduğu gibi, döndürülecek değerler (varsa) tarayıcıya bağlıdır.
// 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
Hem üstbilgileri hem de JavaScript API'yi kendi cihazınızda user-agent-client-hints.glitch.me adresinden deneyebilirsiniz.
Hint kullanım süresi ve sıfırlama
Accept-CH üstbilgisi aracılığıyla belirtilen ipuçları, tarayıcı oturumu boyunca veya farklı bir ipucu grubu belirtilene kadar gönderilir.
Bu, sunucu şunları gönderirse:
⬇️ Yanıt
Accept-CH: Sec-CH-UA-Full-Version-List
Ardından tarayıcı, kapatılana kadar ilgili sitenin tüm isteklerinde Sec-CH-UA-Full-Version-List üstbilgisini gönderir.
⬆️ Sonraki istekler
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"
Bununla birlikte, başka bir Accept-CH üstbilgisi alınırsa bu, tarayıcının gönderdiği mevcut ipuçlarının tamamen yerini alır.
⬇️ Yanıt
Accept-CH: Sec-CH-UA-Bitness
⬆️ Sonraki istekler
Sec-CH-UA-Platform: "64"
Daha önce istenen Sec-CH-UA-Full-Version-List gönderilmez.
Accept-CH üstbilgisini, ilgili sayfa için istenen ipuçları grubunun tamamını belirten bir öğe olarak düşünmek en iyisidir. Bu durumda tarayıcı, belirtilen ipuçlarını ilgili sayfadaki tüm alt kaynaklar için gönderir. İpuçları bir sonraki gezinme işleminde de geçerli olsa da site, bunların yayınlanacağını varsayamaz veya buna güvenmemelidir.
Bunu, yanıtta boş bir Accept-CH göndererek tarayıcı tarafından gönderilen tüm ipuçlarını etkili bir şekilde temizlemek için de kullanabilirsiniz. Kullanıcının tercihleri sıfırladığı veya sitenizde oturumunu kapattığı her yere bu kodu ekleyebilirsiniz.
Bu kalıp, ipuçlarının <meta http-equiv="Accept-CH" …> etiketi aracılığıyla işleyiş şekliyle de eşleşir. İstenen ipuçları yalnızca sayfa tarafından başlatılan isteklerde gönderilir ve sonraki gezinmelerde gönderilmez.
İpucu kapsamı ve kaynaklar arası istekler
İstemci ipuçları varsayılan olarak yalnızca aynı kaynaktan gelen isteklerde gönderilir. Yani, https://example.com ile ilgili belirli ipuçları isterseniz ancak optimize etmek istediğiniz kaynaklar https://downloads.example.com üzerindeyse ipucu almazsınız.
Kaynaklar arası isteklerle ilgili ipuçlarına izin vermek için her ipucu ve kaynak bir Permissions-Policy başlığıyla belirtilmelidir. Bunu bir Kullanıcı Aracısı İstemci İpucu'na uygulamak için ipucu küçük harfe dönüştürülmeli ve sec- ön eki kaldırılmalıdır. Örneğin:
⬇️ example.com'un 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 adresine gönderilen istek
Sec-CH-UA-Platform-Version: "10"
⬆️ cdn.provider veya img.example.com adresine gönderilen istekler
DPR: 2
Kullanıcı Aracısı İstemci İpuçları nerede kullanılır?
Kısa yanıt, User-Agent üst bilgisini ayrıştırdığınız veya aynı bilgilere erişen JavaScript çağrılarından herhangi birini (ör. navigator.userAgent, navigator.appVersion veya navigator.platform) kullandığınız tüm örnekleri, User-Agent istemci ipuçlarından yararlanacak şekilde yeniden tasarlamanız gerektiğidir.
Bir adım daha ileri giderek User-Agent bilgilerini kullanma şeklinizi yeniden incelemeniz ve mümkün olduğunda diğer yöntemlerle değiştirmeniz gerekir. Genellikle progresif geliştirme, özellik algılama veya duyarlı tasarımdan yararlanarak aynı hedefe ulaşabilirsiniz. User-Agent verilerine güvenmenin temel sorunu, denetlediğiniz mülk ile etkinleştirdiği davranış arasında her zaman bir eşleme tutmanızdır. Bu, algılamanızın kapsamlı olmasını ve güncel kalmasını sağlamak için gerekli bir bakım maliyetidir.
Bu uyarıları göz önünde bulundurarak, User-Agent Client Hints repo'sunda siteler için bazı geçerli kullanım alanları listelenmiştir.
User-Agent dizesine ne olur?
Plan, mevcut sitelerde gereksiz kesintiye neden olmadan mevcut kullanıcı aracısı dizesi tarafından paylaşılan kimliği tanımlayabilecek bilgilerin miktarını azaltarak web'de gizli izleme özelliğini en aza indirmektir. Kullanıcı aracısı istemci ipuçlarının kullanıma sunulması, kullanıcı aracısı dizelerinde herhangi bir değişiklik yapılmadan önce yeni özelliği anlamanıza ve denemenize olanak tanır.
Sonunda, User-Agent dizesindeki bilgiler azaltılacak. Böylece eski biçim korunurken varsayılan ipuçlarında olduğu gibi yalnızca üst düzey tarayıcı ve önemli sürüm bilgileri sağlanacak. Chromium'da bu değişiklik, ekosistemin yeni User Agent Client Hints özelliklerini değerlendirmesi için ek zaman tanımak amacıyla en az 2022'ye kadar ertelendi.
Chrome 93'ten about://flags/#reduce-user-agent işaretini etkinleştirerek bunun bir sürümünü test edebilirsiniz (Not: Bu işaret, Chrome 84-92 sürümlerinde about://flags/#freeze-user-agent olarak adlandırılıyordu). Bu işlem, uyumluluk nedeniyle geçmiş girişleri içeren bir dize döndürür ancak ayrıntılar temizlenir. Örneğin, şuna benzer bir şey:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.0.0 Mobile Safari/537.36
Sergey Zolkin'in Unsplash'teki küçük resim