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 daripada harus mengurainya dari Agen Pengguna (UA) {i>string<i}. 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.

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

Latar belakang

Ketika membuat permintaan, {i>browser<i} web menyertakan informasi tentang {i>browser<i} dan lingkungannya sehingga server dapat mengaktifkan analisis dan menyesuaikan responsnya. Ini didefinisikan sejak tahun 1996 (RFC 1945 untuk HTTP/1.0), di mana Anda bisa temukan definisi asli untuk string Agen Pengguna, yang mencakup contoh:

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

Header ini dimaksudkan untuk menentukan produk secara berurutan berdasarkan signifikansinya (misalnya, browser atau koleksi) dan komentar (mis. versi).

Status string Agen Pengguna

Selama dekade intervensi, string ini telah memperoleh berbagai detail tentang klien yang membuat permintaan (serta tindakan yang tidak bertanggung jawab, karena kompatibilitas). Kita dapat melihat bahwa saat melihat Agen Pengguna Chrome saat ini {i>string<i}:

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 pengguna dan model perangkat, merek browser, dan versi lengkap, cukup petunjuk untuk menyimpulkan bahwa itu adalah {i>browser<i} seluler, dan belum termasuk sejumlah referensi ke browser karena alasan historis.

Kombinasi parameter ini dengan keragaman nilai yang mungkin berarti string Agen Pengguna dapat berisi cukup informasi untuk memungkinkan pengguna untuk dapat diidentifikasi secara unik.

String Agen Pengguna memungkinkan banyak kasus penggunaan yang sah, serta memiliki fungsi penting bagi developer dan pemilik situs. Namun, juga penting untuk diperhatikan bahwa para pengguna privasi dilindungi dari metode pelacakan tersembunyi, dan mengirim informasi UA secara default akan bertentangan dengan sasaran tersebut.

Selain itu, ada kebutuhan untuk meningkatkan kompatibilitas web dalam hal Agen Pengguna {i>string<i}. Model ini tidak terstruktur, jadi penguraiannya akan menghasilkan kompleksitas yang tidak perlu, yang sering menjadi penyebab bug dan masalah kompatibilitas situs yang merugikan pengguna. Masalah ini juga secara signifikan merugikan pengguna browser yang kurang umum, sebagai situs mungkin gagal melakukan pengujian terhadap konfigurasinya.

Memperkenalkan Petunjuk Klien Agen Pengguna baru

Petunjuk Klien Agen Pengguna memungkinkan akses ke informasi yang sama tetapi dengan cara yang lebih menjaga privasi, aktifkan browser agar akhirnya mengurangi nilai default string Agen Pengguna menyiarkan semuanya. Petunjuk Klien menerapkan model tempat server harus meminta kumpulan data tentang klien ke browser (petunjuk) dan browser menerapkan kebijakan atau konfigurasi penggunanya sendiri ke menentukan data apa yang ditampilkan. Artinya, bukannya mengekspos semua informasi Agen Pengguna secara default, akses kini dikelola secara eksplisit dan dapat diaudit. Developer juga diuntungkan dengan API yang lebih sederhana - tidak lagi ekspresi.

Kumpulan Petunjuk Klien saat ini terutama menjelaskan tampilan browser dan kemampuan koneksi. Anda dapat mempelajari detailnya di Mengotomatiskan Pemilihan Resource dengan Petunjuk Klien, tapi inilah penyegaran 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 pada kesempatan berikutnya permintaan:

⬆️ Permintaan berikutnya

Viewport-Width: 460
Width: 230

Server bisa memilih untuk memvariasikan responsnya, misalnya dengan menayangkan gambar pada resolusi yang sesuai.

Catatan: Ada diskusi berkelanjutan tentang pengaktifan Petunjuk Klien pada permintaan awal, tetapi Anda harus mempertimbangkan desain responsif atau {i>progressive enhancement<i} sebelum melakukannya.

Petunjuk Klien Agen Pengguna memperluas rentang properti dengan Sec-CH-UA yang dapat ditentukan melalui header respons server Accept-CH. Untuk semua detailnya, mulailah dengan penjelasan dan lalu pelajari proposal lengkapnya.

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

Petunjuk Klien Agen Pengguna dari Chromium 89

Petunjuk Klien Agen Pengguna telah diaktifkan secara default di Chrome sejak versi 89.

Secara {i>default<i}, browser menampilkan merek browser, versi signifikan / versi utama, dan indikator apakah 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 dari sekadar nilai tunggal, sehingga Terstruktur Header 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"	[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)

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

Bursa contoh

