Cara kami membuat tab WebAuthn di Chrome DevTools

Fawaz Mohammad
Fawaz Mohammad
GitHub
Nina Satragno
Nina Satragno
X

Web Authentication API, yang juga dikenal sebagai WebAuthn, memungkinkan server menggunakan kriptografi kunci publik, bukan sandi, untuk mendaftarkan dan mengautentikasi pengguna. Hal ini dilakukan dengan mengaktifkan integrasi antara server ini dan pengautentikasi yang kuat. Pengautentikasi ini dapat berupa perangkat fisik khusus (misalnya kunci keamanan) atau terintegrasi dengan platform (misalnya pembaca sidik jari). Anda dapat membaca selengkapnya tentang WebAuthn di sini di webauthn.guide.

Poin masalah developer

Sebelum project ini, WebAuthn tidak memiliki dukungan proses debug native di Chrome. Developer yang mem-build aplikasi yang menggunakan WebAuth memerlukan akses ke pengautentikasi fisik. Hal ini sangat sulit karena dua alasan:

  1. Ada banyak jenis pengautentikasi. Proses debug untuk berbagai konfigurasi dan kemampuan mengharuskan developer memiliki akses ke banyak pengautentikasi yang berbeda, terkadang mahal.

  2. Autentikasi fisik didesain agar aman. Oleh karena itu, memeriksa statusnya biasanya tidak mungkin.

Kami ingin mempermudah proses ini dengan menambahkan dukungan proses debug langsung di Chrome DevTools.

Solusi: tab WebAuthn baru

Tab DevTools WebAuthn mempermudah proses debug WebAuthn dengan memungkinkan developer mengemulasi pengautentikasi ini, menyesuaikan kemampuannya, dan memeriksa statusnya.

Tab WebAuthn baru

Penerapan

Menambahkan dukungan proses debug ke WebAuthn adalah proses dua bagian.

Proses dua bagian

Bagian 1: Menambahkan Domain WebAuthn ke Protokol Chrome DevTools

Pertama, kami menerapkan domain baru di Chrome DevTools Protocol (CDP) yang terhubung ke pengendali yang berkomunikasi dengan backend WebAuthn.

CDP menghubungkan frontend DevTools dengan Chromium. Dalam kasus ini, kami menggunakan tindakan domain WebAuthn untuk menjembatani antara tab DevTools WebAuthn dan penerapan WebAuthn Chromium.

Domain WebAuthn memungkinkan pengaktifan dan penonaktifan Lingkungan Pengautentikasi Virtual, yang memutuskan koneksi browser dari Penemuan Pengautentikasi yang sebenarnya dan menghubungkan Penemuan Virtual.

Kami juga mengekspos metode di domain yang bertindak sebagai lapisan tipis ke antarmuka Virtual Authenticator dan Virtual Discovery yang ada, yang merupakan bagian dari penerapan WebAuthn Chromium. Metode ini mencakup penambahan dan penghapusan pengautentikasi serta pembuatan, pengambilan, dan penghapusan kredensial terdaftarnya.

(Baca kode)

Bagian 2: Membuat tab yang ditampilkan kepada pengguna

Kedua, kita membuat tab yang ditampilkan kepada pengguna di frontend DevTools. Tab terdiri dari tampilan dan model. Agen yang dibuat secara otomatis menghubungkan domain dengan tab.

Meskipun ada 3 komponen yang diperlukan, kita hanya perlu memperhatikan dua komponen tersebut: model dan tampilan. Komponen ke-3 - agen, dibuat secara otomatis setelah menambahkan domain. Singkatnya, agen adalah lapisan yang membawa panggilan antara frontend dan CDP.

Model

Model adalah lapisan JavaScript yang menghubungkan agen dan tampilan. Untuk kasus kita, modelnya cukup sederhana. Fungsi ini mengambil perintah dari tampilan, membuat permintaan sehingga dapat digunakan oleh CDP, lalu mengirimkannya melalui agen. Permintaan ini biasanya bersifat searah tanpa informasi yang dikirim kembali ke tampilan.

Namun, terkadang kami meneruskan respons dari model untuk memberikan ID bagi pengautentikasi yang baru dibuat atau untuk menampilkan kredensial yang disimpan di pengautentikasi yang ada.

(Baca kode)

Tampilan

Tab WebAuthn baru

Kita menggunakan tampilan untuk menyediakan antarmuka pengguna yang dapat ditemukan developer saat mengakses DevTools. File tersebut berisi:

  1. Toolbar untuk mengaktifkan lingkungan pengautentikasi virtual.
  2. Bagian untuk menambahkan pengautentikasi.
  3. Bagian untuk pengautentikasi yang dibuat.

