Get your free and exclusive +45-page Authentication Analytics Whitepaper
Kembali ke ringkasan

Client Hints & User-Agents di Chrome, Safari & Firefox

Pelajari dukungan User-Agent & Client Hints API di Chrome, Safari & Firefox serta cara kami menggunakannya untuk passkey & deteksi perangkat di komponen JavaScript.

Vincent Delitz
Vincent Delitz

Dibuat: 2 Juli 2024

Diperbarui: 27 Juli 2026

Client Hints & User-Agents di Chrome, Safari & Firefox

Halaman ini diterjemahkan secara otomatis. Baca versi asli berbahasa Inggris di sini.

PasskeysCheatsheet Icon

Cheatsheet Passkeys. Panduan praktis, pola peluncuran, dan KPI untuk program passkeys.

Dapatkan cheat sheet
Fakta utama
  • Pengurangan User-Agent telah selesai di semua browser utama: Chrome dan Edge sejak 2023, Firefox sebagian dan Safari dibekukan sejak iOS 26 yang dirilis September 2025.
  • Firefox tidak mendukung Client Hints atau navigator.userAgentData, mengharuskan developer untuk kembali menggunakan penguraian string User-Agent klasik di browser Mozilla.
  • API JavaScript getHighEntropyValues() mengakses data perangkat entropi tinggi hanya di browser berbasis Chromium. Safari dan Firefox sama sekali tidak memiliki API ini.
  • Perbedaan Windows 10 vs. Windows 11 tidak mungkin diketahui hanya melalui string User-Agent. Hanya Client Hints pada Chrome dan Edge yang dapat mengungkapkan versi platform yang sebenarnya.
  • Corbado menggunakan Client Hints untuk passkey intelligence: mendeteksi perangkat baru dan mengevaluasi kelayakan autentikasi lintas perangkat, terutama untuk membedakan versi Windows.

1. Pendahuluan: Apa itu Client Hints dan Pengurangan User-Agent?#

Metode untuk mendeteksi dan merespons lingkungan pengguna yang berbeda terus berubah. Secara tradisional, string User-Agent telah menjadi cara untuk mengidentifikasi informasi browser dan perangkat, memungkinkan situs web untuk menyesuaikan pengalaman dengan tepat. Namun, string ini sering digunakan untuk fingerprinting dan mengidentifikasi pengguna tanpa persetujuan mereka karena alasan pemasaran yang menimbulkan masalah privasi.

Dalam konteks ini, Client Hints sebagai API JavaScript telah muncul sebagai alat, memberikan cara yang lebih terkontrol dan menghargai privasi untuk membagikan informasi yang diperlukan tentang perangkat dan preferensi pengguna. Artikel ini berkonsentrasi pada konsekuensi pengurangan User-Agent dan mengeksplorasi bagaimana Client Hints membantu beradaptasi dengan situasi baru ini.

Poin penting yang akan kita bahas:

  • Apa itu pengurangan User-Agent: Memahami pergeseran ke arah string User-Agent yang dikurangi dan implikasinya.
  • Bagaimana Client Hints Bekerja: Mengeksplorasi mekanisme di balik Client Hints dan bagaimana mereka dapat diimplementasikan secara efektif.

Karena browser dan sistem operasi memiliki pendirian yang berbeda dan mengadaptasi pendekatan mereka secara berbeda, pengembang perangkat lunak menghadapi tantangan untuk memastikan aplikasi mereka masih dapat mendeteksi dan merespons lingkungan pengguna yang bervariasi secara akurat di seluruh browser dan sistem operasi.

Artikel ini bertujuan untuk memberikan ikhtisar komprehensif tentang perubahan ini, menawarkan wawasan dan panduan praktis untuk membantu developer jika use case atau perangkat lunak mereka bergantung pada detail perangkat atau sistem operasi (misalnya, manajemen perangkat terperinci, mendeteksi perangkat yang dikenal, pencegahan penipuan, atau deteksi fitur lainnya) atau seperti dalam kasus kita sendiri mengoptimalkan pengalaman kunci sandi dengan User-Agent dan Client Hints.

Sebelum kita menyelami detail teknis tentang Client Hints, kita akan mengeksplorasi secara singkat sejarah User-Agent dan bagaimana berbagai upaya pengurangan User-Agent bekerja.

1.1 Sejarah Singkat User-Agent#

Sejarah string User-Agent dapat ditelusuri kembali ke awal mula web browser. Tim Berners-Lee mengembangkan browser web pertama, WorldWideWeb (kemudian berganti nama Nexus) pada tahun 1990. Ini segera diikuti oleh browser perintis lainnya seperti Line Mode Browser pada tahun 1991, dan selanjutnya, browser seperti MidasWWW, ViolaWWW, Erwise, dan Cello bermunculan.

Pada tahun 1993, rilisnya NCSA Mosaic, yang sering disebut sebagai Mosaic saja, dikreditkan dengan memicu lonjakan awal popularitas web. String User-Agent Mosaic cukup lugas, biasanya diformat sebagai NCSA_Mosaic/1.0 yang menampilkan nama produk diikuti dengan garis miring dan nomor versi opsional.