Contoh pertukaran akan terlihat seperti ini:

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

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 mengirimkan halaman kembali dan juga akan 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 server informasi tambahan dan mengirimkan kembali petunjuk tambahan dalam semua permintaan.

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 {i>header<i}, {i>User-Agent <i}juga dapat diakses dalam JavaScript melalui navigator.userAgentData. Nilai default Sec-CH-UA, Sec-CH-UA-Mobile, dan Informasi header Sec-CH-UA-Platform dapat diakses melalui brands dan Properti 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(). Tujuan "entropi tinggi" istilah ini merujuk ke entropi informasi, dengan kata - jumlah informasi yang diungkapkan nilai-nilai ini tentang browser. Seperti meminta {i>header<i} tambahan, tergantung pada browser nilai apa, jika ada, yang dikembalikan.

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

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

Petunjuk masa pakai dan reset

Petunjuk yang ditentukan melalui header Accept-CH akan dikirim selama durasi sesi browser atau hingga set 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 lengkap petunjuk yang diinginkan untuk halaman tersebut, artinya browser akan mengirim petunjuk yang ditentukan untuk semua subresource pada halaman tersebut. Sementara petunjuk akan tetap ada navigasi, situs tidak boleh mengandalkan atau beranggapan bahwa halaman itu akan ditampilkan.

Kesuksesan: Selalu pastikan Anda tetap dapat memberikan pengalaman yang bermakna tanpanya tidak akurat atau tidak sesuai. Hal ini untuk meningkatkan pengalaman pengguna, bukan mendefinisikannya. Itu sebabnya mereka disebut "{i>hints<i}" dan bukan "jawaban" atau "persyaratan"!

Anda juga dapat menggunakannya untuk menghapus secara efektif semua petunjuk yang dikirim oleh browser dengan mengirimkan Accept-CH kosong dalam respons. Pertimbangkan untuk menambahkannya di mana saja bahwa pengguna mereset preferensi atau logout dari situs Anda.

Pola ini juga sesuai dengan cara kerja petunjuk melalui Tag <meta http-equiv="Accept-CH" …>. Petunjuk yang diminta hanya akan dikirim pada permintaan yang dimulai oleh halaman dan 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 tentang https://example.com, tetapi resource yang Anda ingin dioptimalkan ada di https://downloads.example.com mereka tidak akan mendapatkan petunjuk apa pun.

Untuk mengizinkan petunjuk pada permintaan lintas asal, setiap petunjuk dan origin harus ditentukan dengan header Permissions-Policy. Untuk menerapkannya ke Petunjuk Klien Agen Pengguna, Anda perlu huruf 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 di mana Anda mengurai header Agen Pengguna atau memanfaatkan panggilan JavaScript mengakses informasi yang sama (yaitu navigator.userAgent, navigator.appVersion, atau navigator.platform) untuk menggunakan Petunjuk Klien Agen Pengguna.

Sebagai langkah lebih jauh, Anda harus memeriksa kembali penggunaan Agen-Pengguna informasi tambahan, dan menggantinya dengan metode lain bila memungkinkan. Sering kali, Anda dapat mencapai tujuan yang sama dengan memanfaatkan {i>progressive enhancement<i}, deteksi, atau desain responsif. Masalah dasar dalam mengandalkan data Agen Pengguna adalah bahwa Anda selalu mempertahankan pemetaan antara properti yang Anda periksa dan perilakunya memungkinkan Anda melakukannya. Ini adalah overhead pemeliharaan untuk memastikan bahwa deteksi Anda komprehensif dan tetap {i>up-to-date<i}.

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 pada situs yang ada. Memperkenalkan Agen Pengguna Petunjuk Klien kini memberikan kesempatan kepada Anda untuk memahami dan bereksperimen dengan Google, sebelum perubahan apa pun dilakukan pada string Agen Pengguna.

Akhirnya, informasi dalam string Agen Pengguna akan dikurangi sehingga format lama tapi hanya menyediakan browser tingkat tinggi yang sama dan informasi versi sesuai petunjuk default. Di Chromium, perubahan ini telah ditangguhkan hingga setidaknya tahun 2022 untuk memberikan waktu tambahan bagi ekosistem mengevaluasi kemampuan baru Petunjuk Klien Agen Pengguna.

Anda dapat menguji versi ini dengan mengaktifkan about://flags/#reduce-user-agent dari Chrome 93 (Catatan: tanda ini sebelumnya bernama about://flags/#freeze-user-agent di versi Chrome 84 - 92). Hal ini akan mengembalikan {i>string<i} dengan entri historis untuk alasan kompatibilitas, tetapi dengan secara spesifik dan 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 nyala Buka Pembukaan