(Baca kode)

Toolbar untuk mengaktifkan lingkungan pengautentikasi virtual

toolbar

Karena sebagian besar interaksi pengguna dilakukan dengan satu pengautentikasi pada satu waktu, bukan seluruh tab, satu-satunya fungsi yang kami sediakan di toolbar adalah mengaktifkan dan menonaktifkan lingkungan virtual.

Mengapa hal ini diperlukan? Pengguna harus secara eksplisit mengalihkan lingkungan karena tindakan tersebut akan memutuskan koneksi browser dari Penemuan Pengautentikasi yang sebenarnya. Oleh karena itu, saat aktif, pengautentikasi fisik yang terhubung seperti pembaca sidik jari tidak akan dikenali.

Kami memutuskan bahwa tombol eksplisit berarti pengalaman pengguna yang lebih baik, terutama bagi pengguna yang membuka tab WebAuthn tanpa mengharapkan penemuan sebenarnya dinonaktifkan.

Menambahkan bagian Pengautentikasi

Menambahkan bagian Pengautentikasi

Setelah mengaktifkan lingkungan pengautentikasi virtual, kami akan menampilkan formulir inline kepada developer yang memungkinkan mereka menambahkan pengautentikasi virtual. Dalam formulir ini, kami menyediakan opsi penyesuaian yang memungkinkan pengguna menentukan protokol dan metode transpor pengautentikasi, serta apakah pengautentikasi mendukung kunci tetap dan verifikasi pengguna.

Setelah pengguna mengklik Tambahkan, opsi ini akan dipaketkan dan dikirim ke model yang melakukan panggilan untuk membuat pengautentikasi. Setelah selesai, frontend akan menerima respons, lalu mengubah UI untuk menyertakan pengautentikasi yang baru dibuat.

Tampilan Authenticator

Tampilan Authenticator

Setiap kali pengautentikasi diemulasi, kami menambahkan bagian ke tampilan pengautentikasi untuk merepresentasikannya. Setiap bagian pengautentikasi menyertakan nama, ID, opsi konfigurasi, tombol untuk menghapus pengautentikasi atau mengaktifkannya, dan tabel kredensial.

Nama Authenticator

Nama pengautentikasi dapat disesuaikan dan secara default adalah "Pengautentikasi" yang digabungkan dengan 5 karakter terakhir ID-nya. Awalnya, nama pengautentikasi adalah ID lengkapnya dan tidak dapat diubah. Kami menerapkan nama yang dapat disesuaikan sehingga pengguna dapat memberi label pada pengautentikasi berdasarkan kemampuannya, pengautentikasi fisik yang dimaksudkan untuk diemulasi, atau nama panggilan apa pun yang sedikit lebih mudah dicerna daripada ID 36 karakter.

Tabel kredensial

Kami menambahkan tabel ke setiap bagian pengautentikasi yang menampilkan semua kredensial yang terdaftar oleh pengautentikasi. Dalam setiap baris, kami menyediakan informasi tentang kredensial, serta tombol untuk menghapus atau mengekspor kredensial.

Saat ini, kami mengumpulkan informasi untuk mengisi tabel ini dengan melakukan polling CDP untuk mendapatkan kredensial terdaftar untuk setiap pengautentikasi. Di masa mendatang, kami berencana menambahkan peristiwa untuk pembuatan kredensial.

Tombol Aktif

Kami juga menambahkan tombol pilihan Aktif ke setiap bagian pengautentikasi. Pengautentikasi yang saat ini ditetapkan aktif akan menjadi satu-satunya yang memproses dan mendaftarkan kredensial. Tanpa ini, pendaftaran kredensial yang diberikan beberapa pengautentikasi bersifat non-deterministik yang akan menjadi kekurangan fatal saat mencoba menguji WebAuthn menggunakan kredensial tersebut.

Kami menerapkan status aktif menggunakan metode SetUserPresence pada pengautentikasi virtual. Metode SetUserPresence menetapkan apakah pengujian kehadiran pengguna berhasil untuk pengautentikasi tertentu. Jika kita menonaktifkannya, pengautentikasi tidak akan dapat memproses kredensial. Oleh karena itu, dengan memastikan bahwa fitur ini aktif untuk maksimal satu pengautentikasi (yang ditetapkan sebagai aktif), dan menonaktifkan kehadiran pengguna untuk semua pengautentikasi lainnya, kita dapat memaksa perilaku deterministik.