Awalnya, bidang User-Agent diperkenalkan untuk tujuan analitis dan untuk membantu mengidentifikasi masalah. Bidang ini secara eksplisit direkomendasikan "harus disertakan" dalam permintaan HTTP, sebagaimana dicatat dalam arsip HTTP W3C dari tahun 1992. Bidang yang lugas ini memberikan cara yang sederhana namun efektif untuk menyampaikan nama dan versi produk, membantu dalam pemahaman dan pemecahan masalah terkait browser.

Seiring berkembangnya web, begitu pula kompleksitas dan penggunaan string User-Agent. String tersebut menjadi lebih rinci dan mulai menyertakan banyak informasi tentang browser, sistem operasi, dan perangkat. Meskipun informasi ini berharga untuk analitik web dan mengoptimalkan pengalaman pengguna, informasi ini juga menimbulkan masalah privasi yang signifikan. String User-Agent yang mendetail memungkinkan device fingerprinting, sehingga pengiklan dan pelacak dapat membuat profil pengguna yang unik dan melacak aktivitas online mereka di berbagai situs web.

Di era modern, di mana privasi telah menjadi perhatian penting bagi pengguna dan pembuat peraturan, sifat detail dari string User-Agent semakin dipandang sebagai masalah. Kesadaran ini telah mengarah pada upaya untuk mengurangi perincian string User-Agent, yang bertujuan untuk menyeimbangkan antara menyediakan informasi yang diperlukan untuk fungsionalitas web dan melindungi privasi pengguna. Transisi ini menandai awal dari pengurangan User-Agent, sebuah gerakan menuju minimalisasi informasi yang dibagikan dalam string User-Agent untuk memitigasi risiko privasi dan meningkatkan keamanan.

1.2 Pengantar Pengurangan User-Agent & Client Hints#

Gerakan menuju pengurangan User-Agent dimulai sebagai respons terhadap masalah privasi yang berkembang. Berikut adalah gambaran kronologis tonggak sejarah utama dalam evolusi ini:

1.2.1 User-Agent di Safari#

Pada tahun 2017, Apple memulai gerakan pengurangan User-Agent dengan sebuah postingan Twitter yang terkenal mengumumkan bahwa Safari akan membekukan string User-Agent di Safari Technology Preview 46 (STP 46), yang bertujuan untuk memerangi fingerprinting dan meningkatkan privasi.

Namun, keputusan ini kemudian dibalik sebagian pada tahun 2021 karena signifikan masalah kompatibilitas dengan situs web yang mengandalkan informasi User-Agent yang mutakhir.

1.2.2 User-Agent di Chrome (+ Edge)#

Pada 2019/2020, Google mengumumkan rencana untuk mengurangi rincian string User-Agent di Chrome, dengan memperkenalkan User-Agent Client Hints (UA-CH) sebagai cara yang fleksibel dan terkendali untuk meminta informasi browser dan perangkat tertentu. Google mulai menguji pengurangan User-Agent di versi Chrome Canary dan Beta, mengumpulkan masukan untuk memastikan kompatibilitas dan fungsionalitas dan selesai pada tahun 2023 untuk Android dan semua platform Chrome lainnya. Pada saat yang sama, Chrome memperkenalkan Client Hints sebagai cara baru untuk mengakses informasi tersebut. Karena Microsoft Edge didasarkan pada Chromium, Microsoft Edge berperilaku seperti Chrome di semua platform.

1.2.3 User-Agent di Firefox#

Pada tahun 2021, Mozilla bergabung dengan upaya tersebut, secara bertahap mengurangi rincian string User-Agent tetapi Mozilla memutuskan untuk tidak mendukung Client Hints di Firefox.

1.2.4 User-Agent Saat Ini (Diperbarui September 2025)#

  • Pengurangan User-Agent bervariasi berdasarkan browser: Chromium (Chrome, Edge) telah mengimplementasikan pengurangan UA penuh dengan dukungan Client Hints. Namun, Safari menggunakan pendekatan UA bekunya sendiri tanpa mengadopsi UA-CH, dan Firefox belum mengimplementasikan navigator.userAgentData. Ekosistem tetap terfragmentasi.

  • Client Hints telah berkembang di dalam Chromium: Semua browser masih mengirim header User-Agent, tetapi di sebagian besar browser, header tersebut dibekukan ke versi yang lebih lama (lihat tabel di bawah). Untuk Chromium, Client Hints dapat digunakan untuk mendapatkan informasi lebih lanjut.

Mari kita lihat apa yang saat ini dikirim browser sebagai User-Agent pada bab berikut.

Substack Icon

Berlangganan Passkeys Substack kami untuk berita terbaru.

Berlangganan

2. Apa itu Pengurangan User-Agent?#

Saat berbicara tentang Pengurangan User-Agent, yang dimaksud adalah mengurangi informasi di dalam string User-Agent. Mari kita gali lebih dalam untuk mengetahui apa yang disematkan ke dalam User-Agent sebelum pengurangan.

2.1 Apa itu User-Agent Klasik?#

String User-Agent klasik biasanya mencakup komponen berikut, yang dapat digunakan untuk mendeteksi fungsionalitas:

