Biarkan Saya Memasukkan Angka Saja

 (gendignoux.com/blog)
1 poin oleh GN⁺ 3 jam lalu | 1 komentar | Bagikan ke WhatsApp
  • Kolom input verifikasi email 6 digit pada sistem login pemerintah Swiss AGOV tidak dapat menangani input angka dari keyboard AZERTY Prancis, sehingga pendaftaran akun itu sendiri terblokir
  • JavaScript pada kolom input mencegat penekanan tombol dan menyimpan kode verifikasi dalam variabel terpisah, tetapi mengabaikan tombol Shift, yang pada praktiknya memblokir tata letak AZERTY yang membutuhkan Shift untuk memasukkan angka
  • Kesalahan yang sama terjadi pada berbagai kombinasi Firefox·Chromium·Chrome·Safari dan Linux·macOS, tetapi berfungsi normal pada keyboard QWERTY, sehingga masalahnya dipersempit menjadi masalah tata letak keyboard, bukan browser atau sistem operasi
  • Dukungan resmi juga hanya bisa digunakan setelah melewati verifikasi email yang sama, dan tidak ada sarana alternatif seperti email atau telepon, sehingga pengguna yang tidak bisa login bahkan tidak bisa melaporkan bug login
  • Jika menggunakan logika penanganan tombol yang rumit alih-alih kolom input native, dan mengikat produk serta kanal dukungan pada prosedur autentikasi yang sama, aksesibilitas dan penanganan gangguan akan runtuh bersama; karena itu diperlukan input sederhana berbasis DOM dan kanal dukungan yang independen

AGOV sebagai infrastruktur identitas digital

  • Identitas digital belakangan menjadi salah satu perdebatan utama di web, disertai berbagai ketergantungan dan kontroversi yang saling terkait
  • Sistem login pemerintah Swiss AGOV telah beroperasi sejak 2024 dan jumlah akunnya mencapai 1,6 juta
  • Penggunaannya sebagai sarana login meluas ke berbagai urusan pemerintah, termasuk penggunaan asuransi pengangguran dan pelaporan pajak wajib

Pendaftaran yang terhenti di tahap verifikasi email

  • Prosedur pendaftaran AGOV dimulai dengan mengirimkan alamat email lalu memasukkan kode verifikasi 6 digit
  • UI kode verifikasi terdiri dari total 6 kotak input, satu untuk setiap angka
    • Saat angka dimasukkan, fokus tidak berpindah ke kotak berikutnya
    • Angka terus menumpuk di kotak saat ini dan berubah menjadi status kesalahan berwarna merah
    • Bahkan jika berpindah secara manual dan memasukkan angka satu per satu, pada akhirnya muncul kesalahan field required
  • Upaya mengubah nilai DOM secara langsung di Developer Tools tidak menemukan nilai form yang terlihat, dan tidak ada kesalahan yang tercatat di konsol web
  • Hasilnya sama saat menggunakan alamat email lain atau alamat palsu seperti test@example.com
    • example.com adalah domain yang dicadangkan menurut RFC 6761

Menyingkirkan kemungkinan browser dan sistem operasi

  • Awalnya dicurigai kombinasi Firefox dan Linux tidak didukung atau CAPTCHA gagal
    • Tepat sebelum form kode verifikasi muncul, halaman terhubung ke eu-api.friendlycaptcha.eu
    • Dokumen persyaratan resmi hanya mencantumkan Windows dan macOS sebagai sistem operasi yang didukung
    • Sebaliknya, panduan kunci keamanan menyebutkan bahwa Linux dan Firefox juga didukung
  • Kesalahan yang sama terjadi pada 6 kombinasi lingkungan berikut
    • Firefox, Chromium, Chrome di Linux
    • Firefox, Safari, Chrome di macOS
  • Pada laptop kerja, setelah input dimasukkan, fokus otomatis berpindah ke kotak berikutnya, dan kesalahan Code entered is incorrect untuk kode yang salah, bukan kode kosong, juga muncul dengan benar
  • Di komputer macOS milik teman, ketiga browser juga menerima kode verifikasi
  • Untuk berinteraksi jangka panjang dengan layanan pemerintah, tidak mungkin bergantung pada komputer yang diberikan pemberi kerja; bahkan jika pendaftaran dilakukan di komputer kerja, masih ada kemungkinan tidak bisa login dari laptop pribadi

