---
url: 'https://www.corbado.com/id/blog/client-hints-user-agent-chrome-safari-firefox'
title: 'Client Hints & User-Agents di Chrome, Safari & Firefox'
description: 'Pelajari dukungan User-Agent & Client Hints API di Chrome, Safari & Firefox serta cara kami menggunakannya untuk passkey & deteksi perangkat di komponen JavaScript.'
lang: 'id'
author: 'Vincent Delitz'
date: '2026-07-27T08:25:14.835Z'
lastModified: '2026-07-27T08:25:49.006Z'
keywords: 'pengurangan user-agent, user-agent, agen pengguna, client hints, api user-agent client hints, api client hints, dukungan browser client hints, string user agent, client hints chrome'
category: 'Engineering'
---

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

## Key Facts

- **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](https://en.wikipedia.org/wiki/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](https://x.com/rmondello/status/943545865204989953)
mengumumkan bahwa Safari akan membekukan string User-Agent di Safari Technology Preview 46
(STP 46), yang bertujuan untuk memerangi *fingerprinting* dan meningkatkan privasi.

![twitter safari user agent reduction](https://www.corbado.com/website-assets/twitter_user_agent_d4776d2a35.png)

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](https://groups.google.com/a/chromium.org/g/blink-dev/c/-2JIRNMWJ7s/m/u-YzXjZ8BAAJ)
untuk mengurangi rincian string User-Agent di Chrome, dengan memperkenalkan
[User-Agent Client Hints (UA-CH)](https://chromestatus.com/feature/5704553745874944) 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](https://www.chromium.org/updates/ua-reduction/) 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.

## 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](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 ![user agent](https://www.corbado.com/website-assets/user_agent_0fe7987aff.png)

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 operasi** | **Nama dikurangi/tetap**          |
| ------------------ | --------------------------------- |
| Mac                | Macintosh; Intel Mac OS X 10_15_7 |
| Windows            | Windows NT 10.0; Win64; x64       |
| ChromeOS           | X11; CrOS x86_64 14541.0.0        |
| Linux              | X11; Linux x86_64                 |
| Android            | Linux; Android 10; K              |
| iOS                | dikurangi (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](https://issues.chromium.org/issues/40167872) 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.

| **Browser**      | **Windows** | **MacOS** | **iOS**                    | **Android**                     |
| ---------------- | ----------- | --------- | -------------------------- | ------------------------------- |
| Chrome           | dikurangi   | dikurangi | dikurangi (iOS 26+)        | dikurangi                       |
| Edge             | dikurangi   | dikurangi | dikurangi (iOS 26+)        | dikurangi                       |
| Firefox          | dikurangi   | dikurangi | dikurangi (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 macOS**        | **Versi Safari** | **Tahun Rilis** |
| ---------------------- | ---------------- | --------------- |
| macOS Sequoia (15)     | Safari 18        | 2024            |
| macOS Sonoma (14)      | Safari 17        | 2023            |
| macOS Ventura (13)     | Safari 16        | 2022            |
| macOS Monterey (12)    | Safari 15        | 2021            |
| macOS Big Sur (11)     | Safari 14        | 2020            |
| macOS Catalina (10.15) | Safari 13        | 2019            |

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:
![client hints](https://s3.eu-central-1.amazonaws.com/corbado-cloud-staging-website-assets/client_hints_f186bae2e2.jpg)

| **Token HTTP UA-CH**       | **API JS UA-CH**             | **Entropi** |
| -------------------------- | ---------------------------- | ----------- |
| Sec-CH-UA-Platform-Version | UADataValues.platformVersion | Tinggi      |
| Sec-CH-UA-Mobile           | NavigatorUAData.mobile       | Rendah      |
| Sec-CH-UA-Model            | UADataValues.model           | Tinggi      |
| Sec-CH-UA                  | NavigatorUAData.brands       | Rendah      |
| Sec-CH-UA-Arch             | UADataValues.architecture    | Tinggi      |

### 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.

| **Header**         | **Nilai**                                                         |
| ------------------ | ----------------------------------------------------------------- |
| 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"                                                           |

2. 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:

| **Header** | **Nilai**                  |
| ---------- | -------------------------- |
| Accept-CH  | Sec-CH-UA-Platform-Version |

3. Pada **permintaan berikutnya**, Corbado.com kemudian akan menerima satu header tambahan dengan
   versi platform:

| **Header**         | **Nilai**                                                         |
| ------------------ | ----------------------------------------------------------------- |
| 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](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](https://github.com/WICG/ua-client-hints) 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](https://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.

| **Header**         | **Nilai**                                                         |
| ------------------ | ----------------------------------------------------------------- |
| 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"                                                           |

2. 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:

| **Header** | **Nilai**                  |
| ---------- | -------------------------- |
| Accept-CH  | Sec-CH-UA-Platform-Version |

3. 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:

| **Header**                 | **Nilai**                                                         |
| -------------------------- | ----------------------------------------------------------------- |
| 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).

![chromium user agent flow complete](https://www.corbado.com/website-assets/chromium_user_agent_flow_complete_cfbf688661.png)_Client
hints dengan Chromium:
[https://developers.google.com/privacy-sandbox/protections/User-Agent](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](https://en.wikipedia.org/wiki/Application-Layer_Protocol_Negotiation)
(Application-Layer Protocol Negotiation)** dapat ditemukan
[di sini](https://docs.google.com/document/d/1HQd3vosjFls2jp6DwpkNMUN4CBdmmxZJJz0WhhcqOPw/edit)
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](https://docs.corbado.com/corbado-connect/features/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()](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData/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:

```javascript
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.

![platform version](https://www.corbado.com/website-assets/platform_version_6111c471f1.png)

`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:

![get high entropy list](https://www.corbado.com/website-assets/get_high_entropy_list_75834fcb30.png)

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):

| **Browser**      | **Windows** | **MacOS**    | **iOS**         | **Android**      |
| ---------------- | ----------- | ------------ | --------------- | ---------------- |
| 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](https://web.wurfl.io/) atau [51degrees.com](https://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:

![get high entropy value](https://www.corbado.com/website-assets/get_high_entropy_value_538459bd28.png)_Detail
selengkapnya tentang:
[https://learn.microsoft.com/en-us/microsoft-edge/web-platform/how-to-detect-win11](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.

## 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.