Mozilla/5.0 (Linux; Android 13; Pixel 7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.2.1.0 Mobile Safari/537.36

  • Sistem Operasi: Nama sistem operasi (misalnya, Windows, macOS, Linux).
  • Nomor Versi Sistem Operasi: Versi spesifik sistem operasi.
  • Nama Browser: Nama browser (misalnya, Chrome, Firefox, Safari).
  • Versi Browser: Versi spesifik browser.
  • Arsitektur: Arsitektur sistem (misalnya, x86, ARM).
  • Jenis/Model Perangkat: Informasi tentang jenis atau model perangkat (misalnya, iPhone, Pixel).
  • Informasi Lainnya: Ini dapat mencakup detail tambahan seperti platform, nomor build, dll.

2.1.1 Mengapa Menggunakan User-Agent untuk Deteksi Fitur?#

Secara historis, string User-Agent sering digunakan untuk deteksi fitur dan platform, memungkinkan situs web untuk menyesuaikan konten dan fungsionalitasnya berdasarkan karakteristik browser dan perangkat yang terdeteksi (misalnya, menentukan unduhan untuk biner tertentu yang akan ditawarkan). Hal ini menjadi sangat penting dengan munculnya ponsel dan tablet untuk tata letak yang tidak dibuat responsif untuk dapat mengarahkan ponsel ke versi spesifik mereka.

Namun, pendekatan ini sekarang dianggap suboptimal, karena mengandalkan asumsi tentang kemampuan browser yang mungkin tidak berlaku atau tidak cukup spesifik. Praktik pengembangan web modern menyarankan penggunaan deteksi fitur melalui API browser jika memungkinkan untuk langsung memeriksa fitur dan kemampuan browser tertentu. Metode ini lebih dapat diandalkan dan memastikan bahwa situs web berfungsi dengan benar terlepas dari string User-Agent atau versi browser. Deteksi fitur berfokus pada kemampuan aktual browser, memberikan cara yang lebih kuat dan tahan masa depan untuk menangani perbedaan perilaku dan fungsionalitas browser.

Hingga saat ini, hal ini belum sepenuhnya memungkinkan karena API browser baru untuk mendeteksi fungsionalitas diimplementasikan pada waktu yang berbeda dan seringkali ada pendekatan yang berbeda antara tim browser yang lebih besar (misalnya browser berbasis Chromium) dan tim browser yang lebih kecil (misalnya Firefox).

2.1.2 Memahami Entropi dalam Fingerprinting: Mengapa Memberikan Banyak Informasi Menjadi Masalah?#

Lebih banyak informasi memberi situs web kemungkinan yang lebih luas untuk membuat fingerprint dengan lebih banyak "entropi". Entropi dalam konteks ini adalah jumlah variasi yang dapat digunakan untuk menghasilkan fingerprint yang unik di antara pengunjung yang berbeda dari sebuah situs web.

Sebuah fingerprint dapat digunakan untuk berbagai tujuan. Dapat digunakan untuk tujuan perlindungan seperti mendeteksi penipuan dan menghentikan pengambilalihan akun dengan mengidentifikasi perangkat baru, tetapi juga dapat digunakan untuk mengidentifikasi pengunjung tanpa persetujuan mereka atau untuk penargetan iklan yang lebih spesifik.

Dalam konteks string User-Agent, entropi mengacu pada jumlah informasi unik yang dapat diidentifikasi yang dapat digunakan untuk melacak dan membedakan pengguna individu.

  • Informasi entropi tinggi: Seperti versi browser dan OS tertentu, berkontribusi secara signifikan pada keunikan fingerprint pengguna, sehingga lebih mudah untuk melacak mereka di berbagai situs web.
  • Informasi entropi rendah: Nama browser umum atau nama sistem operasi, memberikan data yang kurang rinci dan lebih sedikit berkontribusi pada pelacakan pengguna karena lebih banyak pengguna membawa kombinasi tersebut.

Ada banyak informasi lebih lanjut yang dapat digunakan sebagai sumber entropi di bawah User-Agent. Misalnya, Anda dapat menemukan berbagai sumber entropi di https://coveryourtracks.eff.org.

2.2 Pengurangan Entropi User-Agent#

Oleh karena itu, ketika browser berbicara tentang pengurangan User-Agent, mereka terutama menargetkan untuk mengurangi informasi entropi tinggi. Berikut adalah contoh berbeda untuk pengurangan tersebut:

2.2.1 Contoh 1: Pengurangan User-Agent Chrome#

Berikut ini, Anda akan menemukan contoh untuk pengurangan User-Agent Chrome dari Google di ponsel Android:

Sebelumnya: Mozilla/5.0 (Linux; Android <span style={{color: '#016F01' }}>13; Pixel 7</span>) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.0.0 Mobile Safari/537.36

Setelah: Mozilla/5.0 (Linux; Android <span style={{color: '#016F01' }}>10; K</span>) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.0.0 Mobile Safari/537.36

Format User-Agent tetap tidak berubah agar tidak mengganggu logika penguraian library yang ada. Nilai-nilai berikut dikurangi:

  • Versi sistem operasi
  • Versi minor browser
  • Model perangkat keras

Grafik ini merinci nilai-nilai mana yang akan terus diperbarui berdasarkan sistem operasi dan nilai hijau menunjukkan nilai mana yang akan konstan di semua platform. Untuk nilai sistem operasi yang berbeda hanya akan ada varian yang tersedia yang tetap konstan:

Sistem operasiNama dikurangi/tetap
MacMacintosh; Intel Mac OS X 10_15_7
WindowsWindows NT 10.0; Win64; x64
ChromeOSX11; CrOS x86_64 14541.0.0
LinuxX11; Linux x86_64
AndroidLinux; Android 10; K
iOSdikurangi (iOS 26+)

2.2.2 Contoh 2: Pengurangan User-Agent Firefox#

Berikut ini, Anda akan menemukan contoh untuk pengurangan User-Agent Mozilla Firefox yang mengikuti sebagian besar posisi Google tentang pengurangan User-Agent.

Berikut adalah contoh User-Agent pada Windows 11 dengan versi Firefox saat ini:

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:127.0) Gecko/20100101 Firefox/127.0