Struktur dukungan yang bahkan menghalangi pelaporan masalah

  • Dukungan resmi hanya disediakan melalui form web, dan form ini juga terlebih dahulu mengharuskan memasukkan kode verifikasi email
  • FAQ menyatakan bahwa dukungan lembaga peserta hanya tersedia dengan membuat tiket online selama jam kerja
  • Selain alamat pos Swiss Federal Chancellery, tidak ada email atau nomor telepon
  • Fitur umpan balik untuk meninggalkan pujian, kritik, atau permintaan kepada AGOV juga mengharuskan login dengan AGOV atau akun setara
  • Pengguna yang gagal dalam verifikasi email terjebak dalam ketergantungan melingkar, karena prosedur verifikasi yang sama membuat mereka tidak dapat melaporkan masalah

  • AGOV Access dan perangkat yang didukung

    • Aplikasi Android AGOV Access memiliki rating 1,4, tetapi masalah kode verifikasi yang sama tidak ditemukan dalam ulasan Google Play
    • Dalam ulasan, ada banyak permintaan dukungan untuk turunan Android yang berfokus pada keamanan dan privasi, GrapheneOS
    • Menurut FAQ resmi, aplikasi tidak berfungsi karena framework penguatan untuk mencegah perubahan tidak sah tidak kompatibel dengan GrapheneOS
    • Federal Chancellery menginstruksikan pemasok untuk memastikan kompatibilitas
    • Saat ini, sarana autentikasi kedua untuk pendaftaran dan login adalah smartphone iOS·Android standar yang diizinkan atau kunci keamanan, dan keduanya tetap harus terlebih dahulu melewati verifikasi email

Penyebab yang ditemukan di JavaScript

  • Resource yang dimuat halaman tidak banyak, tetapi file JavaScript utama yang diminifikasi tanpa obfuscation berukuran 2,4 MB, dan jika diekspansi menjadi lebih dari 100.000 baris
  • Dengan mencari string field required, ditemukan logika yang menetapkan status kode verifikasi
    • Jika tidak ada variabel kode verifikasi, status ditetapkan sebagai REQUIRED
    • Jika panjangnya berbeda dari panjang kode yang diperlukan, diproses sebagai WRONG
    • Jika panjangnya cocok, status VALID atau status kesalahan digunakan sesuai hasil verifikasi email dari server
  • Fungsi verificationCodeEntered mencegat penekanan tombol dan mengumpulkan kode verifikasi ke dalam variabel JavaScript
    • Enter menjalankan callback verifikasi
    • Backspace menghapus nilai saat ini
    • Tombol panah dan Tab berpindah di antara kotak input
    • Tombol biasa dikonversi menjadi angka dengan Number(S.key) lalu disimpan ke kode
    • Tombol seperti Control, Meta, Shift, v, r dikembalikan tanpa diproses
  • Karena saat form dikirim nilai DOM tidak dibaca, perubahan kotak input melalui Developer Tools atau ekstensi browser tidak tercermin pada state yang dikelola JavaScript secara terpisah

Mengapa angka hanya terblokir di AZERTY

  • Tata letak standar Prancis AZERTY membutuhkan tombol Shift untuk memasukkan angka
  • Karena kode mengabaikan input Shift, pada AZERTY angka itu sendiri tidak dapat disimpan sebagai kode verifikasi
  • Komputer kerja menggunakan tata letak bahasa Inggris QWERTY, dan tidak ada orang Prancis di antara mereka yang membantu memeriksa masalah ini
    • Akibatnya, dari perangkat yang diuji, hanya dua laptop pribadi yang tampak rusak
  • Setelah tata letak keyboard di sistem operasi diganti ke tata letak lain, input di laptop pribadi juga kembali normal
    • Sebaliknya, ketika perangkat yang sebelumnya berfungsi normal dialihkan ke tata letak Prancis, kesalahan yang sama berhasil direproduksi
  • Keyboard bahasa Prancis standar di Swiss termasuk keluarga QWERTZ yang umum di Eropa Tengah
    • Tata letak ini memungkinkan input bahasa Prancis dan Jerman secara efisien, dan tidak membutuhkan Shift untuk memasukkan angka, sehingga kesalahan yang sama tidak muncul
  • Menurut Swiss Federal Statistical Office, ada sekitar 171.000 penduduk berkewarganegaraan Prancis di Swiss, dan komuter lintas batas yang harus berinteraksi dengan pemerintah Swiss tidak termasuk dalam angka ini

