Glitch in the UI: Exploiting Hidden Frontend Elements for Unauthorized Access

Pendahuluan

Tidak semua celah keamanan berasal dari Injection, Auth Bypass, IDOR, atau endpoint API yang terbuka. Terkadang, kelemahan muncul dari asumsi desain bahwa pengguna tidak akan melihat atau mengakses sesuatu yang disembunyikan.

Dalam era SPA (Single Page Application) dan framework modern seperti React/Vue, developer sering mengandalkan logika frontend untuk menyembunyikan atau men-disable elemen tertentu berdasarkan role. Sayangnya, ini sering menjadi kontrol visual, bukan kontrol akses yang sesungguhnya.

Artikel ini membahas pendekatan eksploitasi unik dan underrated: mengakses fitur tersembunyi melalui inspect element, dengan studi kasus nyata dari pengujian sistem payment gateway. Teknik ini tidak hanya efektif, tapi juga sering lolos dari radar scanner otomatis.

Studi Kasus: Fitur Withdraw yang Bisa Dimanipulasi via Hidden Form

Konteks Pengujian

• Aplikasi: Platform payment gateway

• Role: User reguler (bukan admin)

• Tujuan: Menarik dana (withdraw) ke rekening bank

• Batasan: User hanya boleh withdraw ke rekening yang telah ditambahkan dan disetujui oleh admin

Penemuan Awal

Dalam salah satu uji penetrasi aplikasi payment-gateway, saya diberikan akun dengan role standar (bukan admin). Di dalam fitur withdraw, pengguna hanya dapat memilih rekening bank yang sudah ditambahkan oleh admin.

Namun, selama proses analisis DOM, ditemukan bahwa sebenarnya terdapat form HTML yang tersembunyi—bukan dihapus—menggunakan CSS:

<div id="add-bank-form" style="visibility: hidden;">
<form action="/withdraw/add_bank" method="POST">
<input name="account_name" />
<input name="account_number" />
<button type="submit">Add</button>
</form>
</div>

Frontend hanya menyembunyikan elemen, namun tidak menghapusnya dari DOM, dan tidak ada otorisasi tambahan di sisi server.

Teknik Eksploitasi

1. Inspect element halaman withdraw.

2. Temukan tag <div> tersembunyi berisi form add rekening.

3. Ubah CSS dari:

   visibility: hidden;


   menjadi:

   visibility: visible;
display: block;


4. Isi form dengan rekening bank arbitrer.

5. Submit dan observasi request keluar (dengan BurpSuite/DevTools).

6. Backend menerima permintaan dan menyimpan data, tanpa validasi role di sisi server.

Risiko dan Dampak

Potensi Abuse Lainnya

• Fitur admin seperti “Delete User” atau “Refund Transaction” yang disembunyikan dari UI

• Fitur promosi internal yang bisa diaktifkan oleh user biasa

• Akses ke tahap approval workflow hanya dengan membuka elemen yang di-hidden

Analisis Teknikal: Kenapa Ini Terjadi?

Dalam banyak kasus, aplikasi modern tidak memanfaatkan proper guard backend:

// Frontend:
if (user.role !== 'admin') {
document.getElementById('add-bank-form').style.visibility = 'hidden';
}

// Backend (masalah):
app.post('/withdraw/add_bank', (req, res) => {
saveBank(req.body); // ⚠️ tanpa validasi role!
});

Hasilnya, siapapun bisa memanipulasi frontend dan mengirim request langsung—dan backend akan memprosesnya dengan senang hati.

Rekomendasi Perbaikan

• Backend-First Authorization

Semua endpoint, bahkan yang hanya dirender di UI tertentu, wajib mengecek otorisasi pengguna:

if not user.has_permission('add_bank_account'):
return 403

• Remove Hidden Elements Entirely

Jangan hanya sembunyikan dengan CSS (display: none, visibility: hidden)—hapus elemen dari DOM sepenuhnya jika user tidak punya hak akses.

• Client-Side Conditional Rendering

Gunakan pendekatan conditional rendering berdasarkan data dari backend, bukan hardcoded:

{user.isAdmin && <AddBankForm />}

• Audit UI Behavior & Implement Automated Scanning

Jangan anggap “tidak terlihat” berarti “tidak dapat diakses”. Elemen tersembunyi bisa jadi bagian dari attack surface yang valid—dan harus diuji secara eksplisit.

Tools: GlitchHunt — Scanner Hidden UI & DOM Abuse

Untuk mengotomasi deteksi terhadap kasus seperti ini, saya mengembangkan sebuah tool open-source bernama GlitchHunt, tersedia dalam dua versi:

GlitchHunt CLI

• Melakukan crawling halaman setelah login

• Mendeteksi elemen hidden, visibility:hidden, display:none, disabled, dsb

• Bisa diintegrasikan ke pipeline audit UI/UX security

GlitchHunt Extension

• Ekstensi Chrome/Firefox untuk mendeteksi elemen tersembunyi saat browsing

• Menyorot langsung hidden buttons, inputs, forms

• Sangat cocok untuk manual recon pada dashboard aplikasi

Berikut adalah tampilan log JSON ketika --save-log digunakan :

{
  "scanned_url": "https://example.com/page.html",
  "timestamp": "2025-05-27T15:12:03Z",
  "hidden_elements": [
    {
      "tag": "div",
      "id": "sidebar-ad",
      "class": "",
      "attributes": {
        "hidden": true
      },
      "styles": {
        "display": "none"
      },
      "outerHTML": "<div id=\"sidebar-ad\" style=\"display: none;\">Ad Content</div>"
    }
  ],
  "disabled_elements": [
    {
      "tag": "button",
      "id": "add-acc",
      "class": "",
      "attributes": {
        "disabled": true
      },
      "outerHTML": "<button id=\"add-acc\" disabled>Add Account</button>",
      "click_result": "clicked_successfully"
    }
  ]
}

Kesimpulan

Masalah yang ditimbulkan oleh elemen tersembunyi bukanlah visual bug—melainkan authorization flaw yang nyata. Teknik seperti ini menjadi celah ketika developer menyamakan visibility dengan security.

Bug seperti ini mengajarkan kita bahwa frontend is not a firewall. Apa pun yang dikirim ke browser bisa dimanipulasi, dilihat, dan dimodifikasi. Visual hiding bukanlah kontrol akses, dan UI abuse adalah sumber eksploitasi yang sering luput dari perhatian.

Jika kamu adalah seorang pentester, mulailah setiap sesi dengan mindset: “Apa yang sengaja disembunyikan dariku?”

📚 Referensi

• OWASP A04:2021 – Insecure Design

• Frontend Security Anti-Patterns – Detectify

• Authorization Cheat Sheet – OWASP

• GlitchHunt GitHub Repository

Artikel ini disusun berdasarkan pengalaman nyata dalam pengujian keamanan terhadap sistem finansial. Semua nama sistem, endpoint, dan data telah disamarkan.