Petunjuk Klien Agen Pengguna adalah ekspansi baru untuk Client Hints API yang memungkinkan developer mengakses informasi tentang browser pengguna dengan cara yang menjaga privasi dan ergonomis.
Petunjuk Klien memungkinkan developer secara aktif meminta informasi tentang perangkat atau kondisi pengguna, sehingga tidak perlu mengurainya dari string Agen Pengguna (UA). Menyediakan rute alternatif ini adalah langkah pertama untuk mengurangi perincian string Agen Pengguna.
Pelajari cara memperbarui fungsi yang ada yang mengandalkan penguraian string Agen Pengguna untuk menggunakan Petunjuk Klien Agen Pengguna.
Latar belakang
Saat membuat permintaan, browser web menyertakan informasi tentang browser dan lingkungannya sehingga server dapat mengaktifkan analisis dan menyesuaikan respons. Ini didefinisikan sejak tahun 1996 (RFC 1945 untuk HTTP/1.0), tempat Anda dapat menemukan definisi asli untuk string Agen Pengguna, yang mencakup sebuah contoh:
User-Agent: CERN-LineMode/2.15 libwww/2.17b3
Header ini dimaksudkan untuk menentukan, berdasarkan urutan signifikan, produk (misalnya browser atau library) dan komentar (misalnya, versi).
Status string Agen Pengguna
Selama dekade intervensi, string ini telah memperoleh berbagai detail tambahan tentang klien yang membuat permintaan (serta nilai penting, karena kompatibilitas mundur). Kita dapat melihatnya saat melihat string Agen Pengguna Chrome saat ini:
Mozilla/5.0 (Linux; Android 10; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4076.0 Mobile Safari/537.36
String di atas berisi informasi tentang sistem operasi dan versi pengguna, model perangkat, merek browser dan versi lengkap, cukup petunjuk untuk menyimpulkan bahwa browser tersebut adalah browser seluler, dan belum lagi sejumlah referensi ke browser lain karena alasan historis.
Dengan kombinasi parameter ini dengan keragaman nilai yang memungkinkan, string Agen Pengguna dapat berisi cukup informasi yang memungkinkan setiap pengguna diidentifikasi secara unik.
String Agen Pengguna memungkinkan banyak kasus penggunaan yang sah, dan memberikan tujuan penting bagi developer dan pemilik situs. Namun, privasi pengguna juga harus dilindungi dari metode pelacakan tersembunyi, dan pengiriman informasi UA secara default bertentangan dengan sasaran tersebut.
Anda juga perlu meningkatkan kompatibilitas web dalam hal string Agen Pengguna. Library ini tidak terstruktur, sehingga penguraiannya akan menghasilkan kompleksitas yang tidak perlu, yang sering kali menjadi penyebab bug dan masalah kompatibilitas situs yang merugikan pengguna. Masalah ini juga secara signifikan merugikan pengguna browser yang kurang umum, karena situs mungkin gagal diuji berdasarkan konfigurasinya.
Memperkenalkan Petunjuk Klien Agen Pengguna baru
Petunjuk Klien Agen Pengguna memungkinkan akses ke informasi yang sama, tetapi dengan cara yang lebih menjaga privasi, yang pada akhirnya memungkinkan browser untuk mengurangi penyiaran semua hal secara default dari string Agen Pengguna. Petunjuk Klien menerapkan model saat server harus meminta kumpulan data tentang klien ke browser (petunjuk) dan browser menerapkan kebijakan atau konfigurasi penggunanya sendiri untuk menentukan data yang ditampilkan. Artinya, akses kini dikelola secara eksplisit dan dapat diaudit, bukan mengekspos semua informasi Agen Pengguna secara default. Developer juga mendapatkan manfaat dari API yang lebih sederhana - tidak ada lagi ekspresi reguler.
Kumpulan Petunjuk Klien saat ini terutama menjelaskan kemampuan tampilan dan koneksi browser. Anda dapat mempelajari detailnya di Mengotomatiskan Pemilihan Resource dengan Petunjuk Klien, tetapi berikut adalah pengingat singkat tentang prosesnya.
Server meminta Client Hints tertentu melalui header:
⬇️ Respons dari server
Accept-CH: Viewport-Width, Width
Atau tag meta:
<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />
Kemudian, browser dapat memilih untuk mengirim kembali header berikut dalam permintaan berikutnya:
⬆️ Permintaan berikutnya
Viewport-Width: 460
Width: 230
Server dapat memilih untuk memvariasikan responsnya, misalnya dengan menayangkan gambar pada resolusi yang sesuai.
Petunjuk Klien Agen Pengguna memperluas rentang properti dengan awalan Sec-CH-UA
yang dapat ditentukan melalui header respons server Accept-CH
. Untuk semua
detailnya, mulai dengan penjelasan, lalu
pelajari proposal lengkapnya.
Petunjuk Klien Agen Pengguna dari Chromium 89
Petunjuk Klien Agen Pengguna telah diaktifkan secara default di Chrome sejak versi 89.
Secara default, browser menampilkan merek browser, versi yang signifikan / utama, platform, dan indikator jika klien adalah perangkat seluler:
⬆️ Semua permintaan
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"
Header permintaan dan respons Agen Pengguna
⬇️ Respons Accept-CH ⬆️ Header permintaan |
⬆️ Permintaan Nilai contoh |
Deskripsi |
---|---|---|
Sec-CH-UA |
"Chromium";v="84", "Google Chrome";v="84" |
Daftar merek browser dan versi signifikannya. |
Sec-CH-UA-Mobile |
?1 |
Boolean yang menunjukkan apakah browser ada di perangkat seluler (?1 untuk benar) atau tidak (?0 untuk salah). |
Sec-CH-UA-Full-Version |
"84.0.4143.2" |
[Deprecated]Versi lengkap untuk browser. |
Sec-CH-UA-Full-Version-List |
"Chromium";v="84.0.4143.2", "Google Chrome";v="84.0.4143.2" |
Daftar merek browser dan versi lengkapnya. |
Sec-CH-UA-Platform |
"Android" |
Platform untuk perangkat, biasanya sistem operasi (OS). |
Sec-CH-UA-Platform-Version |
"10" |
Versi untuk platform atau OS. |
Sec-CH-UA-Arch |
"arm" |
Arsitektur dasar perangkat. Meskipun hal ini mungkin tidak relevan untuk menampilkan halaman, situs tersebut mungkin ingin menawarkan download yang menggunakan format default yang tepat. |
Sec-CH-UA-Model |
"Pixel 3" |
Model perangkat. |
Sec-CH-UA-Bitness |
"64" |
Bitness arsitektur yang mendasarinya (yaitu, ukuran dalam bit alamat memori atau integer) |
Bursa contoh
Contoh pertukaran akan terlihat seperti ini:
⬆️ Permintaan awal dari browser
Browser meminta halaman /downloads
dari situs dan mengirim Agen Pengguna dasar defaultnya.
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"
⬇️ Respons dari server
Server akan mengirimkan halaman kembali dan juga
meminta versi browser lengkap dan platform.
HTTP/1.1 200 OK
Accept-CH: Sec-CH-UA-Full-Version-List
⬆️ Permintaan berikutnya
Browser memberikan akses ke
informasi tambahan kepada server dan mengirimkan kembali petunjuk tambahan di semua permintaan
berikutnya.
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
Selain header, Agen Pengguna juga dapat diakses dalam JavaScript melalui navigator.userAgentData
. Informasi header Sec-CH-UA
, Sec-CH-UA-Mobile
, dan
Sec-CH-UA-Platform
default masing-masing dapat diakses melalui properti brands
dan
mobile
:
// 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";
Nilai tambahan diakses melalui panggilan getHighEntropyValues()
. Istilah
"entropi tinggi" adalah referensi untuk entropi informasi, dengan kata lain - jumlah informasi yang diungkapkan nilai ini tentang browser
pengguna. Seperti meminta header tambahan, browser bergantung pada
nilai apa, jika ada, yang ditampilkan.
// 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
Anda dapat mencoba header dan JavaScript API pada perangkat sendiri di user-agent-client-hints.glitch.me.
Petunjuk masa pakai dan reset
Petunjuk yang ditentukan melalui header Accept-CH
akan dikirim selama durasi sesi browser atau hingga kumpulan petunjuk yang berbeda ditentukan.
Hal ini berarti jika server mengirim:
⬇️ Respons
Accept-CH: Sec-CH-UA-Full-Version-List
Kemudian, browser akan mengirimkan header Sec-CH-UA-Full-Version-List
pada semua permintaan
untuk situs tersebut hingga browser ditutup.
⬆️ Permintaan berikutnya
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"
Namun, jika header Accept-CH
lain diterima, header tersebut akan benar-benar
mengganti petunjuk saat ini yang dikirim browser.
⬇️ Respons
Accept-CH: Sec-CH-UA-Bitness
⬆️ Permintaan berikutnya
Sec-CH-UA-Platform: "64"
Sec-CH-UA-Full-Version-List
yang sebelumnya diminta tidak akan dikirim.
Sebaiknya anggap header Accept-CH
sebagai menentukan kumpulan petunjuk lengkap
yang diinginkan untuk halaman tersebut, yang berarti browser kemudian mengirimkan petunjuk yang ditentukan
untuk semua subresource di halaman tersebut. Meskipun petunjuk akan tetap ada di navigasi
berikutnya, situs tidak boleh mengandalkan atau berasumsi bahwa petunjuk tersebut akan diberikan.
Anda juga dapat menggunakannya untuk secara efektif menghapus semua petunjuk yang dikirim oleh browser
dengan mengirimkan Accept-CH
kosong dalam respons. Pertimbangkan untuk menambahkannya di mana pun
saat pengguna mereset preferensi atau logout dari situs Anda.
Pola ini juga cocok dengan cara kerja petunjuk melalui
tag <meta http-equiv="Accept-CH" …>
. Petunjuk yang diminta hanya akan dikirim pada
permintaan yang dimulai oleh halaman, bukan pada navigasi berikutnya.
Cakupan petunjuk dan permintaan lintas origin
Secara default, Petunjuk Klien hanya akan dikirim pada permintaan dari origin yang sama. Artinya,
jika Anda meminta petunjuk tertentu di https://example.com
, tetapi resource yang ingin
Anda optimalkan ada di https://downloads.example.com
, resource tersebut tidak akan
menerima petunjuk apa pun.
Untuk mengizinkan petunjuk pada permintaan lintas asal, setiap petunjuk dan origin harus ditentukan
oleh header Permissions-Policy
. Untuk menerapkannya ke Petunjuk Klien Agen Pengguna, Anda harus menulis kecil petunjuk dan menghapus awalan sec-
. Contoh:
⬇️ Jawaban dari example.com
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");
⬆️ Permintaan ke downloads.example.com
Sec-CH-UA-Platform-Version: "10"
⬆️ Permintaan ke cdn.provider
atau img.example.com
DPR: 2
Di mana Petunjuk Klien Agen Pengguna digunakan?
Jawaban cepatnya adalah Anda harus memfaktorkan ulang setiap instance saat Anda mengurai header Agen Pengguna atau menggunakan panggilan JavaScript apa pun yang mengakses informasi yang sama (yaitu navigator.userAgent
, navigator.appVersion
, atau navigator.platform
) untuk memanfaatkan Petunjuk Klien Agen Pengguna.
Sebagai langkah lebih lanjut, Anda harus memeriksa kembali penggunaan informasi Agen Pengguna, dan menggantinya dengan metode lain jika memungkinkan. Sering kali, Anda dapat mencapai sasaran yang sama dengan memanfaatkan progressive enhancement, deteksi fitur, atau desain responsif. Masalah dasar dalam mengandalkan data Agen Pengguna adalah Anda selalu mempertahankan pemetaan antara properti yang diperiksa dan perilaku yang diaktifkan. Ini merupakan overhead pemeliharaan untuk memastikan bahwa deteksi Anda komprehensif dan tetap terbaru.
Dengan mempertimbangkan peringatan ini, repo Petunjuk Klien Agen Pengguna mencantumkan beberapa kasus penggunaan yang valid untuk situs.
Apa yang terjadi pada string Agen Pengguna?
Rencananya adalah meminimalkan kemampuan pelacakan tersembunyi di web dengan mengurangi jumlah informasi identitas yang terekspos oleh string Agen Pengguna yang ada tanpa menyebabkan gangguan yang tidak semestinya pada situs yang ada. Memperkenalkan Petunjuk Klien Agen Pengguna kini memberi Anda kesempatan untuk memahami dan bereksperimen dengan kemampuan baru, sebelum perubahan apa pun dilakukan pada string Agen Pengguna.
Pada akhirnya, informasi dalam string Agen Pengguna akan dikurangi sehingga dapat mempertahankan format lama sementara hanya menyediakan browser tingkat tinggi dan informasi versi signifikan yang sama sesuai petunjuk default. Di Chromium, perubahan ini telah ditangguhkan hingga setidaknya tahun 2022 guna memberikan waktu tambahan bagi ekosistem untuk mengevaluasi kemampuan Petunjuk Klien Agen Pengguna yang baru.
Anda dapat menguji versi ini dengan mengaktifkan
tanda about://flags/#reduce-user-agent
dari Chrome 93 (Catatan: tanda ini
dinamai about://flags/#freeze-user-agent
di versi Chrome 84 - 92). Tindakan ini akan
menampilkan string dengan entri historis untuk alasan kompatibilitas, tetapi dengan
detail yang bersih. Misalnya:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.0.0 Mobile Safari/537.36
Thumbnail oleh Sergey Zolkin di Unsplash