Batasan investigasi sebelum source dibuka

  • Menurut FAQ AGOV, source code AGOV akan dipublikasikan pada Desember 2026 untuk memenuhi persyaratan hukum
  • Pasal 9 EMBAG mewajibkan lembaga federal mempublikasikan source code perangkat lunak yang mereka kembangkan sendiri atau tugaskan untuk dikembangkan dalam menjalankan tugasnya
    • Pengecualian berlaku jika hak pihak ketiga atau alasan keamanan menghalangi atau membatasi publikasi
  • Yang akan dipublikasikan adalah versi AGOV yang telah mencapai tujuan proyek, termasuk AGOV e-ID Verifier, dan versi berikutnya akan dipublikasikan melalui catatan rilis yang disiapkan setelah rilis
  • Meski beberapa layanan sudah menggunakan AGOV sebagai login wajib, source belum dipublikasikan, sehingga pengguna sulit memberi tahu bug langsung kepada developer atau membagikan cara bypass

Cakupan verifikasi identitas yang dikonfirmasi setelah pendaftaran

  • Setelah mengubah tata letak keyboard, alamat email berhasil diverifikasi dan pendaftaran diselesaikan dengan kunci keamanan
  • Selama proses pendaftaran, nama, nomor telepon, dan tanggal lahir dimasukkan, tetapi informasi ini tidak diverifikasi
  • Pada tahap pendaftaran dasar, hanya dua hal yang dikonfirmasi
    • Alamat email benar-benar ada
    • Sarana autentikasi kedua adalah kunci keamanan dengan model yang diizinkan, atau aplikasi AGOV Access yang berjalan pada perangkat Android·iOS yang diizinkan
  • AGOV kuat terhadap pengambilalihan akun akibat phishing jarak jauh, tetapi pada tahap pendaftaran dasar tidak mencegah seseorang membuat akun dengan menggunakan nama dan informasi identitas orang lain
  • Hasil pemeriksaan tambahan menunjukkan bahwa saat mengakses layanan yang diklasifikasikan sensitif, verifikasi identitas diperlukan
    • Tepat setelah pendaftaran, layanan semacam itu belum diakses
  • Bug dilaporkan melalui form dukungan, tetapi tidak ada jawaban yang diterima

Pelajaran dari desain ini

  • Desain input dan dukungan yang tidak tangguh

    • Membuat UI yang mencolok dengan 6 kolom input dan logika JavaScript yang rumit bukanlah pendekatan yang tangguh
    • Lebih baik menggunakan satu kolom input native browser dan hanya mempercantik bentuk visualnya dengan CSS
    • Jika logika form dipisahkan sepenuhnya dari DOM, nilai DOM tidak dapat dibaca saat submit, dan pengguna mahir maupun ekstensi browser juga tidak dapat mengubah nilai input
    • Jika hanya ada satu kanal dukungan, ketika kanal itu sendiri rusak tidak ada cara untuk menghubungi pihak terkait, sehingga diperlukan kanal kedua seperti email atau telepon
    • Jika logika login yang sama diterapkan pada produk utama dan kanal dukungan, laporan bug dari pengguna yang tidak dapat login akan terlewat
    • Banyak layanan internet menaruh status page di domain terpisah karena alasan yang sama
    • Menempatkan permintaan dukungan di balik verifikasi email dapat mengurangi spam, tetapi juga mengurangi laporan gangguan dari pengguna nyata
    • Jika source code baru dibuka setelah penggunaan diwajibkan pada beberapa sistem, pemecahan masalah oleh pengguna serta berbagi bug dan cara bypass menjadi terbatas
    • Publikasi source secara legal bukan sekadar item kepatuhan, tetapi juga berguna untuk investigasi gangguan nyata

  • Open web yang membantu investigasi

    • Logika JavaScript terkait tidak di-obfuscate, sehingga penyebab dapat ditemukan hanya dengan beberapa pencarian string
    • Decompiler canggih atau LLM mahal tidak diperlukan
    • Jika kode di-obfuscate atau dikompilasi ke WebAssembly, memahami penyebabnya akan memakan jauh lebih banyak waktu
    • Karena kode tidak hanya didistribusikan ke sistem operasi tertutup yang disetujui, melainkan disediakan di open web, kode dapat diunduh dan diperiksa meski dalam bentuk yang diminifikasi

  • Kondisi yang memungkinkan identifikasi penyebab

    • Dengan membandingkan beberapa laptop yang menggunakan tata letak keyboard berbeda, kemungkinan masalah per browser atau masalah jaringan dapat dikurangi sejak awal
    • Namun, untuk memastikan bahwa ini bukan kesalahan pengguna, pengumpulan bukti awal memakan waktu karena harus menangkap layar setiap kombinasi browser secara sistematis

