Meningkatkan privasi pengguna dan pengalaman developer dengan Petunjuk Klien Agen Pengguna

User-Agent Client Hints adalah perluasan baru dari 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 untuk secara aktif meminta informasi tentang perangkat atau kondisi pengguna, daripada perlu menguraikannya dari string Agen Pengguna (UA). Menyediakan rute alternatif ini adalah langkah pertama untuk pada akhirnya mengurangi perincian string Agen Pengguna.

Pelajari cara memperbarui fungsi yang ada yang bergantung pada 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 sudah didefinisikan 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, berdasarkan urutan signifikansi, produk (misalnya, browser atau library) dan komentar (misalnya, versi).

Status string Agen Pengguna

Selama dekade yang berintervensi, string ini telah memperoleh berbagai detail tambahan tentang klien yang membuat permintaan (serta penyalahgunaan, karena kompatibilitas mundur). Kita dapat melihat bahwa 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, petunjuk yang cukup untuk menyimpulkan bahwa itu adalah browser seluler, dan belum lagi sejumlah referensi ke browser lain karena alasan historis.

Kombinasi parameter ini dengan kemungkinan nilai yang sangat beragam, berarti string Agen Pengguna dapat berisi cukup informasi untuk memungkinkan setiap pengguna diidentifikasi secara unik. Jika menguji browser Anda sendiri di AmIUnique, Anda dapat melihat seberapa dekat string Agen Pengguna Anda mengidentifikasi Anda. Makin rendah "Rasio kesamaan" yang dihasilkan, makin unik permintaan Anda, makin mudah bagi server untuk melacak Anda secara diam-diam.

String Agen Pengguna memungkinkan banyak kasus penggunaan yang sah, dan memiliki tujuan penting bagi developer serta pemilik situs. Namun, privasi pengguna juga harus dilindungi dari metode pelacakan tersembunyi, dan pengiriman informasi UA secara default bertentangan dengan tujuan tersebut.

Anda juga perlu meningkatkan kompatibilitas web yang berkaitan dengan string Agen Pengguna. Library ini tidak terstruktur, sehingga mengurainya akan menimbulkan kompleksitas yang tidak perlu, yang sering kali menjadi penyebab bug dan masalah kompatibilitas situs yang merugikan pengguna. Masalah ini juga merugikan pengguna browser yang kurang umum secara signifikan, karena situs mungkin gagal diuji 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 kemudian akan mengaktifkan browser pada akhirnya mengurangi setelan default siaran semua string Agen Pengguna yang melakukan siaran. Petunjuk Klien menerapkan model saat server harus meminta set data tentang klien (petunjuk) ke browser, dan browser menerapkan kebijakan atau konfigurasi penggunanya sendiri untuk menentukan data apa 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 - bukan lagi ekspresi reguler.

Kumpulan Client Hints saat ini terutama menjelaskan tampilan browser dan kemampuan koneksi. Anda dapat mempelajari detailnya di Mengotomatiskan Pemilihan Resource dengan Petunjuk Klien, tetapi berikut adalah penyegaran singkat tentang prosesnya.

Server meminta Petunjuk Klien tertentu melalui header:

⬇️ Respons dari server

Accept-CH: Viewport-Width, Width

Atau tag meta:

<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />

Selanjutnya, 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 menampilkan 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, mulailah dengan penjelasan, lalu pelajari proposal lengkap.

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"

Header permintaan dan respons Agen Pengguna

Contoh pertukaran

Contoh pertukaran akan terlihat seperti ini:

⬆️ Permintaan awal dari browser
Browser meminta halaman /downloads dari situs dan mengirimkan 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 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 server akses ke informasi tambahan dan mengirimkan kembali petunjuk tambahan dalam 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

Di samping header, Agen Pengguna juga dapat diakses di 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 ke entropi informasi, dengan kata lain - jumlah informasi yang diungkapkan oleh nilai-nilai ini tentang browser pengguna. Seperti halnya meminta header tambahan, terserah browser nilai apa yang ditampilkan, jika ada.

// 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 Anda di user-agent-client-hints.glitch.me.

Petunjuk masa aktif dan reset

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

Hal itu berarti jika server mengirim:

⬇️ Respons

Accept-CH: Sec-CH-UA-Full-Version-List

Kemudian, browser akan mengirim 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 menggantikan 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 penetapan rangkaian 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 akan dikirimkan.

Anda juga dapat menggunakannya untuk secara efektif menghapus semua petunjuk yang dikirim oleh browser dengan mengirimkan Accept-CH kosong dalam respons. Pertimbangkan untuk menambahkan ini 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, Client Hints hanya akan dikirim pada permintaan dari origin yang sama. Artinya, jika Anda meminta petunjuk khusus tentang 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 tentang permintaan lintas origin, setiap petunjuk dan origin harus ditentukan oleh header Permissions-Policy. Untuk menerapkannya ke Petunjuk Klien Agen Pengguna, Anda harus huruf kecil pada petunjuk 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 Petunjuk Klien Agen Pengguna dapat digunakan?

Jawaban cepatnya adalah Anda harus memfaktorkan ulang setiap instance saat Anda mengurai header Agen Pengguna atau menggunakan salah satu panggilan JavaScript yang mengakses informasi yang sama (yaitu navigator.userAgent, navigator.appVersion, atau navigator.platform) untuk menggunakan Petunjuk Klien Agen Pengguna.

Lebih jauh, Anda harus memeriksa kembali penggunaan informasi Agen Pengguna, dan menggantinya dengan metode lain jika memungkinkan. Sering kali, Anda dapat mencapai tujuan yang sama dengan menggunakan progressive enhancement, deteksi fitur, atau desain responsif. Masalah dasar dalam mengandalkan data Agen Pengguna adalah Anda selalu mempertahankan pemetaan antara properti yang Anda periksa dan perilaku yang diaktifkannya. Ini adalah overhead pemeliharaan untuk memastikan 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 identifikasi yang diekspos oleh string Agen Pengguna yang ada sekaligus tidak menyebabkan gangguan yang tidak semestinya di situs yang ada. Memperkenalkan Petunjuk Klien Agen Pengguna kini memberi Anda kesempatan untuk memahami dan bereksperimen dengan kemampuan baru, sebelum perubahan dilakukan pada string Agen Pengguna.

Pada akhirnya, informasi dalam string Agen Pengguna akan dikurangi sehingga mempertahankan format lama dengan hanya memberikan informasi browser tingkat tinggi dan versi signifikan yang sama sesuai petunjuk default. Di Chromium, perubahan ini telah ditangguhkan hingga setidaknya tahun 2022 untuk memberikan waktu tambahan bagi ekosistem guna 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 diberi nama about://flags/#freeze-user-agent di versi Chrome 84 - 92). Ini akan menampilkan string dengan entri historis karena alasan kompatibilitas, tetapi dengan detail yang dibersihkan. 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