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

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

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