Pada User-Agent ini, Arsitektur CPU, versi sistem operasi, dan versi minor browser telah dibekukan.

2.2.3 Contoh 3: Pengurangan User-Agent Safari di macOS#

Berikut ini, Anda akan menemukan contoh pengurangan User-Agent Safari di macOS.

Pertama, mari kita mulai dengan User-Agent Safari pada macOS Sonoma Versi 14.5 di Mac Silicon M2.

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15

Anda dapat melihat bahwa Versi macOS dibatasi pada 10_15_07 dan arsitekturnya juga tetap ke Intel tidak melaporkan arsitektur CPU Mac. Ini juga berlaku untuk Firefox dan Chrome di macOS.

2.2.4 Contoh 4: User-Agent Safari di iOS (Sekarang Dikurangi di iOS 26+)#

Sebelum iOS 26 (dirilis September 2025), Safari di iOS mengungkap versi sistem operasi yang sebenarnya. Namun, Apple kini telah membekukan User-Agent iOS/iPadOS di Safari 26, mirip dengan macOS. Contoh di bawah menunjukkan User-Agent pra-iOS 26:

Mozilla/5.0 (iPhone; CPU iPhone OS 17_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1

Catatan: Mulai iOS 26, semua browser di iOS (Chrome, Firefox, Safari) sekarang memiliki string User-Agent yang dibekukan, mirip dengan macOS. Contoh di bawah menunjukkan perilaku pra-iOS 26:

Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/126.0.6478.153 Mobile/15E148 Safari/604.1

Mozilla/5.0 (iPhone; CPU iPhone OS 17_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/127.1 Mobile/15E148 Safari/605.1.15

2.3 Keterbatasan Deteksi dengan Pengurangan User-Agent#

Secara keseluruhan, jelas bahwa User-Agent dikurangi secara khusus pada informasi entropi tinggi. Ringkasan berikut menunjukkan pada platform / kombinasi sistem operasi mana User-Agent dikurangi.

BrowserWindowsMacOSiOSAndroid
Chromedikurangidikurangidikurangi (iOS 26+)dikurangi
Edgedikurangidikurangidikurangi (iOS 26+)dikurangi
Firefoxdikurangidikurangidikurangi (iOS 26+)dikurangi
Safari-dikurangi*dikurangi (Safari 26+)**-
Samsung Internet---dikurangi
WebViews--dikurangi (iOS 26+)tidak dikurangi (≥ 16: dikurangi)

Oleh karena itu, masalah deteksi paling penting dengan User-Agent yang dikurangi adalah (* = lihat keterangan di bawah untuk versi macOS):

  • Windows 10 dan Windows 11 tidak dapat dibedakan: Anda tidak dapat membedakan sistem Windows 10 dan Windows 11 berdasarkan User-Agent lagi.
  • Perangkat Android & versi sistem operasi tidak dapat dibedakan: Berbeda dengan Apple, Android dulu memasukkan model perangkat keras aktual ke dalam User-Agent. Ini tidak lagi terjadi. Oleh karena itu, berbagai model perangkat keras tidak dapat lagi dibedakan hanya melalui User-Agent. Dengan Apple ini tidak pernah mungkin.
  • Versi macOS & arsitektur tidak dapat dibedakan: Tidak ada cara untuk membedakan versi macOS dan arsitektur platform berdasarkan User-Agent.
  • (*) Versi macOS pada Safari: Safari telah membekukan versi sistem operasi tetapi terus menampilkan Versi Safari. Pada saat penulisan untuk 10.15 dan di atasnya, aman untuk mengurangi tiga dari versi Safari untuk mendeteksi Versi MacOS utama.
  • (**) Versi iOS pada Safari 26+: Mulai iOS 26 (September 2025), Apple telah membekukan User-Agent iOS/iPadOS, mirip dengan macOS. Versi OS tidak lagi diekspos.

Berikut adalah tabel yang memetakan versi macOS ke versi Safari yang sesuai:

Versi macOSVersi SafariTahun Rilis
macOS Sequoia (15)Safari 182024
macOS Sonoma (14)Safari 172023
macOS Ventura (13)Safari 162022
macOS Monterey (12)Safari 152021
macOS Big Sur (11)Safari 142020
macOS Catalina (10.15)Safari 132019

Ada cara lain untuk mendeteksi sistem operasi dan browser berdasarkan teknik fingerprinting yang rumit, seperti fingerprinting TLS. Karena ada skenario yang sah di mana deteksi sistem operasi yang lebih dalam akan masuk akal, Google memperkenalkan Client Hints untuk dapat menerima informasi ini secara terprogram. Kita akan melihat bagaimana Client Hints bekerja di bab berikutnya.

3. Bagaimana Client Hints Bekerja?#

Client Hints memungkinkan situs web mengakses informasi entropi tinggi yang dihapus dari string User-Agent dengan cara yang ramah privasi. Ada dua metode utama untuk mengakses Client Hints:

  • Header HTTP: Menggunakan header permintaan HTTP, yang hanya tersedia untuk konteks pihak pertama.
  • API JavaScript: Menggunakan API JavaScript, yang dapat digunakan oleh skrip yang disematkan.

Client hints juga dapat digunakan untuk mengambil informasi entropi rendah yang sudah termasuk dalam User-Agent. Ini menyiratkan bahwa di Chrome, di mana client hints didukung, user-agent tidak diperlukan lagi.

3.1 Client Hints Apa Saja yang Ada?#

Bergantung pada metode akses mana yang digunakan, penamaan Client hints sedikit berbeda. Kami telah mencantumkan nama Client Hints yang paling penting:

Token HTTP UA-CHAPI JS UA-CHEntropi
Sec-CH-UA-Platform-VersionUADataValues.platformVersionTinggi
Sec-CH-UA-MobileNavigatorUAData.mobileRendah
Sec-CH-UA-ModelUADataValues.modelTinggi
Sec-CH-UANavigatorUAData.brandsRendah
Sec-CH-UA-ArchUADataValues.architectureTinggi

3.2 Cara Mengakses Client Hints melalui Header Permintaan HTTP#

Dalam konteks pihak pertama, situs web dapat meminta informasi spesifik tentang browser dan perangkat pengguna menggunakan header permintaan HTTP. Pendekatan ini melibatkan pengaturan header yang benar di respons HTTP server, menunjukkan Client Hints mana yang diinginkan server. Browser kemudian menyertakan petunjuk ini dalam permintaan berikutnya ke asal yang sama.

Header ini memberi sinyal kepada browser untuk mengirim informasi pengguna terperinci di permintaan mendatang, memungkinkan server menyesuaikan respons dengan tepat. Metode ini memastikan bahwa informasi pengguna yang terperinci hanya dapat diakses oleh situs web pihak pertama, mencegah sumber pihak ketiga mendapatkan data entropi tinggi. Ada dua jenis header permintaan yang tersedia yang akan kita bahas sekarang:

  • Header Regular Client Hint
  • Header Critical (Client) Hint

3.2.1 Bagaimana Cara Menggunakan Header Regular Client Hint?#

Regular Client Hints adalah header yang dapat diminta server dari browser untuk mengumpulkan informasi tentang lingkungan pengguna dalam permintaan berikutnya.

Contoh: Chrome pada macOS 14.5 dengan Client Hints reguler di corbado.com

  1. Pada permintaan pertama untuk Corbado.com, Chrome sudah akan menyertakan header entropi rendah berikut karena informasi ini juga termasuk dalam User-Agent.
HeaderNilai
Sec-Ch-Ua"Google Chrome";v="125", "Chromium";v="125", "Not.A/Brand";v="24"
Sec-Ch-Ua-Mobile?0
Sec-Ch-Ua-Platform"macOS"
  1. Katakanlah Corbado.com ingin menerima versi sistem operasi (versi platform) pada permintaan berikutnya. Oleh karena itu, ia kemudian akan menetapkan header "Sec-CH-UA-Platform-Version" yang sesuai dalam respons ke permintaan pertama:
HeaderNilai
Accept-CHSec-CH-UA-Platform-Version
  1. Pada permintaan berikutnya, Corbado.com kemudian akan menerima satu header tambahan dengan versi platform:
HeaderNilai
Sec-Ch-Ua"Google Chrome";v="125", "Chromium";v="125", "Not.A/Brand";v="24"
Sec-Ch-Ua-Mobile?0
Sec-Ch-Ua-Platform"macOS"
Sec-Ch-Ua-Platform"14.5.0"

Pada saat yang sama, User-Agent untuk permintaan ini akan tetap sama (tanpa versi platform):

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36

Menggunakan https://user-agent-client-hints.glitch.me/headers, Anda sebenarnya dapat bermain-main dengan bagaimana berbagai tata letak informasi akan terlihat untuk petunjuk reguler (ingat Anda harus menggunakan Chrome). Lihat di sini untuk detail selengkapnya. Jika corbado.com membutuhkan informasi ini pada permintaan halaman pertama kali, maka menggunakan Regular Client Hints tidak akan cukup, tetapi ada cara untuk mempercepat proses ini dengan critical (client) hints.

3.2.2 Bagaimana Cara Menggunakan Header Critical (Client) Hint?#

Misalkan corbado.com akan membutuhkan platform-version pada permintaan pertama untuk merender halaman unduhan yang tepat yang disesuaikan dengan versi macOS yang tepat. Ini dapat menggunakan Critical (client) hints yang akan menyebabkan percobaan ulang langsung atas permintaan untuk hanya merender halaman termasuk header:

Contoh: Chrome pada macOS 14.5 dengan critical Client Hints di corbado.com

  1. Pada permintaan pertama untuk corbado.com, Chrome sudah akan menyertakan header entropi rendah berikut karena informasi ini juga termasuk dalam User-Agent.
HeaderNilai
Sec-CH-UA"Google Chrome";v="125", "Chromium";v="125", "Not_A/Brand";v="24"
Sec-CH-UA-Mobile?0
Sec-CH-UA-Platform"macOS"
  1. Katakanlah corbado.com ingin menerima versi sistem operasi (versi platform) pada rendering pertama halaman. Ia kemudian akan menetapkan header critical client hint "Sec-CH-UA-Platform-Version" di respons ke permintaan pertama:
HeaderNilai
Accept-CHSec-CH-UA-Platform-Version
  1. Chrome tidak akan mulai merender dan segera mencoba kembali permintaan, sehingga header tersedia pada rendering pertama corbado.com. Ini kemudian akan menerima header tambahan dengan versi platform:
HeaderNilai
Sec-CH-UA"Google Chrome";v="125", "Chromium";v="125", "Not_A/Brand";v="24"
Sec-CH-UA-Mobile?0
Sec-CH-UA-Platform"macOS"
Sec-CH-UA-Platform-Version"14.5.0"

Pada grafik berikut, kita melihat contoh lain di mana situs web meminta model perangkat sebagai bagian kritis dengan header Critical-CH. Seperti yang bisa kita lihat, klien mencoba ulang permintaan seperti pada contoh di atas (grafik urutan kiri).

Client hints dengan Chromium: https://developers.google.com/privacy-sandbox/protections/User-Agent

Oleh karena itu, menggunakan critical Client Hints menambah latensi karena browser harus memulai permintaan kedua segera dengan menambahkan bolak-balik (roundtrips). Ada cara untuk mengoptimalkan transfer dengan memfasilitasi handshake TLS (kotak hijau di bagian atas grafik) untuk segera mengirimkan detail. Pendekatan yang memfasilitasi ALPN (Application-Layer Protocol Negotiation) dapat ditemukan di sini secara detail tetapi berada di luar tujuan artikel ini.

Untuk menerima informasi tambahan menggunakan header, konfigurasi perlu ditambahkan baik ke backend atau ke webserver / load balancer. Ini mudah dilakukan dalam konteks pihak pertama, ketika Anda memiliki kontrol penuh atas situs web sebagai perusahaan. Misalnya, komponen UI kami di corbado.com memerlukan versi platform untuk meningkatkan presisi passkey intelligence kami. Developer mengintegrasikan komponen kami pada berbagai halaman dan mengharuskan mereka untuk menambahkan header dan kemudian meneruskan informasi tersebut ke komponen kami akan menjadi overhead yang tidak menyenangkan. Untuk SPA dan aplikasi JavaScript tertanam lainnya, ada antarmuka lain yang dapat digunakan, yang akan dijelaskan di bagian berikutnya.

3.3 Cara Mengakses Client hints melalui API JavaScript (Skrip Tertanam)#

Menggunakan fungsi navigator.userAgentData.getHighEntropyValues(), Client hints juga dapat diakses melalui API JavaScript, yang memberikan cara yang fleksibel dan dinamis untuk meminta informasi spesifik tentang browser dan perangkat pengguna. Metode ini melibatkan penggunaan objek navigator.userAgentData dalam skrip halaman web untuk meminta Client Hints. Metode ini tidak mengharuskan header Client Hint ditetapkan, tetapi ini hanya berfungsi pada browser yang mendukung navigator.userAgentData (browser berbasis Chromium seperti Chrome dan Edge). Firefox dan Safari tidak mendukung API ini, sehingga developer harus mendeteksi fitur dan memberikan fallback.

Misalnya, ketika menjalankan kode ini di Console Chrome pada macOS:

if (navigator.userAgentData) { navigator.userAgentData .getHighEntropyValues(["architecture", "model", "platformVersion"]) .then((ua) => { console.log(ua); }); }

Ketika promise selesai (resolves), informasi yang relevan dikembalikan. Seperti yang kami uraikan di atas, nama-nama tersebut tidak sepenuhnya identik dengan header tetapi sangat mirip.

platformVersion kemudian dikembalikan dalam promise dan dapat diakses langsung dari kode JavaScript yang disematkan. Cakupan untuk fungsi ini jauh lebih rendah daripada hukum pengurangan User-Agent sebenarnya:

Selain itu, Chrome tidak menawarkan fungsionalitas ini pada iOS karena ia menerapkan WebKit pada iOS karena keterbatasan Apple.

Kami sekarang telah mengumpulkan fakta terpenting tentang pengurangan User-Agent dan bagaimana Client hints menawarkan jalan keluarnya di Chrome.

4. Rekomendasi untuk Mendekati User-Agent Saat Ini#

Bergantung pada use case Anda, Anda harus menggunakan pendekatan berbeda untuk memastikan aplikasi Anda mendapatkan hasil terbaik:

  • Deteksi Fitur: Gunakan API JavaScript browser yang ada di mana pun memungkinkan. Jika memungkinkan, andalkan API browser untuk mendeteksi fungsionalitas secara langsung, daripada menggunakan User-Agent. Ini lebih andal dan tahan masa depan.
  • Untuk entropi rendah, petunjuk seperti jenis perangkat: User-Agent sudah cukup. Jika aplikasi Anda hanya perlu menentukan jenis perangkat atau detail entropi rendah lainnya, string User-Agent akan cukup rinci. Anda juga dapat menggunakan API yang ada untuk tujuan ini.
  • Untuk informasi entropi tinggi dan kontrol domain: Gunakan pendekatan header. Jika Anda memerlukan informasi mendetail dan memiliki kontrol atas domain, gunakan pendekatan header HTTP untuk meminta informasi entropi tinggi jika didukung (Chrome, Edge). Pada semua browser lain (yang tidak mengirim header Client hint) gunakan User-Agent klasik. Putuskan apakah Anda perlu menggunakan critical Client Hints berdasarkan apakah Anda memerlukan informasi itu dengan segera atau bisa mentolerir sedikit keterlambatan.
  • Untuk library JavaScript: Gunakan getHighEntropyValues. Jika Anda sedang mengembangkan library JavaScript, opsi terbaik adalah menggunakan fungsi navigator.userAgentData.getHighEntropyValues() untuk meminta informasi spesifik secara dinamis tentang browser dan perangkat pengguna kapan pun fungsi ini didefinisikan dan jatuh kembali ke library penguraian User-Agent untuk kasus lain.

Tabel berikut merangkum di mana Anda masih dapat mendeteksi versi sistem operasi jika Anda memiliki akses ke User-Agent (UA) dan Client Hints (CH):

BrowserWindowsMacOSiOSAndroid
Chrome✅ CH✅ CH❌ (iOS 26+)✅ CH
Edge✅ CH✅ CH❌ (iOS 26+)✅ CH
Firefox❌ (iOS 26+)
Safari-✅ UA-Safari❌ (Safari 26+)-
Samsung Internet---✅ CH
WebViews--❌ (iOS 26+)✅ UA (≥ 16: ❌)

Dengan memilih metode yang tepat berdasarkan kebutuhan spesifik Anda, Anda dapat secara efektif menyeimbangkan kebutuhan informasi pengguna yang mendetail dengan pertimbangan privasi dan kinerja. Jika Anda sangat bergantung pada informasi yang sulit diekstraksi atau benar-benar berbasis perangkat, beralihlah ke library profesional seperti wurfl atau 51degrees.com yang melakukan pekerjaan berat untuk Anda. Kedua library mendukung integrasi tautan klien ke dalam deteksi dan juga memiliki cara khusus (proprietary) mereka sendiri untuk mendeteksi model iPhone.

5. Cara Menggunakan User-Agent dan Client Hints untuk Kunci Sandi#

Di Corbado, kami berfokus untuk mengembangkan solusi seputar kunci sandi (passkeys) menggunakan komponen UI yang sebagian besar dikembangkan dengan React. Komponen kami disematkan ke dalam berbagai situs web, jadi kami mengikuti rekomendasi kami sendiri dan menggunakan getHighEntropyValues() di mana pun tersedia, kembali ke penguraian User-Agent klasik untuk semua kasus lainnya. Kami utamanya menggunakan ini untuk:

  • Manajemen kunci sandi: Di situs manajemen kunci sandi kami, kami menampilkan semua informasi yang tersedia tentang perangkat tempat kunci sandi dibuat.
  • Autentikasi Lintas Perangkat: Untuk autentikasi lintas perangkat, kami menggunakan informasi tentang sistem operasi untuk menentukan seberapa besar kemungkinan klien mendukung pemanfaatan CDA. Ini sangat penting saat membedakan antara Windows 10 dan 11, yang hanya dimungkinkan dengan Client Hints di Chrome dan Edge:

Detail selengkapnya tentang: https://learn.microsoft.com/en-us/microsoft-edge/web-platform/how-to-detect-win11

  • Passkey intelligence: Kami percaya bahwa platform harus memutuskan apakah upaya login dengan kunci sandi harus dimulai. Oleh karena itu, kami mengintegrasikan logika sebanyak mungkin ke dalam komponen kami untuk mendeteksi jika perangkat baru sedang digunakan. Dalam skenario seperti itu, sistem operasi yang lebih kecil atau baru merupakan petunjuk berharga bahwa segalanya mungkin telah berubah.

Ketika kami mulai mengumpulkan informasi untuk komponen kami, kami menemukan banyak data terfragmentasi yang dibuat selama atau sebelum dimulainya pengurangan User-Agent. Oleh karena itu, kami berpikir bahwa sebuah ringkasan akan membantu developer yang ingin meningkatkan deteksi tetapi tidak bekerja dengan User-Agent atau Client Hints secara rutin.

6. Kesimpulan#

Setelah deteksi berbasis User-Agent menjadi standar selama beberapa dekade, string User-Agent menjadi kurang rinci untuk melindungi privasi pengguna. Dalam artikel ini kami membahas:

  • Apa itu Pengurangan User-Agent? Pengurangan User-Agent adalah proses meminimalkan jumlah informasi yang dibagikan melalui string User-Agent untuk melindungi privasi pengguna. Transisi ini mengurangi rincian data seperti versi sistem operasi dan model perangkat keras, yang sebelumnya digunakan untuk fingerprinting dan melacak pengguna di berbagai situs web. Kami mengeksplorasi bagaimana pengurangan ini memengaruhi developer dan bagaimana mereka dapat beradaptasi dengan perubahan ini.
  • Bagaimana Client Hints Bekerja? Client hints menyediakan mekanisme untuk meminta informasi entropi tinggi yang spesifik tentang perangkat pengguna dengan cara yang lebih peduli privasi. Dengan menggunakan header HTTP dan API JavaScript, developer dapat mengakses data mendetail tentang lingkungan pengguna bila diperlukan. Kami membahas bagaimana Client Hints diimplementasikan, jenis petunjuk yang tersedia, dan metode untuk mengaksesnya melalui header permintaan HTTP dan JavaScript.

Client hints terus berkembang, dan adopsinya dapat meningkat seiring dengan semakin banyaknya browser dan developer yang menyadari manfaatnya. Namun, masih harus dilihat apakah dukungan mereka akan tersebar luas atau apakah web akan terus terpecah dalam topik ini.

Corbado

Tentang Corbado

Corbado adalah Authentication Intelligence Platform untuk tim CIAM yang menjalankan autentikasi consumer dalam skala besar. Kami membantu Anda melihat apa yang tidak bisa ditunjukkan oleh log IDP dan tool analytics generik: device, versi OS, browser, dan credential manager mana yang mendukung passkey; mengapa enrollment tidak menjadi login; di mana flow WebAuthn gagal; dan kapan update OS atau browser diam-diam merusak login — semuanya tanpa mengganti Okta, Auth0, Ping, Cognito, atau IDP internal Anda. Dua produk: Corbado Observe menambah observability untuk passkey dan metode login lainnya. Corbado Connect menghadirkan managed passkey dengan analytics terintegrasi (berdampingan dengan IDP Anda). VicRoads menjalankan passkey untuk 5M+ pengguna dengan Corbado (aktivasi passkey +80%). Bicara dengan pakar Passkey

Pertanyaan yang Sering Diajukan#

Bagaimana saya bisa mendapatkan versi iOS yang sebenarnya di aplikasi web saya setelah iOS 26?#

Apple membekukan string User-Agent iOS/iPadOS di Safari 26, dirilis September 2025, yang berarti versi OS tidak lagi diekspos melalui User-Agent di browser apa pun yang berjalan di iOS. Tidak seperti Chrome di Android atau desktop, tidak ada API Client Hints yang tersedia di browser iOS, jadi versi iOS sebenarnya tidak lagi dapat diakses secara terprogram.

Apa perbedaan antara Regular Client Hints dan Critical Client Hints?#

Regular Client Hints, yang diminta melalui header respons Accept-CH, disertakan hanya di permintaan berikutnya dan tidak tersedia pada pemuatan halaman awal. Critical Client Hints memicu percobaan ulang browser dengan segera sebelum merender, memastikan bahwa petunjuk tersebut tersedia di rendernan pertama, tetapi ini menambah putaran latensi (round-trip) ke siklus permintaan.

Mengapa Apple membatalkan keputusan awalnya pada tahun 2017 untuk membekukan User-Agent Safari?#

Apple mengumumkan pembekuan User-Agent di Safari Technology Preview 46 pada tahun 2017 tetapi sebagian membatalkan keputusan tersebut pada tahun 2021 karena masalah kompatibilitas yang signifikan dengan situs web yang mengandalkan informasi User-Agent terbaru. Apple selanjutnya menerapkan pendekatan UA beku yang lebih bertahap daripada pembekuan lengkap secara langsung pada waktu itu.

Bagaimana saya bisa mendeteksi versi macOS di Safari jika Client Hints tidak didukung?#

Safari tidak mendukung Client Hints, tetapi versi macOS dapat disimpulkan dari nomor versi Safari di string User-Agent. Mengurangi tiga dari versi utama Safari secara andal memetakan ke versi utama macOS untuk macOS 10.15 dan di atasnya, berdasarkan keselarasan rilis yang konsisten antara versi Safari dan macOS.

Pendekatan apa yang harus digunakan pengembang library JavaScript untuk deteksi perangkat lintas browser?#

Pendekatan yang direkomendasikan adalah memanggil navigator.userAgentData.getHighEntropyValues() saat fungsi tersebut didefinisikan, mencakup browser berbasis Chromium, dan kembali menggunakan library penguraian string User-Agent untuk Firefox dan Safari. Untuk kasus yang memerlukan identifikasi model perangkat yang sangat spesifik, library profesional seperti wurfl atau 51degrees memberikan kemampuan deteksi tambahan selain apa yang diungkapkan oleh string User-Agent.

Lihat apa yang benar-benar terjadi dalam peluncuran passkeys Anda.

Jelajahi Console

Bagikan artikel ini


LinkedInTwitterFacebook