Bacaan terkait

1 komentar

 
GN⁺ 3 jam lalu
Opini di Lobste.rs

  • Salah satu praktik yang paling saya benci di internet adalah ketika situs web mencegat input tombol dan menanganinya sesuka hati alih-alih meneruskannya apa adanya ke browser
    Situs yang melarang salin-tempel di kolom kata sandi jauh lebih umum, dan ini juga termasuk kategori yang sama, bahkan mungkin terasa lebih parah

    • Saya tidak mengerti alasan harus mengimplementasikan ulang dengan JavaScript sesuatu yang sudah didukung secara bawaan oleh browser hanya dengan HTML dan CSS
      Biasanya itu cuma menambah kompleksitas karena alasan yang dipaksakan

  • Cara menaruh satu kolom input untuk tiap karakter rasanya seperti wabah
    Begitu satu perusahaan mengadopsinya karena terlihat keren, sekarang semua orang membuat versi mereka sendiri

    • Saya tidak akan kaget kalau UI seperti ini memang benar-benar meningkatkan tingkat keberhasilan memasukkan kode sekali pakai
      Pengguna bisa langsung paham bahwa ini bukan kolom kata sandi, bahkan tanpa membaca dengan teliti

  • Sebagai contoh terkait, ada Medium once had a bug like this which prevented entering the character 'Ś'

  • Saya sempat memikirkan implementasi lain, tetapi pada akhirnya tetap tidak menemukan metode yang lebih baik daripada <input type="text" /> biasa
    Bahkan hiasan CSS yang membuatnya tampak terlalu berbeda dari kolom input normal pun membuat saya ragu. Nilai input bisa saja disalin untuk ditampilkan dalam kotak-kotak besar, tetapi lalu muncul segala macam pertanyaan seperti apa yang harus dilakukan bila pengguna memasukkan lebih banyak dari panjang yang diizinkan, dan manfaatnya tidak cukup besar untuk membenarkan usaha itu. Paling jauh saya hanya akan mengubah font dan ukuran kolom inputnya

    • Kesalahan paling umum pada OTP adalah salah memasukkan satu angka, misalnya 1224 alih-alih 1234
      Cara tercepat memperbaikinya adalah mengklik 2 yang kedua lalu menekan 3, tetapi ini tidak bisa diimplementasikan hanya dengan HTML+CSS
    • Saya akui ini ide yang agak lucu, tetapi saya penasaran apakah satu <input type="text" pattern="[0-9]+" minlength=6 maxlength=6> bisa diberi jarak antarhuruf yang aneh sehingga secara visual terlihat seperti enam kotak
      Cara yang lebih mudah adalah pengguna mengetik di satu kolom input teks, lalu JavaScript menggambar enam kotak di lokasi lain pada DOM dan memperbaruinya melalui event input yang terjadi setiap kali tombol ditekan
      Sulit memastikan mana yang lebih baik untuk aksesibilitas. Dari sudut pandang pembaca layar, opsi kedua yang menggabungkan <input> biasa dengan <canvas alt=""> dekoratif justru mungkin lebih baik, dan navigasi keyboard juga tidak menjadi aneh. Namun, bagi pengguna yang memakai alat bantu selain pembaca layar, menyembunyikan <input> secara visual bisa menjadi bencana aksesibilitas, jadi saya sangat berhati-hati

  • Seperti banyak layanan lain, email juga bisa menyediakan kode dan tautan aktivasi sekaligus

    Masukkan kode: XX XX XX

atau klik tautan: <tautan aktivasi kode + pengalihan>

    Ini juga bisa menyelesaikan masalah yang sama

    • Saya rasa membiasakan pengguna untuk mengklik tautan di email berarti memundurkan pertahanan terhadap phishing
    • Jika situs web dibuka di laptop dan email diterima di ponsel, salin-tempel tidak terlalu nyaman
      Mungkin ini bisa dianggap situasi pengecualian, tetapi aksesibilitas memang tentang menangani pengecualian seperti itu dengan baik

  • Tridactyl juga punya masalah yang persis sama https://github.com/tridactyl/tridactyl/issues/3257
    Ini pertama kali dilaporkan pada 2019, jadi mungkin kejadian kali ini akan membuat mereka cukup malu untuk akhirnya memperbaikinya

  • Ini sekali lagi menunjukkan bahwa membuat situs web yang rusak atau lambat membutuhkan jauh lebih banyak usaha daripada membuat situs web yang sekadar berfungsi