Meningkatkan privasi pengguna dan pengalaman developer dengan Petunjuk Klien Agen Pengguna

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.

Rowan Merewood

Yoav Weiss

Client Hints memungkinkan developer secara aktif meminta informasi tentang perangkat atau kondisi pengguna, bukan harus mengurainya dari string User-Agent (UA). Memberikan rute alternatif ini adalah langkah pertama untuk pada akhirnya mengurangi tingkat perincian string Agen Pengguna.

Pelajari cara mengupdate fungsi yang ada yang mengandalkan penguraian string Agen Pengguna untuk menggunakan Petunjuk Klien Agen Pengguna.

Perhatian: Jika Anda sudah menggunakan Petunjuk Klien Agen Pengguna, perlu diketahui bahwa sejak Chrome 90 format header telah berubah, sehingga token Accept-CH harus sama persis dengan header yang ditampilkan.

Latar belakang

Saat membuat permintaan, browser web menyertakan informasi tentang browser dan lingkungan browser sehingga server dapat mengaktifkan analisis dan menyesuaikan responsnya. Hal ini telah ditentukan sejak tahun 1996 (RFC 1945 untuk HTTP/1.0), tempat Anda dapat menemukan definisi asli untuk string Agen Pengguna, yang menyertakan contoh:

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

Header ini dimaksudkan untuk menentukan, dalam urutan signifikansi, produk (misalnya browser atau library) dan komentar (misalnya versi).

Status string Agen Pengguna

Selama dekade yang telah berlalu, string ini telah mengumpulkan berbagai detail tambahan tentang klien yang membuat permintaan (serta cruft, karena kompatibilitas mundur). Kita dapat melihatnya saat melihat string User-Agent 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 dan versi lengkap browser, petunjuk yang cukup untuk menyimpulkan bahwa browser tersebut adalah browser seluler, dan belum lagi sejumlah referensi ke browser lain karena alasan historis.

Kombinasi parameter ini dengan keragaman kemungkinan nilai berarti string User-Agent dapat berisi informasi yang cukup untuk memungkinkan setiap pengguna diidentifikasi secara unik.

String User-Agent memungkinkan banyak kasus penggunaan yang sah, dan memiliki 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. Data 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 tidak proporsional merugikan pengguna browser yang kurang umum, karena situs mungkin gagal diuji terhadap konfigurasinya.

Memperkenalkan Petunjuk Klien Agen Pengguna baru

Client Hints Agen Pengguna memungkinkan akses ke informasi yang sama, tetapi dengan cara yang lebih menjaga privasi, sehingga browser pada akhirnya dapat mengurangi string Agen Pengguna default yang menyiarkan semuanya. 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, alih-alih mengekspos semua informasi Agen Pengguna secara default, akses kini dikelola dengan cara yang eksplisit dan dapat diaudit. Developer juga diuntungkan dengan API yang lebih sederhana - tidak ada lagi ekspresi reguler.

Kumpulan Client Hints 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" />

Browser kemudian 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.

Catatan: Ada diskusi yang sedang berlangsung tentang cara mengaktifkan Client Hints pada permintaan awal, tetapi Anda harus mempertimbangkan desain responsif atau progressive enhancement sebelum menggunakan metode ini.

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.

Catatan: Petunjuk Klien hanya dikirim melalui koneksi aman, jadi pastikan Anda telah memigrasikan situs ke HTTPS.

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 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"

Perhatian: Properti ini lebih kompleks daripada hanya satu nilai, sehingga Header Terstruktur digunakan untuk merepresentasikan daftar dan boolean.

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"	[Tidak digunakan lagi]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 untuk perangkat. Meskipun hal ini mungkin tidak relevan untuk menampilkan halaman, situs mungkin ingin menawarkan download yang secara default menggunakan format yang tepat.
Sec-CH-UA-Model	"Pixel 3"	Model perangkat.
Sec-CH-UA-Bitness	"64"	Bitness arsitektur yang mendasarinya (yaitu, ukuran dalam bit dari bilangan bulat atau alamat memori)