Tantangan menarik yang kami hadapi saat menambahkan tombol aktif adalah menghindari kondisi race. Pertimbangkan skenario berikut:

  1. Pengguna mengklik tombol pilihan Aktif untuk Authenticator X, yang mengirimkan permintaan ke CDP untuk menetapkan X sebagai aktif. Tombol pilihan Active untuk X dipilih, dan semua yang lain dibatalkan pilihannya.

  2. Segera setelah itu, pengguna mengklik tombol pilihan Active untuk Pengautentikasi Y, yang mengirimkan permintaan ke CDP untuk menetapkan Y sebagai aktif. Tombol pilihan Aktif untuk Y dipilih, dan semua tombol lainnya, termasuk untuk X, dibatalkan pilihannya.

  3. Di backend, panggilan untuk menetapkan Y sebagai aktif akan selesai dan diselesaikan. Y kini aktif dan semua pengautentikasi lainnya tidak aktif.

  4. Di backend, panggilan untuk menetapkan X sebagai aktif akan selesai dan di-resolve. X kini aktif dan semua pengautentikasi lainnya, termasuk Y, tidak aktif.

Sekarang, situasi yang dihasilkan adalah sebagai berikut: X adalah pengautentikasi aktif. Namun, tombol pilihan Aktif untuk X tidak dipilih. Y bukan pengautentikasi aktif. Namun, tombol pilihan Aktif untuk Y telah dipilih. Ada perbedaan antara frontend dan status sebenarnya dari pengautentikasi. Tentu saja, hal ini menjadi masalah.

Solusi kami: Membangun komunikasi pseudo dua arah antara tombol pilihan dan pengautentikasi aktif. Pertama, kita mempertahankan variabel activeId dalam tampilan untuk melacak ID pengautentikasi yang saat ini aktif. Kemudian, kita menunggu panggilan untuk menetapkan pengautentikasi aktif agar ditampilkan, lalu menetapkan activeId ke ID pengautentikasi tersebut. Terakhir, kita melakukan loop pada setiap bagian pengautentikasi. Jika ID bagian tersebut sama dengan activeId, kita akan menetapkan tombol ke dipilih. Jika tidak, kita akan menetapkan tombol ke tidak dipilih.

Berikut adalah tampilannya:


 async _setActiveAuthenticator(authenticatorId) {
   await this._clearActiveAuthenticator();
   await this._model.setAutomaticPresenceSimulation(authenticatorId, true);
   this._activeId = authenticatorId;
   this._updateActiveButtons();
 }
 
 _updateActiveButtons() {
   const authenticators = this._authenticatorsView.getElementsByClassName('authenticator-section');
   Array.from(authenticators).forEach(authenticator => {
     authenticator.querySelector('input.dt-radio-button').checked =
         authenticator.getAttribute('data-authenticator-id') === this._activeId;
   });
 }
 
 async _clearActiveAuthenticator() {
   if (this._activeId) {
     await this._model.setAutomaticPresenceSimulation(this._activeId, false);
   }
   this._activeId = null;
 }

Metrik penggunaan

Kami ingin melacak penggunaan fitur ini. Awalnya, kami menemukan dua opsi.

  1. Menghitung setiap kali tab WebAuthn di DevTools dibuka. Opsi ini berpotensi menyebabkan penghitungan berlebih, karena seseorang mungkin membuka tab tanpa benar-benar menggunakannya.

  2. Melacak frekuensi kotak centang "Aktifkan lingkungan pengautentikasi virtual" di toolbar diaktifkan. Opsi ini juga berpotensi mengalami masalah penghitungan berlebih karena beberapa opsi dapat mengaktifkan dan menonaktifkan lingkungan beberapa kali dalam sesi yang sama.

Pada akhirnya, kami memutuskan untuk menggunakan opsi kedua, tetapi membatasi penghitungan dengan melakukan pemeriksaan untuk melihat apakah lingkungan sudah diaktifkan dalam sesi. Oleh karena itu, kita hanya akan meningkatkan jumlah sebesar 1, terlepas dari berapa kali developer mengalihkan lingkungan. Hal ini berfungsi karena sesi baru dibuat setiap kali tab dibuka kembali, sehingga mereset pemeriksaan dan memungkinkan metrik bertambah lagi.

Ringkasan

Terima kasih telah membaca. Jika Anda memiliki saran untuk meningkatkan kualitas tab WebAuthn, beri tahu kami dengan melaporkan bug.

Berikut beberapa referensi jika Anda ingin mempelajari WebAuthn lebih lanjut:

Mendownload saluran pratinjau

Sebaiknya gunakan Chrome Canary, Dev, atau Beta sebagai browser pengembangan default Anda. Saluran pratinjau ini memberi Anda akses ke fitur DevTools terbaru, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur baru, update, atau hal lain yang terkait dengan DevTools.