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şmesini sağlayan Client Hints API'nin yeni bir uzantısıdır.
Müşteri İpuçları, geliştiricilerin User-Agent (UA) dizesinden ayrıştırmak yerine kullanıcının cihazı veya koşulları hakkında bilgi isteğinde bulunmasını 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 dair çeşitli referanslar 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 meşru kullanım alanı sağlar ve geliştiriciler ile site sahipleri için önemli bir işlev görür. Ancak kullanıcı gizliliğinin gizli izleme yöntemlerine karşı korunması da önemlidir ve UA bilgilerinin varsayılan olarak gönderilmesi bu amaca aykırıdır.
User-Agent dizesi söz konusu olduğunda web uyumluluğunu iyileştirmek de gerekiyor. Yapılandırılmamış olduğu için 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ı İstemci İpuçları, aynı bilgilere daha gizlilik korumalı bir şekilde erişilmesini sağlar. Böylece tarayıcılar, kullanıcı aracısı dizesinin her şeyi yayınlama özelliğini azaltabilir. İ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 istemci ipuçları ister:
⬇️ Sunucudan yanıt
Accept-CH: Viewport-Width, Width
Alternatif olarak meta etiket de kullanabilirsiniz:
<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />
Tarayıcı, sonraki isteklerde aşağıdaki üstbilgileri geri göndermeyi seçebilir:
⬆️ Sonraki istek
Viewport-Width: 460
Width: 230
Sunucu, yanıtlarını değiştirmeyi seçebilir (ör. resimleri uygun çözünürlükte sunarak).
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'dan itibaren Kullanıcı Aracısı İstemci İpuçları
Kullanıcı Aracısı İstemci İpuçları, Chrome 89 sürümünden beri varsayılan olarak etkindir.
Tarayıcı varsayılan olarak tarayıcı markasını, önemli / ana sürümü, platformu ve istemcinin mobil cihaz olup olmadığını belirten 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 şu şekilde 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 başlık bilgilerine sırasıyla brands ve mobile mülkleri aracılığıyla 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'ne (yani bu değerlerin kullanıcının tarayıcısı hakkında gösterdiği bilgi miktarına) atıfta bulunur. 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 adresinde 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.
Yani sunucu şunu 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"
Ancak başka bir Accept-CH başlığı alınırsa bu, tarayıcının gönderdiği mevcut ipuçlarını tamamen değiştirir.
⬇️ 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 kaynaklara 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.
Ayrıca, 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 bu yöntemi 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. Çoğu zaman, aşamalı geliştirme, özellik algılama veya duyarlı tasarım kullanarak 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ı 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 kesintilere 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, 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
Unsplash'tan Sergey Zolkin tarafından oluşturulan küçük resim