Poin penting: Pertimbangan privasi dan kompatibilitas berarti nilai mungkin kosong, tidak ditampilkan, atau diisi dengan nilai yang bervariasi. Hal ini disebut sebagai GREASE.

Contoh pertukaran

Contoh pertukaran akan terlihat seperti ini:

⬆️ Permintaan awal dari browser
Browser meminta halaman /downloads dari situs dan mengirimkan Agen Pengguna dasar default-nya.

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 mengirim kembali halaman 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

Bersama header, User-Agent juga dapat diakses dalam JavaScript melalui navigator.userAgentData. Informasi header Sec-CH-UA, Sec-CH-UA-Mobile, dan Sec-CH-UA-Platform default 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 ke entropi informasi, dengan kata lain, jumlah informasi yang diungkapkan nilai ini tentang browser pengguna. Seperti saat meminta header tambahan, browser akan menentukan 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.

Catatan: Pastikan Anda menggunakan Chrome 89 atau yang lebih baru.

Masa aktif petunjuk dan reset

Petunjuk yang ditentukan melalui header Accept-CH akan dikirim selama durasi sesi browser atau hingga kumpulan petunjuk yang berbeda ditentukan.

Artinya, 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 sepenuhnya 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 mengasumsikan bahwa petunjuk akan ditampilkan.

Kesuksesan: Selalu pastikan Anda tetap dapat memberikan pengalaman yang bermakna tanpa informasi ini. Hal ini untuk meningkatkan pengalaman pengguna, bukan menentukannya. Itulah sebabnya hal ini disebut "petunjuk", bukan "jawaban" atau "persyaratan".

Anda juga dapat menggunakannya untuk menghapus semua petunjuk yang dikirim oleh browser secara efektif dengan mengirimkan Accept-CH kosong dalam respons. Pertimbangkan untuk menambahkannya di mana saja 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 spesifik di https://example.com, tetapi resource yang ingin dioptimalkan berada di https://downloads.example.com, resource tersebut tidak akan menerima petunjuk apa pun.

Untuk mengizinkan petunjuk pada permintaan lintas asal, setiap petunjuk dan asal harus ditentukan oleh header Permissions-Policy. Untuk menerapkannya ke Client Hints Agen Pengguna, Anda harus menuliskan petunjuk dalam huruf kecil dan menghapus awalan sec-. Contoh:

⬇️ Respons 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 harus menggunakan Petunjuk Klien Agen Pengguna?

Jawaban singkatnya adalah Anda harus memfaktorkan ulang instance saat mengurai header User-Agent atau menggunakan panggilan JavaScript yang mengakses informasi yang sama (yaitu navigator.userAgent, navigator.appVersion, atau navigator.platform) untuk menggunakan Client Hints Agen Pengguna.

Lebih jauh lagi, Anda harus memeriksa kembali penggunaan informasi User-Agent, 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 pengecualian ini, repo User-Agent Client Hints mencantumkan beberapa kasus penggunaan yang valid untuk situs.

Apa yang terjadi dengan string Agen Pengguna?

Rencananya adalah meminimalkan kemampuan pelacakan tersembunyi di web dengan mengurangi jumlah informasi identitas yang diekspos oleh string Agen Pengguna yang ada tanpa menyebabkan gangguan yang tidak semestinya di situs yang ada. Dengan memperkenalkan Petunjuk Klien Agen Pengguna, kini Anda memiliki kesempatan untuk memahami dan bereksperimen dengan kemampuan baru tersebut, sebelum perubahan apa pun dilakukan pada string Agen Pengguna.

Pada akhirnya, informasi dalam string Agen Pengguna akan dikurangi sehingga mempertahankan format lama sekaligus hanya memberikan browser tingkat tinggi dan informasi versi signifikan yang sama sesuai dengan 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 bernama 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